User Tools

Site Tools


script-photobooth

Photo booth example

This example shows how to implement a simple HTML based photo booth.

Steps:

  1. Download jQuery (do not link to a CDN because the Wifi is connected to the camera).
  2. Copy the HTML script below into a html file (for instance “photobooth.html”).
  3. Open the html file in your favorite webbrowser.
  4. Start the Command Server in the Camera Controller application.
  5. Switch the camera to “Photo” mode.
  6. Press the “Capture” button in the webbrowser.

Notes: This is a very simple example. In a real world project you should also consider the following points:

  • Error checking (camera connected, capturing failures, etc.).
  • Switch to photo mode in the script.
  • Improve the HTML layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<title>Camera Controller Photo Booth Example</title>
<!-- http://www.tequnique.com/cameracontroller -->
</head>
 
<script>
function captureImage() {
	var formdata = new FormData();
	formdata.append("script", $('textarea#script').val());
 
	$.ajax({
		url: "http://localhost:2000?wait=true",
		type: "POST",
		data: formdata,
		processData: false,
		contentType: false,
		success: function (res) {
			var result = res["result"];
			for (var i=0; i<result.length; ++i) {
				if (result[i].startsWith("http")) {
					$("#last_image").attr("src", result[i]);
				}
			}
		},
		error: function() {
		},
		complete: function(res) {
		}
	});
}
</script>
 
<textarea name="script" id="script" style="display:none;">
// Basic example without error checking!
var connectResult = connectToCamera();
var cameraName = connectResult.message;
var result = startRecording(cameraName);
waitMilliseconds(2000);
var mediaList = getMediaList(cameraName, true);
if (mediaList.length > 0) {
    logMessage(mediaList[0].downloadUrl);
}
</textarea>
<input name="" type="button" onclick="captureImage()" value="Capture"/>
<br/>
<img id="last_image" src=""/ height="480px" width="auto">
<body>
</body>
</html>
script-photobooth.txt · Last modified: 2018/03/31 15:48 by teq