This example shows how to implement a simple HTML based photo booth.
Steps:
Notes: This is a very simple example. In a real world project you should also consider the following points:
<!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>