I’m trying to implement a function in my React web application that allows requesting permissions from the browser to access the user’s camera, similar to how Google Meet does it. The first time a user visits my site, the browser displays a dialog with the options “Allow” or “Deny” for camera access.

I’ve developed a getVideoStream() function that utilizes the Permissions API and the MediaDevices API (getUserMedia) to request access to the camera.

async function getVideoStream() {
    try {
        const permissionStatus = await navigator.permissions.query({
            name: 'camera' as PermissionName
        });

        if (permissionStatus.state === 'denied') {
            console.error('Camera permission has been denied');
            return;
        }
    } catch (error) {
        console.error('Error checking camera permissions:', error);
        return;
    }

    let stream: MediaStream | null = null;

    try {
        stream = await navigator.mediaDevices.getUserMedia({ video: true });
    } catch (error) {
        console.error('Error getting video stream:', error);
        return;
    }

    if (!stream || stream.getVideoTracks().length === 0) {
        console.error('Could not get a valid video track.');
        return;
    }
}