How to access the webcamera with Javascript, html5 with getUserMedia

Although in internet there are a lot of examples of how to achieve this, we will offer you a recopilation that covers all the needs of this API (start,pause,stop and snapshot working on android,chrome and firefox).

The following code works in Google Chrome (Android and desktop) and Mozilla Firefox.

  <video id="video" width="500" height="500" autoplay></video>
  <!-- You can make the canvas visible if you want -->
  <canvas id="canvas" width="500" height="500" style="display:none;"></canvas>
  <input type="button" id="takePhoto" value="Photo !"/>
  <input type="button" id="pauseTransmission" value="pause transmission"/>
  <input type="button" id="resumeTransmission" value="resume transmission"/>

<script type="text/javascript">
  var _streamCopy = null; // If you want to stop the transmission see how this works in Stop Transmision
  var button = document.getElementById('takePhoto');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext("2d");
  var video = document.getElementById('video');
  var videoSettings = {
  var onError = function(err){

  // Start the camera when the DOM is ready
        if(navigator.getUserMedia) { // Standard
		navigator.getUserMedia(videoObj, function(stream) {
                        _streamCopy = stream;
			video.src = stream;;
		}, onError);
	} else { 
	       navigator.mozGetUserMedia(videoObj, function(stream){
                        _streamCopy = stream;
		if (video.mozSrcObject !== undefined) {
  			video.mozSrcObject = stream;
  		} else {
  			video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
  	      }, onError);
  // when the button is clicked, draw the video on the canvas, get a base64 image an open it in a new window.
    context.drawImage(video, 0, 0, 500, 500);
    var image = canvas.toDataURL();;

  // Pause transmission on click button 



Note : Remember you need to run the previous example from a http or https connection, otherwise the getUserMedia API will be not available in file:// protocol.

Handle errors

Those are all the available error code in the getUserMedia API, change the onError event of the previous code for the following :

var onError = function(err){
            case 'PermissionDeniedError':
                alert("Permission to use a media device was denied by the user or the system.");
            case 'NotFoundError':
                alert('No media tracks of the type specified were found that satisfy the constraints specified.');
                alert("An unknown error just happened ! :(");

Stop transmission

If you want to stop the transmission dinamically, we will use the following code :

// _streamCopy is declared in the first example ()

    _streamCopy.stop(); // if this method doesn't exist, the catch will be executed.
   _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream

Only add a button and a event listener and execute the code. Remember to copy the stream variable whose is generated in the getUserMedia method.

Have fun !

This could interest you

Become a more social person