如何使用JavaScript实现麦克风静音、摄像头开关切换功能

核心逻辑是通过控制媒体流中的音视频轨道enabled属性实现开关，无需重新向用户申请设备权限，切换响应速度快，适合通话场景下的临时开关需求。

首先你需要先调整现有代码，将获取到的媒体流实例存储在可全局访问的作用域中，方便后续功能调用：

// 外层定义变量存储本地媒体流实例
let localMediaStream = null;

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
}).then(stream => {
  // 存储流实例到全局变量
  localMediaStream = stream;
  const video = document.getElementById("my-video");
  video.srcObject = stream;
  video.addEventListener('loadedmetadata', () => {
    video.play();
  })
}).catch(err => {
  console.error("获取媒体设备失败，请检查权限设置：", err);
})

麦克风切换功能实现 #

function toggleMicrophone() {
  // 媒体流未初始化时直接返回
  if (!localMediaStream) return;
  // 获取流中所有音频轨道
  const audioTracks = localMediaStream.getAudioTracks();
  audioTracks.forEach(track => {
    // 切换轨道启用状态，设为false时会发送静音数据
    track.enabled = !track.enabled;
  });
  // 此处可自行添加按钮状态更新、提示文本切换等业务逻辑
  console.log("麦克风状态：", audioTracks[0]?.enabled ? "已开启" : "已关闭");
}

摄像头切换功能实现 #

function toggleCamera() {
  if (!localMediaStream) return;
  // 获取流中所有视频轨道
  const videoTracks = localMediaStream.getVideoTracks();
  videoTracks.forEach(track => {
    // 切换轨道启用状态，设为false时会发送黑帧
    track.enabled = !track.enabled;
  });
  console.log("摄像头状态：", videoTracks[0]?.enabled ? "已开启" : "已关闭");
}

你可以直接在页面中添加按钮绑定上述方法触发开关：

<button onclick="toggleMicrophone()">切换麦克风</button>
<button onclick="toggleCamera()">切换摄像头</button>

如果你需要完全释放设备权限（比如结束通话后停止设备占用），可以调用轨道的stop()方法，不过该操作会销毁轨道，后续要重新开启需要再次调用getUserMedia申请用户授权，不适合临时开关场景。

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