首先說一下js打開攝像頭的流程：

使用getUserMedia打開攝像頭然后將獲取到的流媒體轉(zhuǎn)成url放在video標(biāo)簽中的src中；

使用canvas的drawImage方法將video的內(nèi)容繪至canvas中，這樣就形成了截圖的效果；

使用stream.getTracks()[0].stop()關(guān)閉攝像頭。

---

1.開啟攝像頭

開啟攝像頭主要有兩種方法，一個(gè)是舊方法window.navigator.getUserMedia()方法，還有一個(gè)就是新方法navigator.mediaDevices.getUserMedia()。舊方法的使用如下：

btn1.addEventListener("click", function (event) {if ("getUserMedia" in window.navigator) {window.navigator.getUserMedia({video: true,audio: false}, function (stream) {v1.srcObject = stream;v1.play();}, function (err) {console.error("獲取攝像頭視頻錯(cuò)誤");})}});

其中window.navigator.getUserMedia()方法的參數(shù)有三個(gè)。

第一個(gè)參數(shù)是一個(gè)對象，用于選擇是否使用視頻(video)和audio(audio)。

第二個(gè)參數(shù)是成功的回調(diào)，其中帶一個(gè)參數(shù)（stream），在舊版本中可以直接通過調(diào)用MediaStream.stop() 來關(guān)閉攝像頭，不過在新版之中已廢棄。需要使用MediaStream.getTracks()[index].stop() 來關(guān)閉相應(yīng)的Track 。

第三個(gè)參數(shù)是失敗的回調(diào)，他有一個(gè)參數(shù)err用于接收錯(cuò)誤，可以在控制臺(tái)打印出來。

新方法的getUserMedia 位于navigator.mediaDevices對象下面，使用方法如下：

btn1.addEventListener("click", function () {if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({video: true,Audio: true}).then(function (stream) {mediaStreamTrack = stream.getTracks()[0];btn2.addEventListener("click", function () {mediaStreamTrack.stop();}, false);video.srcObject = stream;video.play();}).catch(function (err) {console.log(err);})}});

這個(gè)新方法返回的是一個(gè)Promise對象，可以使用then和catch表示成功與失敗的回調(diào)。其中的btn2的監(jiān)聽事件是關(guān)閉攝像頭的，在下文會(huì)說明。
這里我想說的是第一次用這個(gè)新方法的時(shí)候有點(diǎn)問題，我準(zhǔn)備用URL.createObjectURL()這個(gè)方法將流媒體轉(zhuǎn)成一個(gè)地址然后放在video標(biāo)簽的src中，但是瀏覽器給我來了這么一下：

我就查了一下MDN發(fā)現(xiàn)他給出了下面的解釋：

感興趣的可以去這里看看URL.createObjectURL()
解決的方法如下：
原先的代碼：

video.src = URL.createObjectURL(stream);

更改成下面的代碼：

video.srcObject = stream;

兼容版本如下：

try {
this.srcObject = stream;} catch (error) {
this.src = window.URL.createObjectURL(stream);}

這里的解決方案是我查到的，具體的相關(guān)解釋可以看下該博主的博客

2.使用canvas截圖

代碼如下：

var photo = document.querySelector("#photo"); var ctx = photo.getContext("2d"); btn3.addEventListener("click", function () {ctx.drawImage(video, 0, 0, 300, 300);}, false)

3.關(guān)閉攝像頭

在舊版本中可以直接使用stream.stop()來關(guān)閉攝像頭，不過現(xiàn)在好像已經(jīng)不行了所以我直接跳過使用新方法stream.getTracks()來關(guān)閉攝像頭。

var mediaStreamTrack = stream.getTracks()[0];btn2.addEventListener("click", function () {mediaStreamTrack.stop();}, false);

這里需要注意的是返回的stream.getTracks()返回的Tracks數(shù)組是倒序排列的，例如video在第一個(gè)audio在第二個(gè)，那么stream.getTracks()[1]就是video。不過我在本例中只獲取到了video，我也不知道為啥…所以只能用下標(biāo)0。

總結(jié)

以上是生活随笔為你收集整理的js获取摄像头权限实现拍照功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。