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

Question

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

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

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

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

但是在浏览器说：此文件想要使用您的相机之前会触发警报嗨！。

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

Answer 1

您将

async

/

await

语法与 Promise

.then

混合在一起。 由于您没有

await

createLocalVideoTrack().then(...)

的结果，因此异步函数将提前返回。您可以通过以下方式将

.then

替换为

await

来纠正此问题：

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

或者，您可以等待

createLocalVideoTrack().then(...)

的结果，但这会混合样式并造成混乱。