All posts tagged ‘WebRTC’

File Under: JavaScript, Web Standards

Mar

2013

WebRTC Is Hard, Let’s Go Demoing

By Scott Gilbertson

Conversat.io, simple video chat in your browser.
Image: Screenshot/Webmonkey.

WebRTC is changing the web, making possible things which just a few short months ago would have been not just impossible, but nearly unthinkable. Whether it’s a web-based video chat that requires nothing more than visiting a URL, or sharing files with your social networks, WebRTC is quickly expanding the horizons of what web apps can do.

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.

Cool as WebRTC is, it isn’t always the easiest to work with, which is why the Mozilla Hacks blog has partnered with developers at &yet to create conversat.io, a demo that shows off a number of tools designed to simplify working with WebRTC.

Conversat.io is a working group voice chat app. All you need to do is point your WebRTC-enabled browser to the site, give your chat room a name and you can video chat with up to 6 people — no logins, no joining a new service, just video chat in your browser.

Currently only two web browsers support the WebRTC components necessary to run conversat.io, Chrome and Firefox’s Nightly Channel (and you’ll need to head to about:config in Firefox to enable the media.peerconnection.enabled preference). As such, while conversat.io is a very cool demo, WebRTC is in its infancy and working with it is sometimes frustrating — that’s where the libraries behind the demo come in.

As &yet’s Henrik Joreteg writes on the Hacks blog, “the purpose of conversat.io is two fold. First, it’s a useful communication tool…. Second, it’s a demo of the SimpleWebRTC.js library and the little signaling server that runs it, signalmaster.”

Both tools, which act as wrappers for parts of WebRTC, are designed to simplify the process of writing WebRTC apps — think jQuery for WebRTC. Both libraries are open source (MIT license) and available on GitHub for tinkering and improving.

If you’d like to learn more about SimpleWebRTC and signalmaster and see some example code, head on over to the Mozilla Hacks blog for the full details.

Tags: WebRTC

File Under: Browsers, Mobile, Multimedia

Feb

2013

Mozilla Wants to Put Your Phone Inside Firefox

By Scott Gilbertson

What if your web browser were also your phone? That’s a future being imagined by Mozilla, Ericsson and AT&T.

Mozilla has combined Firefox’s WebRTC support with Ericsson’s Web Communication Gateway and AT&T’s API Platform to put together a working demo of calls — both voice and video — and text messages all made from within Firefox.

Mozilla’s “WebPhone” is one part Skype, one part Apple’s Messages and all parts web.

The demo builds on previous Mozilla efforts like the recent WebRTC video calling demo with Google, as well as the Firefox Social API demo Mozilla showed off last year (the Social API provides the glue that brings your mobile contact info into Firefox in the video above).

Aside from the cool factor, web-based calling has a potentially huge benefit for users — no more need for your phone. Mozilla’s WebPhone concept would make it possible to call from any device and the person you’re calling would still see your info.

WebPhone also makes it easy to receive calls and messages anywhere. Anyone who’s ever used Apple’s Message app knows that it’s nice to get messages on the desktop, eliminating the need to track down your phone when you’re already in front of a screen. WebPhone would make it possible to not only get messages on whichever device you’re using, but take calls as well.

Indeed what’s most surprising about Mozilla’s WebPhone demo is that AT&T and Ericsson are involved since more than anything they’re participating in a vision of the future where they are little more than pipes for sending data.

If you happen to be in Barcelona Spain for the ongoing Mobile World Congress event you can check out a live demo of WebPhone at the Mozilla booth. For now the rest of us will have to settle for the demo video above.

Tags: WebRTC

File Under: Multimedia, Responsive Design

Feb

2013

Stop Squinting at Your Screen Thanks to This Responsive Type Experiment

By Scott Gilbertson

Tracking Webmonkey. Image: Screenshot/Webmonkey.

Responsive design typically focuses on screen sizes, but that’s just the practical application of the larger goal — making a website function well no matter how or where you are viewing it. The emphasis ultimately is on you, not your device.

Developer Marko Dugonjić takes responsive design’s emphasis on you to new levels of interactivity with his experiment in typesetting by face detection.

Using a very cool JavaScript headtracking library — which taps WebRTC and getUserMedia to access your webcam — Dugonjić’s app calculates how close you are to the screen and adjusts the font size to make text more readable.

To see it in action, head on over to the demo page and grant it permission to use your webcam. For the most useful example, check out the onload-based implementation, but for a better sense of how it works be sure to try the “Realtime” version.

It may not be the most practical experiment and how well it works depends on plenty of factors well beyond the control of the site (how good your eyes are, whether or not you’re wearing your glasses and so on), but it’s not hard to imagine how this could be very useful in some situations — for example, bumping up font-size when your site is displayed on a television.

When you’re done playing with the resizing demo be sure to check out Dugonjić’s more practical and more immediately useful Typetester.

Tags: WebRTC

File Under: APIs, Multimedia

Feb

2013

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

By Scott Gilbertson

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.

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.

Tags: WebRTC

File Under: HTML5, JavaScript, Web Standards

Dec

2012

Add an HTML5 Webcam to Your Site With Photobooth.js

By Scott Gilbertson

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.

Tags: WebRTC