TMCnet News

WebRTC Test Demo Fun

[January 21, 2013]

WebRTC Test Demo Fun

Originally posted on VoIP & Gadgets Blog, here: http://blog.tmcnet.com/blog/tom-keating/webrtc/webrtc-test-demo-fun.asp.

WebRTC is pretty cool, allowing you to perform VoIP and video conferencing all within a browser. I thought it would be cool to demo some WebRTC code here leveraging getUserMedia, an API that began as part of HTML5 and was split off into the W3C WebRTC specification suite. It allows JavaScript access to a device's cameras and microphones to enable in-browser VoIP and video-conferencing. Further, with HTML5 it's easy to apply cool video filters (think Instagram) on-the-fly while in a video conference.

So without further adeiu, let's try "Self View" Camera on your WebRTC-enabled browser - Google Chrome, Opera, and Firefox (nightly build only) all support WebRTC, though not Internet Explorer (yet). Open your WebRTC-enabled browser and click here to try viewing your camera for this "self view" demo test: http://blog.tmcnet.com/blog/tom-keating/webrtctest.html

You'll see a live video feed of your default webcam, like mine shown here:

Here's the very short source code to get this demo to work:
<!doctype html>
<html>
   <head>
      <title>getUserMedia() Self View Video test</title>
      <script type="text/javascript">
     window.onload = function () {
        setTimeout(function () {
           var attrs = {"audio": true, "video": true, "toString": function() { return "audio, video";}};
           navigator.webkitGetUserMedia(attrs, function (stream) {
             document.getElementsByTagName("video")[0].setAttribute("src", webkitURL.createObjectURL(stream));
             var pc = new PeerConnection();
             if (stream) {
                 pc.addStream(stream);
             }
          });
        }, 2000);
      };
      </script>
   </head>
   <body>
      <video style="width: 800px; height: 600px;" autoplay>
   </body>
</html>

Now wouldn't it be cool to try a self camera view on your Apple iPhone or iPad camera using the above code Alas, iOS Safari doesn't support WebRTC (yet). Ah, but the Ericsson folks released a WebRTC browser for iOS that you can download from the App Store here. dancing

Now, after installing Bowser, launch Bowser and click this same hyperlink: http://blog.tmcnet.com/blog/tom-keating/webrtctest.html

You will now see your iPhone/iPad's camera outputted to your browser! Mobile WebRTC for the win! applause I said 2013 is the Year of WebRTC and I wasn't kidding. Here's a screenshot of it in action:

It may not look like much since this is a static photo, but trust me, you will see live video within your Bowser browser coming from your Apple's camera. Is that cool or what It isn't a stretch to see this as an Apple FaceTime or a href="http://blog.tmcnet.com/blog/tom-keating/voip/skype-vs-facebook---how-webrtc-will-turn-friends-into-enemies.asp">Microsoft / Skype killer.

Ok, enough "self view" camera action - you want to demo two-way video using WebRTC, don't you Well heard on over to https://apprtc.appspot.com/ from two WebRTC browsers that have cameras. Actually, you'll head to https://apprtc.appspot.com/ one time and the site will generate a random ID, like this: https://apprtc.appspot.com/ r=24771704 You will then use this URL for the second browser to join the conference. Currently, this demo only supports 2-party conferencing, but still a nice demonstration.

But wait, it gets better. I just found a website called browsermeeting.com that uses WebRTC and allows for multiple video participants AND it allows you to share files. This is less a demo than a real live production environment, that has hosted 1776 rooms, 4883 participants, and 672 hours of conferencing as of 1/21/2013. BrowserMeeting.com is built on XSockets.NET and is a product created by Team XSockets.NET and their affiliates. Here's a screeshot of a two-way conference, but I did test a 3-way which worked:

I like how Browser Meeting simply asks you to create a unique "room name", which can be your own name of course, making it very easy for others to join your meeting room.

One final example of WebRTC I'll give comes from Plivo, who built an open bridge that's basically a Proof of Concept for WebRTC letting people make their first WebRTC call. You can try it yourself here: http://webrtc.plivo.com/ You and a friend can both join and talk to each other via WebRTC to check out the sound quality, connection speeds, etc. Other people may be on too since it's just a big open bridge right now, similar to a party line.

You should also check out bistri and twelephone. bistri is pretty interesting because it lets you link with Facebook, Google, Windows Live, Yahoo, Jabber/XMPP, and ?????????. It'll pull all your contacts and their presence status and display it on their website allowing you to chat, or make a voice or video call. twelephone is similar to bistri, except it uses Twitter for authentication. Hope you enjoy these WebRTC demos -- and production WebRTC solutions!

Update:
Be sure to check out the WebRTC Conference & Expo which will be in Atlanta, George in June.

Tags: apple, bistri, browser meeting, camera, chrome, demo, ericsson, google, ios, iphone, plivo, self view, twelephone, webrtc Related tags: apprtc appspot, https apprtc, support webrtc, webrtc enabled, video conferencing, webrtc