Capturing images from a webcam in Django with jpegcam

17 October 2010 Comments

jpegcam is an interesting Flash/JavaScript component for capturing and saving images from user webcams. It can be used for example to allow users to make a picture of themselves as avatars.

Widget features a flash "player" that shows live view from the webcam and buttons with attached JavaScript functions that can capture and send an image to the server in raw POST mode.

Download the latest version and extract it. From the htdocs folder move 3 files somewhere to your SITE MEDIA: shutter.mp3, webcam.js, webcam.swf

Edit webcam.js and set paths for swf_url and shutter_url. In my example:

swf_url: '/site_media/jpegcam/webcam.swf', // URI to webcam.swf movie (defaults to cwd)
	shutter_url: '/site_media/jpegcam/shutter.mp3', // URI to shutter.mp3 sound

Around line 166 set a path to shutter.mp3 (it may be changed/fixed in future version):

this.shutter_url = url ? url : '/site_media/jpegcam/shutter.mp3';

Now we can create an example view featuring the jpegcam widget. Here is slightly modded template from the example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>JPEGCam Test Page</title>
</head>
<body>
	<table><tr><td valign=top>
	<h1>JPEGCam Test Page</h1>
	
	<!-- First, include the JPEGCam JavaScript Library -->
	<script type="text/javascript" src="/site_media/jpegcam/webcam.js"></script>
	
	<!-- Configure a few settings -->
	<script language="JavaScript">
		webcam.set_api_url( '/user/save_image/' );
		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
		webcam.set_shutter_sound( true ); // play shutter click sound
	</script>
	
	<!-- Next, write the movie to the page at 320x240 -->
	<script language="JavaScript">
		document.write( webcam.get_html(320, 240) );
	</script>
	
	<!-- Some buttons for controlling things -->
	<br/><form>
		<input type=button value="Configure..." onClick="webcam.configure()">
		&nbsp;&nbsp;
		<input type=button value="Take Snapshot" onClick="take_snapshot()">
	</form>
	
	<!-- Code to handle the server response (see test.php) -->
	<script language="JavaScript">
		webcam.set_hook( 'onComplete', 'my_completion_handler' );
		
		function take_snapshot() {
			// take snapshot and upload to server
			document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
			webcam.snap();
		}
		
		function my_completion_handler(msg) {
			if (msg.match(/(http\:\/\/\S+)/)) {
				var image_url = RegExp.$1;
				// show JPEG image in page
				document.getElementById('upload_results').innerHTML = 
					'<h1>Upload Successful!</h1>' + 
					'<h3>JPEG URL: ' + image_url + '</h3>' + 
					'<img src="' + image_url + '">';
				
				// reset camera for another shot
				webcam.reset();
			}
			else alert("Python Error: " + msg);
		}
	</script>
	
	</td><td width=50>&nbsp;</td><td valign=top>
		<div id="upload_results" style="background-color:#eee;"></div>
	</td></tr></table>
</body>
</html>

In the template I've changed the path to webcam.js file and changed the URL that receives send images:
```
webcam.set_api_url( '/user/save_image/' );
```
Under /user/save_image/ I have add a view that will save the images.

Code for the saving view looks like this:

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def save_image(request):
	if request.POST:
		# save it somewhere
		f = open(settings.MEDIA_ROOT + '/webcamimages/someimage.jpg', 'wb')
		f.write(request.raw_post_data)
		f.close()
		# return the URL
		return HttpResponse('http://localhost:8080/site_media/webcamimages/someimage.jpg')
	else:
		return HttpResponse('no data')

That should result in nicely working widget that shows the image from webcam and saves it on the server.

On the wiki there is also an example how to use jpegcam with a model based form (save and validate!). The model must exist and must have ImageField field.

RkBlog

Django web framework tutorials, 17 October 2010