MediaStreamTrack.stop()失效：视频通话结束后摄像头无法关闭

我开发了一套视频通话系统，希望断开通话时关闭摄像头，但调用MediaStreamTrack.stop()方法后摄像头仍处于开启状态。

原停止流的代码如下：

const tracks = stream.getTracks();
tracks.forEach((track) => {
  track.stop();
});
stream.load();
remoteStream.current.srcObject = null;
localSteam.current.srcObject = null;

执行上述代码后，摄像头依然未关闭，状态如图所示：

问题修复方案 #

1. 删掉无用的stream.load()调用
   stream.load()是给<video>这类媒体元素用的刷新方法，对MediaStream对象调用完全没必要，反而可能影响轨道停止的逻辑。

2. 修正拼写错误
   代码里的localSteam是拼写错误，应该改成localStream——这个错误会导致本地流的srcObject没法正确置空，浏览器可能以为轨道还在被使用，所以摄像头关不掉。

3. 彻底清理流和轨道引用
   除了停止轨道，还要把所有关联的媒体元素引用断开，同时显式清空轨道变量，帮浏览器更快回收资源。

修正后的代码：

// 处理本地流，确保摄像头轨道完全停止
if (localStream.current) {
  localStream.current.getTracks().forEach(track => {
    track.stop();
    track = null; // 解除轨道引用
  });
  localStream.current.srcObject = null;
  localStream.current = null;
}

// 清理远程流引用
if (remoteStream.current) {
  remoteStream.current.srcObject = null;
  remoteStream.current = null;
}

额外排查建议 #

• 检查是否有其他未处理的MediaStream还在引用摄像头轨道，所有获取到的摄像头轨道都要调用stop()。
• 部分浏览器可能有权限缓存延迟，可强制刷新页面后再测试，或者查看是否有其他进程占用摄像头。
• 如果用了WebRTC的RTCPeerConnection，记得调用peerConnection.close()关闭连接，避免连接持有轨道引用导致摄像头无法关闭。

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