EleksHack/photobooth.html


<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Photobooth: Captures still photo. Displays on EleksTube IPS hack</title>
</head>
<body>
<div>
	<h1>Photobooth</h1>
	<p>Uses the browser <a href="https://developer.mozilla.org/docs/Web/API/WebRTC_API/Taking_still_photos" target="_blank">WebRTC API</a>
		to capture a still image from your laptop, tablet, or mobile phone camera.
		Slices the image into 6 JPEG images. Uploads and displays the images
		to the EleksTube IPS hack.</p>
	<div style="position:relative; height: 240px;">
		<div class="camera">
			<video id="video">Video stream not available.</video>
			<button id="startbutton">Take photo</button>
		</div>
		<div class="output0">
			<img id="photo0" alt="The screen capture appears in this box. 0">
		</div>
		<div class="output1">
			<img id="photo1" alt="The screen capture appears in this box. 1">
		</div>
		<div class="output2">
			<img id="photo2" alt="The screen capture appears in this box. 2">
		</div>
		<div class="output3">
			<img id="photo3" alt="The screen capture appears in this box. 3">
		</div>
		<div class="output4">
			<img id="photo4" alt="The screen capture appears in this box. 4">
		</div>
		<div class="output5">
			<img id="photo5" alt="The screen capture appears in this box. 5">
		</div>
	</div>
	<!-- Hidden -->
	<canvas id="canvas"></canvas>
	<canvas id="canvas0"></canvas>
	<canvas id="canvas1"></canvas>
	<canvas id="canvas2"></canvas>
	<canvas id="canvas3"></canvas>
	<canvas id="canvas4"></canvas>
	<canvas id="canvas5"></canvas>
</div>
<br><br>
<div style="position:relative; height: 240px;">
	<button id="uploadbutton">Upload images</button>&nbsp;&nbsp;&nbsp;
</div>

