JavaScript技术问询：倒计时归零时自动重置并关闭Webcam流

你的需求是点击按钮开启摄像头后，15秒倒计时结束自动关闭摄像头，同时计时器自动重置为15秒。当前代码能正常开启摄像头，但缺少倒计时结束后的关键逻辑，以下是修复方案：

问题分析 #

1. 未保存摄像头的媒体流对象，导致无法在倒计时结束时关闭摄像头
2. trigger函数仅处理了倒计时递减，未在时间归零时执行关闭摄像头和重置计时器的操作

修改后的完整代码 #

HTML（无需修改）

<div style="text-align: center;">
<h3 id="timer">15</h3>

</div>
<br>

<div style="text-align: center;">
<button id="startBtn" onclick="goLive()">Go Live</button>
</div>
<br>

<div style="text-align: center;">
<video id="videoCam"></video>
</div>

JavaScript（关键修改已标注）

var countdown;
var time;
let mediaStream; // 新增：保存媒体流对象，用于后续关闭摄像头

function trigger() {
  if(time > 0) {
     time--;
     document.getElementById('timer').innerHTML = time;
     if(time > 0) {
          countdown = setTimeout(trigger, 1000); // 优化：直接传函数引用，避免字符串解析
     } else {
          // 倒计时归零时执行的逻辑
          // 关闭摄像头：遍历媒体流的所有轨道并停止
          if(mediaStream) {
            mediaStream.getTracks().forEach(track => track.stop());
            mediaStream = null;
          }
          // 重置计时器为15秒
          time = 15;
          document.getElementById('timer').innerHTML = time;
     }
  }
}

function reset() {
   clearTimeout(countdown);
}

function goLive(){

time = 16;
reset();
trigger();
    
let All_mediaDevices=navigator.mediaDevices
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
   console.log("getUserMedia() not supported.");
   return;
}
All_mediaDevices.getUserMedia({
   audio: true,
   video: true
})
.then(function(vidStream) {
   mediaStream = vidStream; // 新增：保存媒体流到全局变量
   var video = document.getElementById('videoCam');
   if ("srcObject" in video) {
      video.srcObject = vidStream;
   } else {
      video.src = window.URL.createObjectURL(vidStream);
   }
   video.onloadedmetadata = function(e) {
      video.play();
   };
})
.catch(function(e) {
   console.log(e.name + ": " + e.message);
});
}

关键修改说明 #

• 新增mediaStream全局变量，存储摄像头的媒体流对象，倒计时结束时可调用stop()方法关闭所有音视频轨道
• 在trigger函数中添加time === 0的判断分支：
  • 遍历媒体流轨道并停止，彻底关闭摄像头
  • 直接将time重置为15，同步更新页面计时器显示
• 优化setTimeout调用方式，直接传入函数引用而非字符串，提升性能和可读性

内容的提问来源于stack exchange，提问作者Woops