<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" 
      xmlns:thr="http://purl.org/syndication/thread/1.0">
  <link rel="alternate" type="text/html" href="http://blog.tmcnet.com/blog/tom-keating/webrtc/webrtc-test-demo-fun.asp" />
  <link rel="self" type="application/atom+xml" href="http://blog.tmcnet.com/blog/tom-keating/atom.xml" />
  <id>tag:blog.tmcnet.com,2013:/blog/tom-keating//4/tag:blog.tmcnet.com,2013:/blog/tom-keating//4.50575-</id>
  <updated></updated>
  <title>Comments for WebRTC Test Demo Fun</title>
  <subtitle>VoIP &amp; Gadgets blog - Latest news in VoIP &amp; gadgets, wireless, mobile phones, reviews, &amp; opinions</subtitle>
  <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.38</generator>
  <entry>
    <id>tag:blog.tmcnet.com,2013:/blog/tom-keating//4.50575</id>
    <link rel="alternate" type="text/html" href="http://blog.tmcnet.com/blog/tom-keating/webrtc/webrtc-test-demo-fun.asp" />
    <link rel="service.edit" type="application/atom+xml" href="http://blog.tmcnet.com/mt/mt-atom.cgi/weblog/blog_id=4/entry_id=50575" title="WebRTC Test Demo Fun" />
    <published>2013-01-21T21:19:14Z</published>
    <updated>2013-01-21T23:27:38Z</updated>
    <title>WebRTC Test Demo Fun</title>
    <summary>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...</summary>
    <author>
      <name>Tom Keating</name>
      <uri>http://blog.tmcnet.com/blog/tom-keating/</uri>
    </author>
    
    <category term="Apple" />
    
    <category term="Google" />
    
    <category term="TMCnet" />
    
    <category term="Unified Communications" />
    
    <category term="Video Conferencing" />
    
    <category term="VoIP" />
    
    <category term="WebRTC" />
    
    <content type="html" xml:lang="en" xml:base="http://blog.tmcnet.com/blog/tom-keating/">
      <![CDATA[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 <strong>getUserMedia, </strong>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.<br /><br />So without further adeiu, let's try "Self View" Camera on your WebRTC-enabled browser - Google Chrome, Opera, and Firefox (<a href="http://nightly.mozilla.org/">nightly build only</a>) 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: <a href="http://blog.tmcnet.com/blog/tom-keating/webrtctest.html">http://blog.tmcnet.com/blog/tom-keating/webrtctest.html</a><br /><br />You'll see a live video feed of your default webcam, like mine shown here:<br /><a onclick="window.open('http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/google-chrome-webrtc-test-demo-12235.asp','popup','width=861,height=690,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/google-chrome-webrtc-test-demo-12235.asp"><img src="http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/google-chrome-webrtc-test-demo-thumb-500x400-12235.png" alt="google-chrome-webrtc-test-demo.png" width="500" height="400" /></a><br /><br />Here's the <em>very</em> short <a href="https://labs.ericsson.com/apps/bowser/sample-code">source code</a> to get this demo to work:<br />&lt;!doctype html&gt;<br />&lt;html&gt;<br />&nbsp;&nbsp; &lt;head&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;getUserMedia() Self View Video test&lt;/title&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp; window.onload = function () {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setTimeout(function () {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var attrs = {"audio": true, "video": true, "toString": function() { return "audio, video";}};<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; navigator.webkitGetUserMedia(attrs, function (stream) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementsByTagName("video")[0].setAttribute("src", webkitURL.createObjectURL(stream));<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var pc = new PeerConnection();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (stream) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pc.addStream(stream);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, 2000);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />&nbsp;&nbsp; &lt;/head&gt;<br />&nbsp;&nbsp; &lt;body&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;video style="width: 800px; height: 600px;" autoplay&gt;<br />&nbsp;&nbsp; &lt;/body&gt;<br />&lt;/html&gt;<br /><br />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 <a href="https://itunes.apple.com/us/app/bowser/id560478358?ls=1&mt=8">here</a>. <img title="dancing" src="http://blog.tmcnet.com/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/emotions/img/dancing.gif" border="0" alt="dancing" /><br /><br />Now, after installing Bowser, launch Bowser and click this same hyperlink: <a href="http://blog.tmcnet.com/blog/tom-keating/webrtctest.html">http://blog.tmcnet.com/blog/tom-keating/webrtctest.html</a><br /><br />You will now see your iPhone/iPad's camera outputted to your browser! Mobile WebRTC for the win! <img title="applause" src="http://blog.tmcnet.com/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/emotions/img/applause.gif" border="0" alt="applause" /> I said <a href="http://blog.tmcnet.com/blog/tom-keating/webrtc/2013---the-year-of-webrtc.asp">2013 is the Year of WebRTC</a> and I wasn't kidding. Here's a screenshot of it in action:<br /><a href="http://blog.tmcnet.com/blog/tom-keating/images/webrtc-test-apple-ios-browser.PNG"><img src="http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/webrtc-test-apple-ios-browser-thumb-500x333-12233.png" alt="webrtc-test-apple-ios-browser.PNG" width="500" height="333" /></a><br />It may not look like much since this is a static photo, but trust me, you will see <strong>live video</strong> 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</a>.<br /><br />Ok, enough "self view" camera action - you want to demo two-way video using WebRTC, don't you? Well, head on over to <a href="https://apprtc.appspot.com/">https://apprtc.appspot.com/</a> from two WebRTC browsers that have cameras. Actually, you'll head to <a href="https://apprtc.appspot.com/">https://apprtc.appspot.com/</a> one time and the site will generate a random ID, like this: <a href="https://apprtc.appspot.com/?r=24771704">https://apprtc.appspot.com/?r=24771704</a> 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.<br /><br />But wait, it gets better. I just found a website called <a href="http://browsermeeting.com/">browsermeeting.com</a> that uses WebRTC and allows for <strong>multiple</strong> 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:<br /><a onclick="window.open('http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/browsermeeting-webrtc-12254.asp','popup','width=977,height=965,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/browsermeeting-webrtc-12254.asp"><img src="http://blog.tmcnet.com/blog/tom-keating/assets_c/2013/01/browsermeeting-webrtc-thumb-500x493-12254.png" alt="browsermeeting-webrtc.PNG" width="500" height="493" /></a><br /><br />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.<br /><br />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: <a href="http://webrtc.plivo.com/" target="_blank">http://webrtc.plivo.com/</a> 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.<br /><br />You should also check out&nbsp;<a href="http://bistri.com">bistri</a> and <a href="http://twelephone.com/">twelephone</a>. 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. <a href="http://twelephone.com/">twelephone</a> is similar to bistri, except it uses Twitter for authentication. Hope you enjoy these WebRTC demos -- and production WebRTC solutions!<br /><br /><strong>Update:</strong><br />Be sure to check out the <a href="http://www.webrtcworld.com/conference/">WebRTC Conference & Expo</a> which will be in Atlanta, George in June.<br /><br /><strong>Update 2:</strong><br />Also check out <a href="http://www.veckon.com/">Veckon</a>, which offers multi-party WebRTC conferencing. It generates a unique URL per conference. If you want to see CSS filter effects (X-Ray, B&W, Sepia, Blur, Hulk Green, etc.) applied to a WebRTC live camera, head over <a href="http://html5-demos.appspot.com/static/getusermedia/photobooth.html">here</a>.]]>
      
    </content>
  </entry>

</feed>
