File: examples/impl.js

Recommend this page to a friend!
  Classes of Elger van Boxtel  >  JS Webcam  >  examples/impl.js  >  Download  
File: examples/impl.js
Role: Example script
Content type: text/plain
Description: Example script
Class: JS Webcam
Capture pictures or video with the webcam
Author: By
Last change: comments
Date: 5 years ago
Size: 2,900 bytes
 

Contents

Class file image Download
document.addEventListener('DOMContentLoaded', function () {

	document.getElementById('image').style.display = 'none';
	document.getElementById('thumb').style.display = 'none';
	document.getElementById('video').style.display = 'none';

	var webcam = new Webcam('#video');

  /**
   * when pressing the stop button...
   */
	document.getElementById('stop').addEventListener('click', function(e){
		e.preventDefault();
		webcam.stop();
		document.getElementById('image').style.display = 'none';
		document.getElementById('thumb').style.display = 'none';
	}, false);

	document.getElementById('start').addEventListener('click', function(e){
		e.preventDefault();

		if (webcam.isSupported()) {
		    webcam.start({video: true, audio: false}, function(stream) {
		      // success function, video is streaming...
		      document.getElementById('video').style.display = 'block';
		    }, function(e) {
		      alert('Oops, something went wrong');
		    });
		}
		else {
			if (window.navigator.userAgent.match(/Mobi/)){ // mobile browser...
				webcam.useFallback(true);
			}
		    else{
		    	alert('API is not supported by your browser');
		    }
		}
	}, false);

	document.getElementById('picture').addEventListener('click', function(e){
		e.preventDefault();
		if (webcam.isStarted()){
			// now take an picture using the webcam
		    webcam.takePicture(function(pic){
		    	// and assign it to an image
			    document.querySelector('#image').src = pic;
			    document.querySelector('#image').style.display = 'inline';
		    });

		    // now take an picture using the webcam and make a square centered thumb
		    webcam.takePicture(function(pic){
		    	document.getElementById('video').style.display = 'none';
		    	// and assign it to an image
			    document.querySelector('#thumb').src = pic;
			    document.querySelector('#thumb').style.display = 'inline';
		    },function(ctx, canvas){
		        var min = Math.min(canvas.width,canvas.height);
		        var max = Math.max(canvas.width,canvas.height);
		        canvas.width = min;
		        canvas.height = min;
		        ctx.drawImage(webcam.element(), (max-min)/2, 0, min,min, 0,0,min,min);
		      });
	    }
	}, false);

	document.getElementById('fallback').addEventListener('click', function(e){

		// now take an picture using the webcam and make a square centered thumb
	    webcam.fallback(function(pic){
	    	document.getElementById('video').style.display = 'none';
	    	// and assign it to an image
		    document.querySelector('#thumb').src = pic;
		    document.querySelector('#thumb').style.display = 'inline';
	    },function(ctx, canvas){
	        var min = Math.min(canvas.width,canvas.height);
	        var max = Math.max(canvas.width,canvas.height);
	        canvas.width = min;
	        canvas.height = min;
	        ctx.drawImage(webcam.element(), (max-min)/2, 0, min,min, 0,0,min,min);
	    });

	}, false);
});