All posts tagged ‘WebRTC’

File Under: APIs, Multimedia

Google, Mozilla Team Up for Skype-Killing Video Call Demo

Modified WebRTC logo by Tsahi Levent-Levi/Flickr.

Google and Mozilla, erstwhile rivals in the web browser world, have teamed up to show off the power of WebRTC by creating a web-based video chat app — think Skype without Skype.

The demo bypasses a centralized server and instead makes a direct peer-to-peer connection between browsers. The key component of the demo is a set of work-in-progress standards known as WebRTC.

WebRTC is a proposed standard — currently being refined by the W3C — with the goal of providing a web-based set of tools that any device can use to share audio, video and data in real time. It’s still in the early stages, but WebRTC has the potential to supplant Skype, Flash and many device-native apps with web-based alternatives that work on any device.

The app that the Chrome and Firefox teams developed is available on Google Code and there’s a demo app available on Google app engine if you’d like to try it out for yourself. To make it work you’ll need to use either Firefox Nightly or Chrome 25 (currently in the beta channel). In Firefox, you’ll need to go to about:config and set media.peerconnection.enabled to “true.”

Mozilla has previously showed off a demo of WebRTC with it Social API and Chrome has previously used parts of WebRTC for an interactive sand sketching experiment. This latest demo relies on a new WebRTC trick known as RTCPeerConnection, which should arrive in final form in Chrome next month and Firefox around the end of May. The RTCPeerConnection support in both browsers means there’s no need for plugins and developers can rest assured their apps will “just work” across browsers. Together Chrome and Firefox account for just under 60 percent of browsers on the web.

There is of course one other major browser that’s not yet coming to the WebRTC party.

Indeed Microsoft has proposed a WebRTC competitor to the W3C, though thus far little has happened beyond the initial proposal. As it stands now neither WebRTC nor Microsoft’s competing CU-RTC-Web proposal are actual W3C standards, but work is progressing on WebRTC and, with browsers already implementing it in the wild, it stands a much better chance of becoming a standard one day.

It’s still a little early to throw out Skype. For now you’ll have to content yourself with a very cool demo and the tantalizing possibility to one day soon you might not need Skype, Facebook or any other third-party server to chat with friends around the web.

Add an HTML5 Webcam to Your Site With Photobooth.js

WT Monkey is in your photobooth.js, changin’ hues. Image: Screenshot/Webmonkey

The big web development news for 2013 is shaping up to be WebRTC, a set of APIs being developed by Mozilla, Google and others at the W3C that allows web developers to access device hardware — your camera, microphone, accelerometer and so on. Even now hardly a day goes by without a new demo showcasing WebRTC in some way.

The latest WebRTC hotness to catch our eye is developer Wolfram Hempel’s Photobooth.js, a JavaScript library for working with a device’s camera. Photobooth.js allows users to take pictures directly on your website, for example, to add an avatar. It also acts a bit like the OS X Photobooth app, offering real-time adjustments for hue, saturation and brightness (one word of warning, hue can really slow down Firefox).

Want to add a Photobooth-style camera app to your site? Just download Photobooth.js and add this code to your page:

myPhotobooth = new Photobooth( document.getElementById( "container" ) ); 

That’s it. Of course there’s a little more to do if you actually want to do something with your newly instantiated Photobooth — like capture images or resize and save them. But Photobooth.js makes the whole process pretty simple; see the documentation for more details.

Photobooth.js works in current versions of Chrome, Firefox, Opera, and any other browser that supports the WebRTC getUserMedia method. You can see a complete list of browsers that support getUserMedia over on caniuse.

Hempel’s code is available on GitHub (BSD license) and can be used as a standalone app or a JQuery plugin.

Mozilla Blends Social API, WebRTC for More Social Apps

Mozilla is making good on its promise to take its fledgling Social API beyond the simple Facebook integration it showcased for the launch of Firefox 17. In fact, the company’s newest Social API demo removes the need for social websites entirely, tapping emerging web standards to create a real-time video calling, data sharing app — one part Skype, one part Facebook, all parts web-native.

The direct peer-to-peer video calls and file sharing features come from WebRTC, a proposed web standard that Mozilla and others are working on in conjunction with the W3C. The RTC in WebRTC stands for Real-Time Communications, and the core of WebRTC is the getUserMedia JavaScript API, which gives the browser access to hardware features like the camera and microphone.

