Capturing an Image from a Camera with HTML5 and JavaScript

The JavaScript code below, when run, will display a real-time feed of the user’s default camera, and allow the user to click a button to capture a still image from that camera. To see it in action, copy it into an .html file, host that file within a web server, and open the corresponding URL in a web browser that runs JavaScript.

Note that the code, as written, will likely only run on web browsers based on the WebKit code library, such as Google Chrome. This is because the code makes use of the WebKit-specific “webkitGetUserMedia” function, as a generic implementation of “getUserMedia” that works in the same way in all browsers has not yet been decided on. It should also be noted that it might be a fairly trivial task to modify the code to work in other browsers.


<script type="text/javascript">

// main

function main()
	var sizeInPixels = new Coords(160, 120);
	var imageCapturer = new ImageCapturer(sizeInPixels);


// classes

function Coords(x, y)
	this.x = x;
	this.y = y;

function ImageCapturer(sizeInPixels)
	this.sizeInPixels = sizeInPixels;
	ImageCapturer.prototype.captureAndDisplayImage = function()
		var imageCaptured = this.captureImage();

	ImageCapturer.prototype.captureImage = function()
		return this.videoInput;

	ImageCapturer.prototype.displayImage = function(imageToDraw)
			0, 0, 
			this.sizeInPixels.x, this.sizeInPixels.y

	ImageCapturer.prototype.initialize = function()
		var divImageCapturer = document.createElement("div");

		var divInput = document.createElement("div");
		var videoInput = document.createElement("video");
		videoInput.width = this.sizeInPixels.x;
		videoInput.height = this.sizeInPixels.y;
		videoInput.autoplay = true;
		this.videoInput = videoInput;

		var divControls = document.createElement("div");
		var buttonCaptureImage = document.createElement("button");
		buttonCaptureImage.onclick = this.captureAndDisplayImage.bind(this);
		buttonCaptureImage.innerHTML = "Capture Image";

		var divOutput = document.createElement("div");
		var canvasOutput = document.createElement("canvas");
		canvasOutput.width = this.sizeInPixels.x;
		canvasOutput.height = this.sizeInPixels.y;
		divImageCapturer.appendChild(divOutput); = canvasOutput.getContext("2d");

		navigator.webkitGetUserMedia // for Google Chrome
			{ video: true },
			// success
				var streamAsObjectURL = window.URL.createObjectURL(stream);
				videoInput.src = streamAsObjectURL;;
			// error
				throw "An error has occurred.";



// run



This entry was posted in Uncategorized and tagged , , , , , . Bookmark the permalink.

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s