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

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

javascript"> 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
      })

这是因为强大的垃圾回收机制,哈哈哈,最后到这里结束

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端如何利用js开启摄像头和关闭摄像头以及他的指示灯

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买