HTML5 Canvas JS はコンピュータまたは携帯電話のカメラを制御します。instance_html5 チュートリアルのスキル

写真をスナップ

// イベントリスナーを配置します
window.addEventListener("DOMContentLoaded", function() {
// 要素の取得、設定の作成など
var Canvas = document.getElementById("canvas"),
context = Canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "ビデオ": true },
errBack = 関数(エラー) {
console.log("ビデオ キャプチャ エラー: ", error.code); };
// ビデオ リスナーを配置します
if(navigator.getUserMedia) { // 標準
navigator.getUserMedia(videoObj, function(stream) {
video.src = ストリーム;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit プレフィックス付き
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox プレフィックス付き
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

//写真アクションをトリガー
document.getElementById("スナップ")
.addEventListener("クリック", function() {
context.drawImage(ビデオ, 0, 0, 640, 480);
});