Live camera filters for HTML5 with JavaScript

Live camera filters for HTML5 with JavaScript

Live camera filters for HTML5 with JavaScript

This post demonstrates you how you can create a HTML5 page with JavaScript that will apply a basic image filter to a live webcam stream in the web browser. You can use the filter from this tutorial, or any other basic image filter. The filter that we use here is an invert filter, therefore all colors in the target picture will be inverted.

Of course HTML5 is new and not yet fully supported by all browsers. Unfortunately, making use of the webcam is not supported by all webbrowsers. Currently the script on this page can only be used in Chrome, Firefox and Opera and Maxthon. It does not work in Internet Explorer or on mobile devices..

Here is an overview of the differences between the web browsers that support the webcam:

Webcam Video source
Maxthon webkitGetUserMedia Stream from window.webkitURL
Chrome webkitGetUserMedia Stream from window.webkitURL
Opera getUserMedia Direct stream
Firefox mozGetUserMedia Stream from window.URL

To see the filter in action, visit this page.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Basic video filters for HTML5 with JavaScript
	</title>
</head>
<body>
	<!-- Hidden video element to stream the webcam to -->
	<video id="myVideo" hidden="hidden"></video>
	<!-- Canvas element to stream our edited frames to -->
	<canvas id="myCanvas" width="320" height="240"></canvas>

	<script>
		var video = document.getElementById('myVideo');
		var canvas = document.getElementById('myCanvas');
		var canvasContext = canvas.getContext('2d');

		// Requests a frame and call back after one 60th of a second (60fps)
		var requestFrame = window.requestAnimationFrame
								|| window.mozRequestAnimationFrame
								|| window.webkitRequestAnimationFrame
								|| function (callback) {
									setTimeout(callback, 1000 / 60);
								};

		// On load
		window.addEventListener("load", function () {
			// getUserMedia: Opera
			// webkitGetUserMedia: Chrome and Maxthon
			// mozGetUserMedia: Firefox
			if (window.navigator.getUserMedia ||
				window.navigator.webkitGetUserMedia ||
				window.navigator.mozGetUserMedia) {
				// Call the webcam
				(window.navigator.getUserMedia ||
					window.navigator.webkitGetUserMedia ||
					window.navigator.mozGetUserMedia).call(window.navigator, { video: true, audio: false }, camInitialized, userMediaFailed);

				// Request the first frame
				requestFrame(loop);
			} else {
				window.alert("Native web camera streaming is not supported in this browser!");
			}
		});

		// Webcam is initialized, bind it to our video object
		function camInitialized(stream) {
			// Opera uses stream directly
			// Firefox uses an object url with window.URL
			// Chrome and Maxthon use an object url with window.webkitURL
			video.src = window.navigator.getUserMedia ? stream : (window.URL || window.webkitURL).createObjectURL(stream);
			video.play();
		}

		// On error
		function userMediaFailed(error) {
			console.log("Could not getUserMedia: " + error);
		}

		var loop = function () {
			// Draw the image on location x 0, y 0 on the canvas. Target will be 320*240.
			try {
				canvasContext.drawImage(video, 0, 0, 320, 240);
			} catch (error) {
				console.log("Failed to obtain the image: " + error.message);
			}

			// Get the image data from location x 0, y 0, w 320, h 240
			var imageData = canvasContext.getImageData(0, 0, 320, 240);

			// Call our filter
			InvertFilter(imageData.data);

			// Put back the image data at location x 0, y 0
			canvasContext.putImageData(imageData, 0, 0);

			// Request a new frame from the video stream
			requestFrame(loop);
		}

		function InvertFilter(pixels) {
			for (var i = 0; i < pixels.length; i += 4) {
				// red
				pixels[i] = 255 - pixels[i];
				// green
				pixels[i + 1] = 255 - pixels[i + 1];
				// blue
				pixels[i + 2] = 255 - pixels[i + 2];
				// alpha
				pixels[i + 3] = pixels[i + 3];
			}
		}
	</script>
</body>
</html>
Camera invert demo HTML5

Camera invert demo HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *