ワイズリマインダー

ウェブカメラから3秒ごとに静止画を取得してみる

DEMO

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>camera shut</title>
<script src="index.js"></script>
<body>
<video id="myVideo" width="400" height="300" autoplay="1"></video>
<hr>
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>

index.js

window.onload = function(){
  if(navigator.mediaDevices === undefined) navigator.mediaDevices = {};
  if(navigator.mediaDevices.getUserMedia === undefined){
    navigator.mediaDevices.getUserMedia = function(constraints){
      var getUserMedia = (navigator.webkitGetUserMedia
                       || navigator.mozGetUserMedia
                       || navigator.msGetUserMedia
                       || navigator.getUserMedia);
      if(!getUserMedia) return Promise.reject(new Error('非対応ブラウザ'));
      return new Promise(function(resolve, reject){
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    };
  };

  navigator.mediaDevices.getUserMedia({ audio: false, video: true })
  .then(function(stream){
    var video = document.getElementById('myVideo');
    if("srcObject" in video) video.srcObject = stream;
    else video.src = window.URL.createObjectURL(stream);
    video.onloadedmetadata = function(e){
      video.play();
      setInterval("capture()", 3000);
    };
  })
  .catch(function(err){ console.log(err.name + ": " + err.message); });
};

function capture(){
  var video = document.getElementById('myVideo');
  var canvas = document.getElementById('myCanvas');
  var ctx    = canvas.getContext('2d');
  var width  = video.offsetWidth;
  var height = video.offsetHeight;
  canvas.setAttribute('width' , width);
  canvas.setAttribute('height', height);
  ctx.drawImage(video, 0, 0, width, height);
};

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください