js 呼叫攝像頭拍照
阿新 • • 發佈：2018-11-29
本文主要介紹，js+canvas+video ，呼叫本地攝像頭，實現拍照效果，程式碼如下，供大家參考學習
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <video width="200px" id="video" height="150px"></video> <canvas width="200px" id="canvas" height="150px"></canvas> <p> <button id="start">開啟攝像頭</button> <button id="snap">擷取影象</button> <button id="close">關閉攝像頭</button> </p> </body> <script> // 宣告變數 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), video = document.getElementById("video"), snap = document.getElementById("snap"), close = document.getElementById("close"), start = document.getElementById("start"), MediaStreamTrack; // 點選開啟攝像頭 start.addEventListener('click', function () { if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true, // audio: true }).then(function (stream) { console.log(stream); MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1]; video.src=(window.URL).createObjectURL(stream); video.play(); }).catch(function(err){ console.log(err); }); }else if(navigator.getMedia){ navigator.getMedia({ video: true }).then(function (stream) { console.log(stream); MediaStreamTrack=stream.getTracks()[1]; video.src=(window.webkitURL).createObjectURL(stream); video.play(); }).catch(function(err){ console.log(err); }); } }); // 截圖 snap.addEventListener('click', function () { context.drawImage(video, 0, 0,200,150); }); // 關閉按鈕 close.addEventListener('click', function () { MediaStreamTrack && MediaStreamTrack.stop(); }); </script> </html>