Przechwyt obrazu z kamerki internetowej za pomocą jpegcam

Integrujemy z Django widżet jpegcam umożliwiający przechwyt i zapisywanie zdjęć z kamerek internetowych użytkowników.

jpegcam to prosty widżet Flash/JavaScript do przechwytywania obrazu z kamerki internetowej. Pozwala on na zapisanie i wysłanie pojedynczej klatki do serwera (np. zrobienie i zapisanie zdjęcia użytkownika).

Widżet wyświetla flashowy player pokazujący obraz z kamerki oraz zintegrowane przyciski z podpiętymi akcjami JavaScript do zapisu pojedynczej klatki. Zdjęcie zostanie wysłane poprzez POST (tryb raw) na wskazany w konfiguracji adres URL.

  • Pobieramy najnowszą wersję widżetu. Z katalogu htdocs paczki do SITE MEDIA projektu Django przenosimy trzy pliki: shutter.mp3, webcam.js, webcam.swf
  • Edytuj webcam.js i ustaw ścieżki do swf_url i shutter_url, np:
    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
    
    W okolicy linii 166 podaj ścieżkę do shutter.mp3 (w nowszych wersjach może to być już zmienione/poprawione):
    this.shutter_url = url ? url : '/site_media/jpegcam/shutter.mp3';
    
  • Tworzymy testowy widok prezentujący możliwości widżetu. W najprostszym przypadku będzie to zwykły szablon bazujący na przykładzie z paczki jpegcam:
    <!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>
    
  • W powyższym szablonie w porównaniu do oryginału zmieniłem ścieżkę do pliku webcam.js oraz podałem adres URL odbierający zdjęcie z kamerki:
    webcam.set_api_url( '/user/save_image/' );
    
    Pod adres /user/save_image/ muszę podpiąć widok odbierający i zapisujący grafikę, która wysyłana jest poprzez POST.
  • Kod widoku wygląda tak:
    from django.views.decorators.csrf import csrf_exempt
    
    @csrf_exempt
    def save_image(request):
    	if request.POST:
    		# zapisujemy gdzieś w media
    		f = open(settings.MEDIA_ROOT + '/webcamimages/someimage.jpg', 'wb')
    		f.write(request.raw_post_data)
    		f.close()
    		# zwracamy adres URL do grafiki
    		return HttpResponse('http://localhost:8080/site_media/webcamimages/someimage.jpg')
    	else:
    		return HttpResponse('no data')
    
  • W efekcie powinniśmy otrzymać działający komponent - widok z flashowym widżetem wyświetlającym obraz z kamerki oraz widok zapisujący wysłane klatki-zdjęcia.
jpegcamdjango1

Na Wiki projektu znajdziemy też przykład prezentujący wykorzystania formularza modelu do zapisu i walidacji grafiki (np. dla profilu danego użytkownika).

blog comments powered by Disqus

Kategorie

Strony