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

文章介绍了如何使用JavaScript的navigator.mediaDevices.getUserMedia方法开启和关闭摄像头。在关闭时,需通过获取videoTracks并停止它们,同时将video的srcObject设为null以关闭指示灯。文章强调了循环停止track的原因是处理音频和视频,并解释了为何设置srcObject为null能彻底关闭摄像头。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

其实本文章主要想要讲解的就是如何关闭摄像头以及他的指示灯,因为这个事真的很让我苦恼,而开启摄像头其实并没有那么难,只需调用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
      })

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值