HTML调用PC摄像头【申明：来源于网络】
生活随笔
收集整理的這篇文章主要介紹了
HTML调用PC摄像头【申明：来源于网络】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML調用PC攝像頭【申明：來源于網絡】 ———- 地址：http://www.oschina.net/code/snippet_2440934_55195
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>HTML5調用電腦攝像頭實例</title><script type="text/javascript"> window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard //alert("支持navigator.getUserMedia");navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed //alert("支持navigator.webkitGetUserMedia");navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Firefox-prefixed //alert("支持navigator.mozGetUserMedia");navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // 觸發拍照動作 document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); </script> </head> <body><video id="video" width="640" height="480" autoplay></video><br><button id="snap" >點擊拍照</button> <br><canvas id="canvas" width="640" height="480"></canvas> </body> </html>
總結
以上是生活随笔為你收集整理的HTML调用PC摄像头【申明：来源于网络】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 放大镜插件
- 下一篇： 索尼x8 android,高性价比索尼爱