quadrochave/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
 <div class="floatWindow"></div>
<script id="jsbin-javascript">
function introMenu() {

 var startCamHtml ='<button id="startCam">Jogo</button>' ;
 var cameraHtml = '<video id="camera" autoplay></video>';
 var snapshotCanvasHtml = '<button id="capture">captura</button>';
 var captureButtonHtml ='<canvas id="snapshot" width=320 height=240></canvas>';


 $("body").append(startCamHtml);

  startCam.onclick = function() {
   var startCam = document.getElementById('startCam');
   $(".floatWindow")
    .append(cameraHtml)
    .append(snapshotCanvasHtml)
    .append(captureButtonHtml);
   captureFromCam();
 }

}

function captureFromCam() {

  var camera = document.getElementById('camera');
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');

  var handleSuccess = function(stream) {
    // Attach the video stream to the video element and autoplay.
    camera.srcObject = stream;
  };

  captureButton.onclick = function() {
    var context = snapshot.getContext('2d');
    // Draw the video frame to the canvas.
    context.drawImage(camera, 0, 0, snapshotCanvas.width,
        snapshotCanvas.height);
  };

  navigator.mediaDevices.getUserMedia({video: true})
      .then(handleSuccess);

 }
introMenu();
</script>


<script id="jsbin-source-javascript" type="text/javascript">function introMenu() {

 var startCamHtml ='<button id="startCam">Jogo</button>' ;
 var cameraHtml = '<video id="camera" autoplay></video>';
 var snapshotCanvasHtml = '<button id="capture">captura</button>';
 var captureButtonHtml ='<canvas id="snapshot" width=320 height=240></canvas>';


 $("body").append(startCamHtml);

  startCam.onclick = function() {
   var startCam = document.getElementById('startCam');
   $(".floatWindow")
    .append(cameraHtml)
    .append(snapshotCanvasHtml)
    .append(captureButtonHtml);
   captureFromCam();
 }

}

function captureFromCam() {

  var camera = document.getElementById('camera');
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');

  var handleSuccess = function(stream) {
    // Attach the video stream to the video element and autoplay.
    camera.srcObject = stream;
  };

  captureButton.onclick = function() {
    var context = snapshot.getContext('2d');
    // Draw the video frame to the canvas.
    context.drawImage(camera, 0, 0, snapshotCanvas.width,
        snapshotCanvas.height);
  };

  navigator.mediaDevices.getUserMedia({video: true})
      .then(handleSuccess);

 }
introMenu();</script></body>
</html>

## jsbin.risihos.js
function introMenu() {

 var startCamHtml ='<button id="startCam">Jogo</button>' ;
 var cameraHtml = '<video id="camera" autoplay></video>';
 var snapshotCanvasHtml = '<button id="capture">captura</button>';
 var captureButtonHtml ='<canvas id="snapshot" width=320 height=240></canvas>';


 $("body").append(startCamHtml);

  startCam.onclick = function() {
   var startCam = document.getElementById('startCam');
   $(".floatWindow")
    .append(cameraHtml)
    .append(snapshotCanvasHtml)
    .append(captureButtonHtml);
   captureFromCam();
 }

}

function captureFromCam() {

  var camera = document.getElementById('camera');
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');

  var handleSuccess = function(stream) {
    // Attach the video stream to the video element and autoplay.
    camera.srcObject = stream;
  };

  captureButton.onclick = function() {
    var context = snapshot.getContext('2d');
    // Draw the video frame to the canvas.
    context.drawImage(camera, 0, 0, snapshotCanvas.width,
        snapshotCanvas.height);
  };

  navigator.mediaDevices.getUserMedia({video: true})
      .then(handleSuccess);

 }
introMenu();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	</head>
	<body>
	<div class="floatWindow"></div>
	<script id="jsbin-javascript">
	function introMenu() {

	var startCamHtml ='<button id="startCam">Jogo</button>' ;
	var cameraHtml = '<video id="camera" autoplay></video>';
	var snapshotCanvasHtml = '<button id="capture">captura</button>';
	var captureButtonHtml ='<canvas id="snapshot" width=320 height=240></canvas>';


	$("body").append(startCamHtml);

	startCam.onclick = function() {
	var startCam = document.getElementById('startCam');
	$(".floatWindow")
	.append(cameraHtml)
	.append(snapshotCanvasHtml)
	.append(captureButtonHtml);
	captureFromCam();
	}

	}

	function captureFromCam() {

	var camera = document.getElementById('camera');
	var snapshotCanvas = document.getElementById('snapshot');
	var captureButton = document.getElementById('capture');

	var handleSuccess = function(stream) {
	// Attach the video stream to the video element and autoplay.
	camera.srcObject = stream;
	};

	captureButton.onclick = function() {
	var context = snapshot.getContext('2d');
	// Draw the video frame to the canvas.
	context.drawImage(camera, 0, 0, snapshotCanvas.width,
	snapshotCanvas.height);
	};

	navigator.mediaDevices.getUserMedia({video: true})
	.then(handleSuccess);

	}
	introMenu();
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">function introMenu() {

	var startCamHtml ='<button id="startCam">Jogo</button>' ;
	var cameraHtml = '<video id="camera" autoplay></video>';
	var snapshotCanvasHtml = '<button id="capture">captura</button>';
	var captureButtonHtml ='<canvas id="snapshot" width=320 height=240></canvas>';


	$("body").append(startCamHtml);

	startCam.onclick = function() {
	var startCam = document.getElementById('startCam');
	$(".floatWindow")
	.append(cameraHtml)
	.append(snapshotCanvasHtml)
	.append(captureButtonHtml);
	captureFromCam();
	}

	}

	function captureFromCam() {

	var camera = document.getElementById('camera');
	var snapshotCanvas = document.getElementById('snapshot');
	var captureButton = document.getElementById('capture');

	var handleSuccess = function(stream) {
	// Attach the video stream to the video element and autoplay.
	camera.srcObject = stream;
	};

	captureButton.onclick = function() {
	var context = snapshot.getContext('2d');
	// Draw the video frame to the canvas.
	context.drawImage(camera, 0, 0, snapshotCanvas.width,
	snapshotCanvas.height);
	};

	navigator.mediaDevices.getUserMedia({video: true})
	.then(handleSuccess);

	}
	introMenu();</script></body>
	</html>