基于React/TypeScript实现浏览器摄像头访问权限请求

以下是整合你的getVideoStream逻辑后的完整React函数组件实现，包含状态管理、用户交互提示以及资源清理：

import { useState, useEffect, useRef } from 'react';

const CameraComponent = () => {
  const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
  const [permissionDenied, setPermissionDenied] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const videoRef = useRef<HTMLVideoElement>(null);

  async function getVideoStream() {
    try {
      // 先检查摄像头权限状态
      const permissionStatus = await navigator.permissions.query({
        name: 'camera' as PermissionName
      });

      if (permissionStatus.state === 'denied') {
        setPermissionDenied(true);
        setIsLoading(false);
        return;
      }
    } catch (error) {
      console.error('权限检查失败:', error);
      // 某些浏览器不支持Permissions API，直接继续尝试获取流
    }

    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      
      if (stream.getVideoTracks().length === 0) {
        throw new Error('未获取到有效视频轨道');
      }

      setVideoStream(stream);
      // 将流绑定到video元素
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
      }
    } catch (error) {
      const err = error as Error;
      console.error('获取视频流失败:', err);
      
      // 判断是否是权限拒绝错误
      if (err.name === 'NotAllowedError') {
        setPermissionDenied(true);
      } else {
        setErrorMessage(err.message);
      }
    } finally {
      setIsLoading(false);
    }
  }

  useEffect(() => {
    // 组件挂载时请求摄像头权限
    getVideoStream();

    // 组件卸载时释放视频资源
    return () => {
      if (videoStream) {
        videoStream.getTracks().forEach(track => track.stop());
      }
    };
  }, []);

  if (isLoading) {
    return <div>正在请求摄像头权限...</div>;
  }

  if (permissionDenied) {
    return (
      <div>
        <p>摄像头权限已被拒绝</p>
        <p>请前往浏览器设置中开启本网站的摄像头访问权限</p>
      </div>
    );
  }

  if (errorMessage) {
    return <div>错误: {errorMessage}</div>;
  }

  return (
    <div>
      <h3>摄像头预览</h3>
      <video 
        ref={videoRef} 
        autoPlay 
        playsInline 
        width={640} 
        height={480}
        style={{ border: '1px solid #ccc' }}
      />
    </div>
  );
};

export default CameraComponent;

关键实现细节 #

• 状态管理：通过useState跟踪视频流、权限状态、加载状态和错误信息，为用户提供清晰的交互反馈
• 权限兼容处理：虽然使用了Permissions API做前置检查，但同时兼容了不支持该API的浏览器（直接通过getUserMedia的错误捕获权限拒绝）
• 资源清理：组件卸载时停止所有视频轨道，避免浏览器持续占用摄像头资源
• 用户友好提示：根据不同状态显示加载提示、权限拒绝引导、错误信息，符合Google Meet这类应用的交互逻辑
• 视频元素绑定：使用useRef获取video DOM元素，将媒体流赋值给srcObject实现实时预览

注意事项 #

• HTTPS要求：除localhost外，浏览器仅允许在HTTPS环境下调用getUserMedia
• 权限拒绝后无法再次自动请求：如果用户拒绝了权限，浏览器不会再自动弹出请求框，必须引导用户手动在浏览器设置中开启权限
• 摄像头设备检测：如果用户设备没有摄像头，getUserMedia会抛出NotFoundError，可以在错误处理中添加对应的提示

内容的提问来源于stack exchange，提问作者Daniel Ramirez Gil