使用 React / TypeScript 请求浏览器访问摄像头的权限

Question

我正在尝试在我的 React Web 应用程序中实现一个功能，允许向浏览器请求访问用户相机的权限，类似于 Google Meet 的做法。用户第一次访问我的网站时，浏览器会显示一个对话框，其中包含“允许”或“拒绝”相机访问选项。

我开发了一个 getVideoStream() 函数，它利用 Permissions API 和 MediaDevices API (getUserMedia) 来请求访问摄像头。

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;
    }
}

Answer 1

您可以使用 Chrome 的“Ctrl+Shift+Delete”清除浏览器数据并检查问题是否仍然存在？

实际上，权限提示只会在用户第一次访问您的网站或重置权限后出现。如果用户之前已授予或拒绝相机访问权限，浏览器将记住他们的选择，除非用户清除其网站数据或手动更改其权限，否则不会再次出现提示。