<style>
.camera {
  width: 340px;
  position: absolute;
}
.output0 {
  left: 360px;
	width: 135px;
	position: absolute;
}
.output1 {
  left: 515px;
	width: 135px;
	position: absolute;
}
.output2 {
  left: 670px;
	width: 135px;
	position: absolute;
}
.output3 {
  left: 825px;
	width: 135px;
	position: absolute;
}
.output4 {
  left: 980px;
	width: 135px;
	position: absolute;
}
.output5 {
  left: 1135px;
	width: 135px;
	position: absolute;
}
#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}
.sizehelper {
    position:absolute;
    background:rgba(0,0,128,0.50);
		top: 0px;
	  width: 320px;
	  height: 60px;
    text-align:center;
    padding:0px;
}
#photo0, #photo1, #photo2, #photo3, #photo4, #photo5 {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:135px;
  height:240px;
}
#startbutton {
  display:block;
	position:absolute;
	top: 0px;
	width: 320px;
	height: 60px;
	background:rgba(0,0,128,0.50);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, .50);
}
#canvas {
  display:none;
}
#canvas0 {
  display:none;
}
#canvas1 {
  display:none;
}
#canvas2 {
  display:none;
}
#canvas3 {
  display:none;
}
#canvas4 {
  display:none;
}
#canvas5 {
  display:none;
}
</style>
<script>
(function() {
  // The width and height of the captured photo. We will set the
  // width to the value defined here, but the height will be
  // calculated based on the aspect ratio of the input stream.

  var width = 135;    // We will scale the photo width to this
  var height = 240;     // This will be computed based on the input stream

  // |streaming| indicates whether or not we're currently streaming
  // video from the camera. Obviously, we start at false.

  var streaming = false;

	// Semaphor for uploading the 6 images
	var doneflag = false;

  // The various HTML elements we need to configure or control. These
  // will be set by the startup() function.

  var video = null;
	var canvas = null;
	var canvas0 = null;
	var canvas1 = null;
	var canvas2 = null;
	var canvas3 = null;
	var canvas4 = null;
	var canvas5 = null;
	var photo0 = null;
	var photo1 = null;
	var photo2 = null;
	var photo3 = null;
	var photo4 = null;
	var photo5 = null;
  var startbutton = null;
	var uploadbutton = null;


	// Handy utility to view the contents of the JPEG data in the console

	function hexdump(buffer, blockSize) {
	    blockSize = blockSize || 16;
	    var lines = [];
	    var hex = "0123456789ABCDEF";
	    for (var b = 0; b < buffer.length; b += blockSize) {
	        var block = buffer.slice(b, Math.min(b + blockSize, buffer.length));
	        var addr = ("0000" + b.toString(16)).slice(-4);
	        var codes = block.split('').map(function (ch) {
	            var code = ch.charCodeAt(0);
	            return " " + hex[(0xF0 & code) >> 4] + hex[0x0F & code];
	        }).join("");
	        codes += "   ".repeat(blockSize - block.length);
	        var chars = block.replace(/[\x00-\x1F\x20]/g, '.');
	        chars +=  " ".repeat(blockSize - block.length);
	        lines.push(addr + " " + codes + "  " + chars);
	    }
	    return lines.join("\n");
	}

  function startup() {
    video = document.getElementById('video');
		canvas = document.getElementById('canvas');
		canvas0 = document.getElementById('canvas0');
		canvas1 = document.getElementById('canvas1');
		canvas2 = document.getElementById('canvas2');
		canvas3 = document.getElementById('canvas3');
		canvas4 = document.getElementById('canvas4');
		canvas5 = document.getElementById('canvas5');
		photo0 = document.getElementById('photo0');
		photo1 = document.getElementById('photo1');
		photo2 = document.getElementById('photo2');
		photo3 = document.getElementById('photo3');
		photo4 = document.getElementById('photo4');
		photo5 = document.getElementById('photo5');
		startbutton = document.getElementById('startbutton');
		uploadbutton = document.getElementById('uploadbutton');
		debugbutton = document.getElementById('debugbutton');

		navigator.mediaDevices.getUserMedia({video: true})
		.then(function(stream) {
	        video.srcObject = stream;
	        video.play();
		})
		.catch(function(err) {
		  console.log("An error occured! " + err);
		});

    video.addEventListener('canplay', function(ev){
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth/width);

        // Firefox currently has a bug where the height can't be read from
        // the video, so we will make assumptions if this happens.

        if (isNaN(height)) {
          height = width / (4/3);
        }

        video.setAttribute('width', width);
        video.setAttribute('height', height);
				canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);

				canvas0.setAttribute('width', width);
        canvas0.setAttribute('height', height);
				canvas1.setAttribute('width', width);
        canvas1.setAttribute('height', height);
				canvas2.setAttribute('width', width);
        canvas2.setAttribute('height', height);
				canvas3.setAttribute('width', width);
        canvas3.setAttribute('height', height);
				canvas4.setAttribute('width', width);
        canvas4.setAttribute('height', height);
				canvas5.setAttribute('width', width);
        canvas5.setAttribute('height', height);
        streaming = true;
      }
    }, false);

    startbutton.addEventListener('click', function(ev){
      takepicture();
      ev.preventDefault();
    }, false);

		uploadbutton.addEventListener('click', function(ev){
      uploadimages();
      ev.preventDefault();
    }, false);

    clearphoto();
  }

  // Fill the photo with an indication that none has been
  // captured.

  function clearphoto() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL("image/png");
		photo0.setAttribute('src', data);
		photo1.setAttribute('src', data);
		photo2.setAttribute('src', data);
		photo3.setAttribute('src', data);
		photo4.setAttribute('src', data);
		photo5.setAttribute('src', data);
  }

  // Capture a photo by fetching the current contents of the video
  // and drawing it into a canvas, then converting that to a PNG
  // format data URL. By drawing it on an offscreen canvas and then
  // drawing that to the screen, we can change its size and/or apply
  // other changes before drawing it.

  function takepicture() {

		if (width && height) {

 			var mywide = video.videoWidth;
			mywide = mywide / 6;

			canvas.width = 135;
			canvas.height = 240;

			canvas0.width = 135;
			canvas0.height = 240;
			canvas1.width = 135;
			canvas1.height = 240;
			canvas2.width = 135;
			canvas2.height = 240;
			canvas3.width = 135;
			canvas3.height = 240;
			canvas4.width = 135;
			canvas4.height = 240;
			canvas5.width = 135;
			canvas5.height = 240;

			canvas.getContext('2d').drawImage(video,0*mywide,0,mywide,height,0,0,135,240);
			photo0.setAttribute('src', canvas.toDataURL('image/jpeg', 1.0) );
			canvas0.getContext('2d').drawImage(video,0*mywide,0,mywide,height,0,0,135,240);

			canvas.getContext('2d').drawImage(video,1*mywide,0,mywide,height,0,0,135,240);
			photo1.setAttribute('src', canvas.toDataURL('image/jpeg', 1.0) );
			canvas1.getContext('2d').drawImage(video,1*mywide,0,mywide,height,0,0,135,240);

			canvas.getContext('2d').drawImage(video,2*mywide,0,mywide,height,0,0,135,240);
			photo2.setAttribute('src', canvas.toDataURL('image/jpeg', 1.0) );
			canvas2.getContext('2d').drawImage(video,2*mywide,0,mywide,height,0,0,135,240);

			canvas.getContext('2d').drawImage(video,3*mywide,0,mywide,height,0,0,135,240);
			photo3.setAttribute('src', canvas.toDataURL('image/jpeg', 1.0) );
			canvas3.getContext('2d').drawImage(video,3*mywide,0,mywide,height,0,0,135,240);

			canvas.getContext('2d').drawImage(video,4*mywide,0,mywide,height,0,0,135,240);
			photo4.setAttribute('src', canvas.toDataURL('image/jpeg', 1.0) );
			canvas4.getContext('2d').drawImage(video,4*mywide,0,mywide,height,0,0,135,240);

			canvas.getContext('2d').drawImage(video,5*mywide,0,mywide,height,0,0,135,240);
			photo5.setAttribute('src', canvas.toDataURL('image/jpeg', 1.0) );
			canvas5.getContext('2d').drawImage(video,5*mywide,0,mywide,height,0,0,135,240);

		} else {
			clearphoto();
		}
  }

	function uploadimages() {
		uploadslice( canvas0, 5, 0 );
	}

	function uploadslice( dacanvas, disnum, slicenum ) {
		doneflag = false;

		var base64jpg = dacanvas.toDataURL("image/jpeg", 1.0);
		var dataURL = base64jpg.replace(/\s/g, '+').replace(/^data:image\/jpeg;base64,/, '');

		var oAjaxReq = new XMLHttpRequest();
    oAjaxReq.submittedData = dataURL;

		oAjaxReq.onload = function (oEvent)
		{
			 var httprq = new XMLHttpRequest();
	     httprq.onreadystatechange = function() {
	         if (httprq.readyState == 4 && httprq.status == 200)
						 console.log("0");
			 }

	     httprq.open("GET", "https://192.168.1.1/showslice?filename=/slice" + slicenum + ".jpg&display=" + disnum, true); // true for asynchronou
	     httprq.send(null);

			 console.log( "slicenum = " + slicenum );

			 if ( slicenum == 0 )
			 {
		 		uploadslice( canvas1, 4, 1 );
			 }
			 if ( slicenum == 1 )
			 {
		 		uploadslice( canvas2, 3, 2 );
			 }
			 if ( slicenum == 2 )
			 {
		 		uploadslice( canvas3, 2, 3 );
			 }
			 if ( slicenum == 3 )
			 {
		 		uploadslice( canvas4, 1, 4 );
			 }
			 if ( slicenum == 4 )
			 {
		 		uploadslice( canvas5, 0, 5 );
			 }
		}

		oAjaxReq.open("post", "upload", true);
		oAjaxReq.setRequestHeader("Decode64", "true" );

		var bound = Date.now().toString(16);
		var sBoundary = "----WebKitFormBoundary" + bound;

		oAjaxReq.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + sBoundary );

		var mydata = "--" + sBoundary + "\r\n";

		mydata += "Content-Disposition: form-data; name=\"name\"; filename=\"" + "slice" + slicenum + ".jpg" + "\"\r\n";
		mydata += "Content-Type: image/png";
		mydata += "\r\n";
		mydata += "\r\n";

		mydata += dataURL;

		mydata += "\r\n";

		mydata += "--" + sBoundary + "--";
		mydata += "\r\n";

		oAjaxReq.send( mydata );
	}

  // Set up our event listener to run the startup process
  // once loading is complete.
  window.addEventListener('load', startup, false);
})();
</script>
</body>
</html>