Html5呼叫本地攝像頭
阿新 • • 發佈：2018-12-05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #canvas,#video { float: left; margin-right: 10px; background: #fff; } .box { overflow: hidden; margin-bottom: 10px; } </style> </head> <body> <div class="box"> <video id="video" width="400" height="300"></video> <canvas id="canvas"></canvas> </div> <button id="live">直播</button> <button id="snap">截圖</button> <script> var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var width = video.width; var height = video.height; canvas.width = width; canvas.height = height; function liveVideo(){ var URL = window.URL || window.webkitURL; // 獲取到window.URL物件 navigator.getUserMedia({ video: true }, function(stream){ video.src = URL.createObjectURL(stream); // 將獲取到的視訊流物件轉換為地址 video.play(); // 播放 //點選截圖 document.getElementById("snap").addEventListener('click', function() { ctx.drawImage(video, 0, 0, width, height); var url = canvas.toDataURL('image/png'); document.getElementById('download').href = url; }); }, function(error){ console.log(error.name || error); }); } document.getElementById("live").addEventListener('click',function(){ liveVideo(); }); </script> </body> </html>
測試google瀏覽器:
