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: http://tricedesigns.com/portfolio/getUserMedia/

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.

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

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 http://neave.com/webcam/html5/, 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 http://www.webrtc.org

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.

11 thoughts on “Bleeding Edge HTML5, WebRTC & Device Access”

  1. 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.

  2. Hi

    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 http://tricedesigns.com/portfolio/getUserMedia/

    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?

  3. 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

    1. 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\ Chrome.app –args –allow-file-access-from-files –disable-web-security

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>