コメントありがとうございます。 サービス終了した今なら、安く中古が手に入りそ…
ウェブカメラから3秒ごとに静止画を取得してみる
index.html
1 2 3 4 5 6 7 8 9 10 11 12 | <! 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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); }; |
検索
コメントを残す