Networked A-frame示例视频切换按钮功能失效修复方案咨询

API 探路者

2026-10-1

修复方案

问题根因

原有代码仅调用NAF.connection.adapter.enableCamera()控制向远端发送摄像头流的状态，没有操作本地摄像头轨道的启停，也没有同步更新本地场景内的视频显示状态，所以点击按钮后看不到本地视频切换的效果。

修正步骤

先获取本地媒体流的视频轨道，直接控制轨道的启用/停用状态，实现硬件层面的开关
同步更新本地视频元素的播放状态，以及A-Frame场景中绑定该视频的纹理状态
确保cameraEnabled初始值和实际摄像头开启状态对齐

修正后代码

// 初始值和实际摄像头默认状态保持一致，默认开启则设为true
let cameraEnabled = true;
// Handle camera button click (Off and On)
cameraBtnEle.addEventListener('click', function() {
  const newState = !cameraEnabled;
  // 控制本地摄像头轨道启停
  const localStream = NAF.connection.adapter.getLocalStream();
  if (localStream) {
    localStream.getVideoTracks().forEach(track => {
      track.enabled = newState;
    });
  }
  // 保留远端流发送控制逻辑，保证其他用户同步看到开关状态
  NAF.connection.adapter.enableCamera(newState);
  // 同步本地预览视频显示状态，没有单独预览元素可删除此段
  const localVideo = document.querySelector('#local-video');
  if (localVideo) {
    localVideo.style.display = newState ? 'block' : 'none';
  }
  // 更新状态和按钮文本
  cameraEnabled = newState;
  cameraBtnEle.textContent = cameraEnabled ? 'Hide Camera' : 'Show Camera';
});