コメントありがとうございます。 サービス終了した今なら、安く中古が手に入りそ…
ウェブカメラから3秒ごとに静止画を取得してみる
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);
};
検索
最近のコメント
最近の投稿
タグ
フィード配信
アーカイブ
外部リンク
コメントを残す