Photo booth example

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

Steps:

Download jQuery (do not link to a CDN because the Wifi is connected to the camera).
Copy the HTML script below into a html file (for instance “photobooth.html”).
Open the html file in your favorite webbrowser.
Start the Command Server in the Camera Controller application.
Switch the camera to “Photo” mode.
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>

Camera Controller

Sidebar

General

Platform notes

Tools

Example scripts

Photo booth example

Camera Controller

User Tools

Site Tools

Sidebar

General

Platform notes

Tools

Example scripts

Photo booth example

Page Tools