JavaScript如何等待摄像头权限授权完成后再执行后续代码？

根因分析 #

你写的ShowLocalVideo虽然标记了async关键字，但内部没有返回Twilio.Video.createLocalVideoTrack()生成的Promise实例，外层的await实际等待的是一个立即完成的空Promise，因此后续代码不会等待权限交互就直接执行了。

修复代码 #

只需在异步操作前加return，把Promise暴露给外层即可：

async function ShowLocalVideo() {   
    // 返回异步操作的Promise
    return Twilio.Video.createLocalVideoTrack().then(track => {
        const localMediaContainer = document.getElementById('LocalMedia');
        localMediaContainer.appendChild(track.attach());        
      });
}

修改后执行await ShowLocalVideo()，会自动等用户对摄像头权限请求做出允许/拒绝的选择后，再执行后面的alert逻辑。

可选异常兼容 #

如果需要处理用户拒绝权限、设备无可用摄像头的场景，可以搭配try/catch使用：

try {
  await ShowLocalVideo();
  alert('Hi !');
} catch (error) {
  console.error('摄像头访问失败：', error);
  // 此处可追加用户引导逻辑，比如提示需要开启摄像头权限才能使用功能
}

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