調用本地攝像頭並通過canvas拍照

首先我們需要新建一個video標簽，並且放到html里邊

var video = document.createElement("video");
video.autoplay="autoplay";

document.body.appendChild(video);

 利用navigator對象

 navigator.mediaDevices.getUserMedia({
　　audio:true,
　　video:true
})

 這樣就調用了攝像頭和錄音器

 navigator.mediaDevices.getUserMedia({
        audio: false, video: true
  }).then(function (result) {
        video.srcObject = result;
  })

 利用video的srcObject屬性和promise的then方法，把開啟攝像頭后的返回值給video標簽，就顯示出來了

全部的實現代碼如下：

var video = document.createElement("video");
video.autoplay="autoplay";
document.body.appendChild(video);
navigator.mediaDevices.getUserMedia({
    audio: false, video: true
}).then(function (result) {
    video.srcObject = result;
})

 現在我們繼續寫canvas拍照的步驟

<video id='myVideo' hidden></video>
<canvas id='snap' width='500' height='500' style="border:1px solid #ccc"></canvas>
<button id='control'>拍照</button>
<script>
var snap = document.getElementById('snap');
var context = snap.getContext('2d');
var videoSrc = null;
navigator.mediaDevices.getUserMedia({
    audio: false, video: true
}).then(function (result) {
    videoSrc = result;
    console.log(videoSrc)
    myVideo.srcObject = videoSrc;
})
control.addEventListener('click',function(){  
    context.drawImage(myVideo,0,0,500,500);
    console.log(navigator.mediaDevices)
})
</script>

 

新建canvas畫布，獲得context

隱藏video

canvas.drawImage方法的第一個參數放video即可調用canvas拍照