How to access the webcam using HTML5 getUserMedia
HTML5 getUserMedia helps in accessing the camera or microphone through browsers without the use of plugins.
Following tutorial helps you in creating an HTML page, that access the camera without the use of plugins.
Before getting started, make sure to download Opera labs camera build and make sure your webcam is working properly ;)
To make this happen, you need to know getUserMedia method in detail.
getUserMedia method uses 3 arguments. First argument specifies which type of device we are about to access. If it is microphone you specify ‘audio’, if it is webcam then it is ‘video’. Currently Opera labs build supports ''video' only.
The second and third arguments are used for call back.
You can create two functions stating what should happen when user acknowledges your request (a success function) and when user rejects your request(a failure function). You can now pass the success function to the second argument and the failure function to the third argument.
When user accepts the request, success function is called as a callback function along with the stream. When user rejects your request, failure function is called along with the error detail. Failure callback is optional, though it is helpful.
Pass the stream to the source of the video element. Your webcam starts now. Make sure to allow your browser to access webcam
This returns true, when the browser supports it else it returns false. You can handle things accordingly.
This example is derived from explode camera demo. More details about it on here.
Following tutorial helps you in creating an HTML page, that access the camera without the use of plugins.
Before getting started, make sure to download Opera labs camera build and make sure your webcam is working properly ;)
To make this happen, you need to know getUserMedia method in detail.
getUserMedia method uses 3 arguments. First argument specifies which type of device we are about to access. If it is microphone you specify ‘audio’, if it is webcam then it is ‘video’. Currently Opera labs build supports ''video' only.
The second and third arguments are used for call back.
Syntax:
getUserMedia (media name(video or audio),success callback,failure callback)You can create two functions stating what should happen when user acknowledges your request (a success function) and when user rejects your request(a failure function). You can now pass the success function to the second argument and the failure function to the third argument.
When user accepts the request, success function is called as a callback function along with the stream. When user rejects your request, failure function is called along with the error detail. Failure callback is optional, though it is helpful.
Pass the stream to the source of the video element. Your webcam starts now. Make sure to allow your browser to access webcam
Feature Detection:
Since HTML5 is relatively young, not all the browser supports getUserMedia. So you need to handle things when a browser doesn't support it. You can do this by browser detection, which is the oldest method, but I prefer feature detection. Here is why. You can detect whether the browser supports getUserMedia() method by calling this lineif (getUserMedia)
This returns true, when the browser supports it else it returns false. You can handle things accordingly.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Exploding Camera Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<div role="main">
<video id="sourcevid" autoplay>Sorry, you're browser doesn't support video. Please try <a href="http://snapshot.opera.com/labs/camera/">Opera</a>.</video>
<br/>
<input type="button" value="Start" onclick="start()" >
<input type="button" value="Stop" onclick="stop()" >
</div>
<script src="camera.js"></script>
</body>
</html>
JavaScript code
var video;
function start() {
video = document.getElementById('sourcevid');
// Replace the source of the video element with the stream from the camera
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (getUserMedia) {
getUserMedia('video', successCallback, errorCallback);
// Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
//navigator.getUserMedia({video: true}, successCallback, errorCallback);
function successCallback(stream)
{
video.src = stream;
}
function errorCallback(error)
{
var errorMsg = 'User Denies access';
document.querySelector('[role=main]').innerHTML = errorMsg;
console.error('An error occurred: [CODE ' + error.code + ']');
return;
}
} else {
var errorMsg = '<p class="error">Uh oh, it appears your browser doesn\'t support this feature.<br>Please try with a <a href="http://snapshot.opera.com/labs/camera/">browser that has camera support</a>.</p>';
document.querySelector('[role=main]').innerHTML = errorMsg;
console.log('Native web camera streaming (getUserMedia) is not supported in this browser.');
return;
}
}
function stop()
{
video = document.getElementById('sourcevid');
video.src = "";
}
This example is derived from explode camera demo. More details about it on here.
