JavaScript：如何在继续执行之前等待相机访问？答案

【问题标题】：JavaScript : How to wait for camera access before proceed execution?JavaScript：如何在继续执行之前等待相机访问？
【发布时间】：2021-11-19 18:56:09
【问题描述】：

我有以下来自 Twilio 的代码来访问浏览器上的本地摄像头：

async function ShowLocalVideo() {   
    Twilio.Video.createLocalVideoTrack().then(track => {
        const localMediaContainer = document.getElementById('LocalMedia');
        localMediaContainer.appendChild(track.attach());        
      });
}

我想在继续执行其他步骤之前确保用户已授予对相机的访问权限。或者至少他回应了。所以我打电话来

await ShowLocalVideo();
alert('Hi !');

但警告 Hi ! 在浏览器提示之前触发：此文件要使用您的相机。

是否可以确保代码在用户响应此文件要使用您的相机之前不会继续运行。？

谢谢，干杯

【问题讨论】：

您正在等待 ShowLocalVideo，但其中还有另一个异步调用（“then”回调），您没有等待。 stackoverflow.com/questions/55019621/…（和许多其他人）
这段代码在哪里执行await ShowLocalVideo();?

标签： javascript twilio

【解决方案1】：

您将 async/await 语法与使用 Promise .then 混合使用。由于您不是 awaiting createLocalVideoTrack().then(...) 的结果，因此 async 函数将提前返回。您可以通过以下方式将.then 替换为await 来纠正此问题：

async function ShowLocalVideo() {   
    const track = await Twilio.Video.createLocalVideoTrack();
    const localMediaContainer = document.getElementById('LocalMedia');
    localMediaContainer.appendChild(track.attach());        
}

或者，您可以等待createLocalVideoTrack().then(...) 的结果，但这会混淆样式并造成混乱。

【讨论】：