Access webcam without any plugins : WebRTC

WebRTC is free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. This project is supported by Google, Mozilla and Opera. In here we are going to access webcam using Web APIs.

First step is to download the browers which supports latest media and RTC APIs.

  • Download Chrome
    Then, you need to enable the feature by visiting about:flags and Enable “Media Source API” the flag.
  • Download Firefox
    Then, you need to go to about:config and enable the feature “media.navigator.enabled”

Next step is to create video.html file. See below:

<html>
<body bgcolor="black">
<center>
	<video id="basic-stream" width="100%" height="80%" class="videostream" autoplay></video>
	<p><button id="capture-button">Capture video</button> <button id="stop-button">Stop</button></p>
</center>
<script type="text/javascript" pagespeed_no_defer="">
	pagespeed.lazyLoadImages.overrideAttributeFunctions();
</script>

<script>
function onFailSoHard(e){
	if(e.code==1)
		{
			alert('User denied access to their camera');
		}
		else
		{
			alert('getUserMedia() not supported in your browser.');
		}
}
(function(){
	var video=document.querySelector('#basic-stream');
	var button=document.querySelector('#capture-button');
	var localMediaStream=null;
	button.addEventListener('click',function(e)
	{
		if(navigator.getUserMedia)
		{
			navigator.getUserMedia('video',function(stream){
				video.src=stream;video.controls=true;
				localMediaStream=stream;},onFailSoHard);
		}
		else if(navigator.webkitGetUserMedia)
		{
			navigator.webkitGetUserMedia({video:true},function(stream){
				video.src=window.webkitURL.createObjectURL(stream);
				video.controls=true;localMediaStream=stream;},onFailSoHard);
		}
		else if(navigator.mozGetUserMedia)
		{
			// alert('moz');
			navigator.mozGetUserMedia({video:true},function(stream){
				// video.src=URL.createObjectURL(stream);
				video.mozSrcObject = stream;
				video.controls=true;localMediaStream=stream;},onFailSoHard);
		}
		else
		{
			onFailSoHard({target:video});
		}
	},false);
	 document.querySelector('#stop-button').addEventListener('click',function(e){video.pause();localMediaStream.stop();},false);
		})();
</script>
</body>
</html>

 

There is API Difference between Firefox and chrome:
Firefox and Chrome both prefix their interfaces and are likely to continue to do so until the standard is more finalized. The following table shows the relevant names:

W3C Standard           Chrome                   Firefox
--------------------------------------------------------------
getUserMedia           webkitGetUserMedia       mozGetUserMedia
RTCPeerConnection      webkitRTCPeerConnection  mozRTCPeerConnection
RTCSessionDescription  RTCSessionDescription    mozRTCSessionDescription
RTCIceCandidate        RTCIceCandidate          mozRTCIceCandidate

Copy and paste the video.html in the /var/www and run(http://localhost/video.html)

Thats it !

Sources: http://www.webrtc.org, http://dev.w3.org

Advertisements

One thought on “Access webcam without any plugins : WebRTC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s