Much of the enthusiasm around WebRTC comes from the fact that it enables web apps to do many of the same things that, without WebRTC support, require platform-native APIs. WebRTC will help developers build web apps that can compete with native apps, but it has other tricks up its sleeve — like a whole new way to connect with your friends on the web.

“While many of us are excited about WebRTC because it will enable several cool gaming applications and improve the performance and availability of video conferencing apps, WebRTC is proving to be a great tool for social apps,” writes Mozilla’s Maire Reavy on the Mozilla blog.

Reavy goes on to paint a picture of seamless social sharing through WebRTC and Mozilla’s Social API:

Sometimes when you’re chatting with a friend, you just want to click on their name and see and talk with them in real-time. Imagine being able to do that without any glitches or hassles, and then while talking with them, easily share almost anything on your computer or device: vacation photos, memorable videos — or even just a link to a news story you thought they might be interested in — simply by dragging the item into your video chat window.

Mozilla’s Social API-WebRTC mashup goes beyond previous demos, using a new WebRTC feature, one which Firefox is the first to support, DataChannels. DataChannels offer a way to send data from one WebRTC-enabled browser to another. DataChannels can send pretty much any data the browser can access, be it images, videos, webpages or local files.

For more details on how the DataChannel API works, check out this earlier post on the Mozilla Hacks blog. If you’d like to see exactly what’s happening behind the scenes of Mozilla’s Social API-WebRTC demo, the code is available on GitHub.

File Under: Browsers

Chrome Drops OS X 10.5, Adds New Video and Gaming Tools

Chrome 22, which Google just dropped into the Chrome developer channel, marks the end of the line for Mac OS X 10.5 users. When Chrome 22 arrives in final form roughly three months from now it will require OS X 10.6 or newer.

Apple’s OS X 10.5 is looking a little long in the tooth these days, having been released some five years ago. Chrome isn’t the first to drop Leopard support, Mozilla’s recently released Firefox 13 does likewise and even Apple hasn’t updated Leopard since 2009.

If you aren’t using Leopard, you can grab the latest Chrome dev channel release from Google.

On the plus side for Leopard users (and everyone else), Chrome 21 — which has now been promoted to the beta channel — supports the getUserMedia API, which allows web developers to tap your device’s camera and microphone. That means web-based chat apps will work in Chrome. It also opens the door to other audio and video web apps that would once have required Flash or platform-native apps.

The getUserMedia support is also the first step in supporting the Web Real Time Communication (WebRTC) standard, which is also part of recent Firefox and Opera releases. Opera has some demos that show what WebRTC and getUserMedia can do. For another cool example of getUserMedia check out Magic Xylophone from developers Romuald Quantin and Magnus Dahlstrand of Stinkdigital.

Chrome 21′s getUserMedia isn’t the browser’s only new trick, this release also introduces support for the Gamepad Javascript API, which will allow developers to write web-based games that use videogame controllers.

Mozilla Builds Video Chat App Using Nothing but Web Standards

Mozilla recently showed off a demo of a video chat app built entirely from web standards. Most of the demo runs on top of the proposed Web Real Time Communication (WebRTC) standard, the W3C’s answer to the audio and video streaming capabilities once found only in proprietary plugins like Flash.

Mozilla’s demo movie shows two users signed in with BrowserID (recently renamed Persona) start a video chat right in the browser. The Persona features, combined with the SocialAPI add-on for Firefox, make the demo browser look a bit like Facebook or other social sites with a “buddy list” of currently signed in users available in the sidebar. Select a user from that list and just click the video chat link to start a call.

Currently Mozilla’s video chat demo requires an experimental build of Firefox and actually uses “a custom API intended to simulate the getUserMedia and PeerConnection APIs currently being standardized.” In other words, video chat in Firefox is still a long way from replacing Skype, but Mozilla does plan to bring at least preliminary support to Firefox later this year.

The short-term goal, according to Mozilla hacker Anant Narayanan, who narrates the video above, is to add WebRTC support to Firefox’s Nightly channel “by the end of this quarter.” Narayanan cautions that in the beginning support may be “limited to just getUserMedia and not the full PeerConnection.”

While the demo video focuses on making video calls work in the desktop browser, with help from some other elements in Mozilla’s larger WebAPI project — which is developing a set of APIs that will allow web apps to better compete with platform-native applications — web-based video chat could work on any device. We recently looked at Mozilla’s Camera API, which gives developers access to your device’s camera, and, in conjunction with these video chat tools, could theoretically bring video chat to mobile browsers as well.

For more info on the video chat experiment, including the source code for the demo, head over to the Mozilla Hacks blog.