pyk · January 7, 2017 16:42 · Abduoit · Aug 12, 2017 · mosquito077 · Jan 8, 2018
diff --git a/capture.js b/capture.js
 (function() {

  var width = 320; 
  var height = 0;
  var streaming = false;

  var video = null;
  var canvas = null;
  var photo = null;
  var startbutton = null;
  var stopbutton = null;
  var output = null;
  var images = "";
  // Timer id
  var timerID = 0;

  function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    // photo = document.getElementById('photo');
    output = document.getElementById('output');
    startbutton = document.getElementById('startbutton');
    stopbutton = document.getElementById('stopbutton');

    navigator.getMedia = ( navigator.getUserMedia ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia ||
                           navigator.msGetUserMedia);

    navigator.getMedia(
      {
        video: true,
        audio: false
      },
      function(stream) {
        if (navigator.mozGetUserMedia) {
          video.mozSrcObject = stream;
        } else {
          var vendorURL = window.URL || window.webkitURL;
          video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
      },
      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);
        streaming = true;
      }
    }, false);

    startbutton.addEventListener('click', function(ev){
      // takepicture();
      // setTimeout(takepicture, 5000);
      startbutton.className = "hidebutton";
      stopbutton.removeAttribute("class")
      timerID = window.setInterval(takepicture, 250);
      ev.preventDefault();
    }, false);

    stopbutton.addEventListener('click', function(ev){
      // takepicture();
      // setTimeout(takepicture, 5000);
      stopbutton.className = "hidebutton";
      startbutton.removeAttribute("class");
      window.clearInterval(timerID);
      output.innerHTML += images;
      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');
    // photo.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() {
    var context = canvas.getContext('2d');

    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.scale(-1,1);
      context.translate(-width, 0);
      context.drawImage(video, 0, 0, width, height);
    
      var data = canvas.toDataURL('image/png');
      // photo.setAttribute('src', data);
      images += '<img src=' + data +'>';
    } else {
      clearphoto();
    }
  }

  // Set up our event listener to run the startup process
  // once loading is complete.
  window.addEventListener('load', startup, false);
 })();
diff --git a/index.html b/index.html
 <!-- https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill -->
 <!doctype html>
 <html>
 <head>
    <title>Training data</title>
    <meta charset='utf-8'>
    <link rel="stylesheet" href="main.css" type="text/css" media="all">
    <script src="capture.js">
    </script>
 </head>
 <body>
  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Start burst</button> 
    <button id="stopbutton" class="hidebutton">Stop burst</button> 
  </div>
  <canvas id="canvas">
  </canvas>
  <div id="output">
    <!-- <img id="photo" alt="The screen capture will appear in this box.">  -->
  </div>
 </body>
diff --git a/main.css b/main.css
 #video {
  width:320px;
  height:240px;
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
 }

 #photo {
  width:320px;
  height:240px;
 }

 #canvas {
  display:none;
 }

 .camera {
  width: 340px;
  margin: auto;
  text-align: center;
 }

 #output {
  width: 1020px;
  margin: auto;
 }

 #output > img {
    margin: 10px;
 }

 #startbutton, #stopbutton {
  margin-left:auto;
  margin-right:auto;
 }

 .hidebutton {
    display: none;
    width: 0px;
    height: 0px;
 }
	(function() {

	var width = 320;
	var height = 0;
	var streaming = false;

	var video = null;
	var canvas = null;
	var photo = null;
	var startbutton = null;
	var stopbutton = null;
	var output = null;
	var images = "";
	// Timer id
	var timerID = 0;

	function startup() {
	video = document.getElementById('video');
	canvas = document.getElementById('canvas');
	// photo = document.getElementById('photo');
	output = document.getElementById('output');
	startbutton = document.getElementById('startbutton');
	stopbutton = document.getElementById('stopbutton');

	navigator.getMedia = ( navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\|
	navigator.msGetUserMedia);

	navigator.getMedia(
	{
	video: true,
	audio: false
	},
	function(stream) {
	if (navigator.mozGetUserMedia) {
	video.mozSrcObject = stream;
	} else {
	var vendorURL = window.URL \|\| window.webkitURL;
	video.src = vendorURL.createObjectURL(stream);
	}
	video.play();
	},
	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);
	streaming = true;
	}
	}, false);

	startbutton.addEventListener('click', function(ev){
	// takepicture();
	// setTimeout(takepicture, 5000);
	startbutton.className = "hidebutton";
	stopbutton.removeAttribute("class")
	timerID = window.setInterval(takepicture, 250);
	ev.preventDefault();
	}, false);

	stopbutton.addEventListener('click', function(ev){
	// takepicture();
	// setTimeout(takepicture, 5000);
	stopbutton.className = "hidebutton";
	startbutton.removeAttribute("class");
	window.clearInterval(timerID);
	output.innerHTML += images;
	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');
	// photo.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() {
	var context = canvas.getContext('2d');

	if (width && height) {
	canvas.width = width;
	canvas.height = height;
	context.scale(-1,1);
	context.translate(-width, 0);
	context.drawImage(video, 0, 0, width, height);

	var data = canvas.toDataURL('image/png');
	// photo.setAttribute('src', data);
	images += '<img src=' + data +'>';
	} else {
	clearphoto();
	}
	}

	// Set up our event listener to run the startup process
	// once loading is complete.
	window.addEventListener('load', startup, false);
	})();
	<!-- https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill -->
	<!doctype html>
	<html>
	<head>
	<title>Training data</title>
	<meta charset='utf-8'>
	<link rel="stylesheet" href="main.css" type="text/css" media="all">
	<script src="capture.js">
	</script>
	</head>
	<body>
	<div class="camera">
	<video id="video">Video stream not available.</video>
	<button id="startbutton">Start burst</button>
	<button id="stopbutton" class="hidebutton">Stop burst</button>
	</div>
	<canvas id="canvas">
	</canvas>
	<div id="output">
	<!-- <img id="photo" alt="The screen capture will appear in this box."> -->
	</div>
	</body>
	#video {
	width:320px;
	height:240px;
	transform: rotateY(180deg);
	-webkit-transform:rotateY(180deg); /* Safari and Chrome */
	-moz-transform:rotateY(180deg); /* Firefox */
	}

	#photo {
	width:320px;
	height:240px;
	}

	#canvas {
	display:none;
	}

	.camera {
	width: 340px;
	margin: auto;
	text-align: center;
	}

	#output {
	width: 1020px;
	margin: auto;
	}

	#output > img {
	margin: 10px;
	}

	#startbutton, #stopbutton {
	margin-left:auto;
	margin-right:auto;
	}

	.hidebutton {
	display: none;
	width: 0px;
	height: 0px;
	}