User Tools

Site Tools


script-photobooth

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

script-photobooth [2018/03/31 15:48] (current)
teq created
Line 1: Line 1:
 +====== Photo booth example ======
 +This example shows how to implement a simple HTML based photo booth.
  
 +Steps:
 +  - Download [[http://​jquery.com/​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.
 +
 +<code html>
 +<​!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>​
 +</​code>​
script-photobooth.txt ยท Last modified: 2018/03/31 15:48 by teq