Skip to content
jQuery plugin to interact with a users webcam using only javascript.
Branch: master
Clone or download
Latest commit 8977c8e Jul 17, 2012
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Create userCam plugin and v.simple demo Jul 17, 2012
js Create userCam plugin and v.simple demo Jul 17, 2012
README.md Update README.md Jul 17, 2012
index.html Create userCam plugin and v.simple demo Jul 17, 2012

README.md

userCam

jQuery Webcam Plugin

Uses the "working draft" of the getUserMedia/Stream API to stream a users webcam to a <video> element.

Demo

You can checkout a simple demo here: userCam example.

Usage

This should work with most jQuery versions however it has only been tested with 1.7.2.

Include the (minified) script in your HTML document

<script src="js/jquery.userCam.min.js"></script>

Then call it on a container element

<div class="webcam-container"></div>

<script>
	$('.webcam-container').userCam();
</script>

Documentation

userCam can be called with a few additional parameters as follows:

<script>
	$('.webcam-container').userCam({
		start: function (event, video) { },
		errror: function (message) {
			console.log(message);
		}
	});
</script>

Parameters

Option Type When executed?
start function When the webcam starts stream to the video element
error function An error occurs

Methods

You can access the userCam methods by accessing the container element data('userCam'), as follows:

<script>
	var webcamContainer = $('.webcamContainer');
	webcamContainer.userCam({
		start: function (event, video) { },
		errror: function (message) {
			console.log(message);
		}
	}); 
	
	// Will take a still image from the stream, you could set
	// this as an img src="" attribute or send it to a server-side 
	// script for storage.
	var pngDataUri = webcamContainer.data('userCam').getStill();
</script>

Browser Support

You can view the current browser support here

You can’t perform that action at this time.