Bleeding Edge HTML5, WebRTC & Device Access

The world is changing… and oh my, it is changing fast.   In the not-too-distant future, many capabilities that were exclusive to plugin-based content will be accessible to the HTML/JavaScript world without any plugin dependencies.   This includes access to media devices (microphone and camera), as well as real time communications.   You might be reading this thinking “no way, that is still years off”, but it’s not.

Just last night I was looking at the new webRTC capabilities that were introduced in the Google Chrome Canary build in January, and I was experimenting with the new getUserMedia API.   WebRTC is an open source realtime communications API that was recently included in Chrome (Canary, the latest dev build), the latest version of Opera, and soon FireFox (if not already), and is built on top of the getUserMedia APIs. Device access & user media APIs aren’t commonly available in most users’ browsers yet, but you can be sure that they will be commonplace in the not-so-distant future.

Below you’ll see a screenshot of a simple example demonstrating camera access.

You can test this out for yourself here:

Note: This requires the Google Chrome Canary Build.

The beauty of this example is that the entire experience is delivered in a whopping total of 17 lines of code.   It uses the webkitGetUserMedia API to grab a media stream from the local webcam and display it within a HTML5 <video> element.

function load() {
var video = document.getElementById(‘myVideo’);
if (navigator.webkitGetUserMedia) {
function(stream) { video.src = webkitURL.createObjectURL(stream); },
function(error) { alert(‘ERROR: ‘ + error.toString()); } );
} else {
alert(‘webkitGetUserMedia not supported’);
<body onload="load()">
<video autoplay="autoplay" id="myVideo" />

While this example is really basic, it is a foundational building block for more complicated operations, including realtime video enhancement and streaming/communications.    Check out this more advanced example from, which applies effects to the camera stream in real time:

Note: This also requires the Google Chrome Canary Build.

You can read more about WebRTC, get demos, and get sample code at

If you want to read more about some of the new “Bleeding Edge” features coming to the web, check out this slide deck by Google’s Paul Kinlan.   You can also read more about the getUserMedia API from Opera’s developer site.

  • John

    I think it’s great that a lot of the functions we had to develop in through plug-ins are making their way more and more into the browser.
    But it’s also part of the problem why the evolution is so slow. Browser vendors each trying to muscle their own adaptation of features and standards creating further fragmentation of what’s already a mess in the web development world.
    While I love to work strictly in R&D for specific browsers never having to worry about browser-compatibility, the rest of us have to worry about it.
    It is exciting that there are more options emerging though.

  • Imtiyaz Ahmed

    Is there any way to stream local media file using the same interface?

    • Andrew

      You will be able to access local content that is capable of providing a media stream to the browser. See details here: If you want to access a normal video file, you can use the html5 video tag, however be sure to keep in mind the codec issues across browsers.

  • Thomas

    Wrong link for Paul Kinlan’s slide deck!

    • Andrew

      Thanks! It has been fixed.

  • joel


    This is what I did.

    I copied your 17 line source code into notepad.

    Saved it as video.html,enabled MediaStream in my browser’s chrome://flags. then opened it from my chrome browser, I got this message in the console

    GET file:///E:/undefined

    But the very same code when I ran from ur site

    its working fine

    So I tried running the html in TomCat and opened http://localhost:8080/Camcorder/videoCamcorder.html# from browser and it worked fine.

    Now my question is, how to make the html run locally?

  • joel

    hi another update,

    sometimes I get the error message as this

    Failed to load resource file:///E:/undefined

    where my video.html is in E:/

    Thanks in advance for your help

    • Andrew

      Hi Joel,
      We already discussed on twitter, but I’m posting details here for other readers. This is based on the security policy for the browser. You can launch chrome with security disabled by using the following command, however, do not expect this to work in general cases. This should only be for development purposes:

      open -a /Applications/Google\ –args –allow-file-access-from-files –disable-web-security

  • Marc Bächinger

    Cool post, thx.

    For my current canary build (2012.09.20) i changed “video” to {‘video’: true} to make it work.

  • html5guru

    Pretty cool.
    Can I do some videoconferencing with that technology?

    • Andrew

      It could be possible once web RTC is more widely supported. At this time, few browsers support it.