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]<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>[/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.