前端如何利用js开启摄像头和关闭摄像头以及他的指示灯-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端如何利用js开启摄像头和关闭摄像头以及他的指示灯。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

其实本文章主要想要讲解的就是如何关闭摄像头以及他的指示灯，因为这个事真的很让我苦恼，而开启摄像头其实并没有那么难，只需调用navigator.mediaDevices.getUserMedia方法就行，具体就不细讲了，直接上代码(HTML结构就是一个video标签和两个button按钮,所以就只上js部分了)

 const video = document.querySelector('#video')
//开启摄像头按钮
 const btn1 = document.querySelector('#btn1')
//关闭摄像头按钮
const btn2 = document.querySelector('#btn2')
let mediaStreamTrack = null

btn1.addEventListener('click', async () => {
                await navigator.mediaDevices.getUserMedia({ video: true })
                    .then((staream) => {
//这里保存下来stream对象只是为了后续关闭摄像头的时候使用
                        mediaStreamTrack = stream
                        video.srcObject = staream
                    })
        })

开启摄像头之后，重点来了，我该如何关闭摄像头以及他的指示灯呢!!!!

关闭摄像头其实要用到我们之前保存的stream流对象,循环stream流对象的getVideoTracks()方法然后对里面每个内容调用stop()方法就行，可能有人会疑惑，这里为什么要循环呢?循环的目的其实是为了把视频和音频一起停止，如果你没有开启音频的话那就无需循环也可以，我这里是只开启了视频

btn2.addEventListener('click',() => {
            mediaStreamTrack.getVideoTracks().forEach(track => {
            track.stop()
        })
      })

写完这个代码你会发现video标签里面的内容没有了，是一个黑屏状态，但是你摄像头旁边的指示灯依然是亮着的，这是因为你关了摄像头，但没有完全关，虽然内容没了，其实还是一直在推送黑帧，初步判断是因为mediaStreamTrack.getVideoTracks()返回的是一个新流(如果判断错误大家可以及时纠正),这个时候你可以加一串代码，让video的srcObject=null，这样指示灯就关掉了

btn2.addEventListener('click',() => {
            mediaStreamTrack.getVideoTracks().forEach(track => {
            track.stop()
        })
        video.value.srcObject = null
      })

这是因为强大的垃圾回收机制，哈哈哈，最后到这里结束文章来源地址https://www.toymoban.com/news/detail-645833.html

到了这里，关于前端如何利用js开启摄像头和关闭摄像头以及他的指示灯的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！