其實(shí)本文章主要想要講解的就是如何關(guān)閉攝像頭以及他的指示燈，因?yàn)檫@個(gè)事真的很讓我苦惱，而開啟攝像頭其實(shí)并沒有那么難，只需調(diào)用navigator.mediaDevices.getUserMedia方法就行，具體就不細(xì)講了，直接上代碼(HTML結(jié)構(gòu)就是一個(gè)video標(biāo)簽和兩個(gè)button按鈕,所以就只上js部分了)
const video = document.querySelector('#video')
//開啟攝像頭按鈕
const btn1 = document.querySelector('#btn1')
//關(guān)閉攝像頭按鈕
const btn2 = document.querySelector('#btn2')
let mediaStreamTrack = null
btn1.addEventListener('click', async () => {
await navigator.mediaDevices.getUserMedia({ video: true })
.then((staream) => {
//這里保存下來stream對象只是為了后續(xù)關(guān)閉攝像頭的時(shí)候使用
mediaStreamTrack = stream
video.srcObject = staream
})
})開啟攝像頭之后，重點(diǎn)來了，我該如何關(guān)閉攝像頭以及他的指示燈呢!!!!
關(guān)閉攝像頭其實(shí)要用到我們之前保存的stream流對象,循環(huán)stream流對象的getVideoTracks()方法然后對里面每個(gè)內(nèi)容調(diào)用stop()方法就行，可能有人會疑惑，這里為什么要循環(huán)呢?循環(huán)的目的其實(shí)是為了把視頻和音頻一起停止，如果你沒有開啟音頻的話那就無需循環(huán)也可以，我這里是只開啟了視頻
btn2.addEventListener('click',() => {
mediaStreamTrack.getVideoTracks().forEach(track => {
track.stop()
})
})寫完這個(gè)代碼你會發(fā)現(xiàn)video標(biāo)簽里面的內(nèi)容沒有了，是一個(gè)黑屏狀態(tài)，但是你攝像頭旁邊的指示燈依然是亮著的，這是因?yàn)槟汴P(guān)了攝像頭，但沒有完全關(guān)，雖然內(nèi)容沒了，其實(shí)還是一直在推送黑幀，初步判斷是因?yàn)閙ediaStreamTrack.getVideoTracks()返回的是一個(gè)新流(如果判斷錯(cuò)誤大家可以及時(shí)糾正),這個(gè)時(shí)候你可以加一串代碼，讓video的srcObject=null，這樣指示燈就關(guān)掉了文章來源：http://www.zghlxwxcb.cn/news/detail-645833.html
btn2.addEventListener('click',() => {
mediaStreamTrack.getVideoTracks().forEach(track => {
track.stop()
})
video.value.srcObject = null
})這是因?yàn)閺?qiáng)大的垃圾回收機(jī)制，哈哈哈，最后到這里結(jié)束文章來源地址http://www.zghlxwxcb.cn/news/detail-645833.html
到了這里，關(guān)于前端如何利用js開啟攝像頭和關(guān)閉攝像頭以及他的指示燈的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
