CODEWITHSUNDEEP
javascripttwilio
Thomas Carlton
Thomas Carlton

Reputation: 5968

JavaScript : How to wait for camera access before proceed execution?

I have the following code from Twilio to access local camera on browser :

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

I would like to make sure the user Granted Access to the camera before continuing the execution of other steps. Or at least he responded. So I'm calling

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

But alert Hi ! is triggered before the browser says : This file wants to use your camera.

Is is possible to make sure the code doesn't continue until the user responds to This file wants to use your camera. ?

Upvotes: 1

Views: 387

Answers (1)

m1el
m1el

Reputation: 176

You're mixing async/await syntax with using Promise .then. Since you're not awaiting on the result of createLocalVideoTrack().then(...), the async function will return early. You can correct this by replacing .then with await the following way:

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

Alternatively, you can await on the result of createLocalVideoTrack().then(...), but that would mix the styles and create confusion.

Upvotes: 3

Related Questions