Camera and Microphone Access with HTML5

Yes, Plugin-free acess to camera/microphone with HTML5!

Welcome to the post-flash revolution aka smartphone development. Flash isn't even available on Android 4.1.

AFAIK Ericsson labs were first to experiment on handling devices with HTML5, now with the  navigator.getUserMedia we can handle both camera and microphone devices with ease.

It's important to note that this works with Chrome 18.0.1009.0 with the --enable-media-stream flag set, Firefox nightly and Opera 12.

In chrome type 'chrome://flags' in your address bar. Find 'Enable MediaStream' and enable it.

Simple code to capture voice and video:

navigator.getUserMedia = navigator.webkitGetUserMedia 
|| navigator.getUserMedia;
 
window.URL = window.URL || window.webkitURL;
 
navigator.getUserMedia({audio: true, video: true}, function(stream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(stream);
}, function(e) {
  console.log(e);
});

DEMOS :

This was much awaited HTML5 feature from most of devs, hope this will be shipped as a default API soon! Kudos HTML5!

Share this