React Webcam部署到Firebase Hosting后无法正常工作的问题求助

我开发了一个React应用，核心功能是调用摄像头检测特定姿势。本地运行的时候一切都正常，但部署到Firebase Hosting之后，摄像头画面直接变成了黑色。我已经在Chrome浏览器里授予了摄像头权限，网站也是通过HTTPS安全访问的，奇怪的是我的MacBook摄像头绿灯会亮一会儿，但就是没有任何画面显示出来。

下面是相机组件里的相关代码：

const PoseCamera = forwardRef(({ onCapture, poseType }, ref) => {
const videoRef = useRef(null);
const canvasRef = useRef(null);
const containerRef = useRef(null);
const [detector, setDetector] = useState(null);
const [isStreaming, setIsStreaming] = useState(false);
const [isInitializing, setIsInitializing] = useState(true);
const requestAnimationRef = useRef(null);
const localStreamRef = useRef(null);
const FRAMES_TO_HOLD = 30;
const poseBufferRef = useRef([]);
const currentPoseType = POSE_TYPES[poseType];
const SMOOTHING_WINDOW = 10; // Number of frames to average
const poseHistoryRef = useRef([]); // Store recent poses

const isReadyForDetection = useCallback(() => {
    if (!detector) {
        console.error("Pose detector is not initialized.");
        return false;
    }

    if (!videoRef.current) {
        console.error("Video element is not available.");
        return false;
    }

    if (!canvasRef.current) {
        console.error("Canvas element is not available.");
        return false;
    }

    if (!isStreaming) {
        console.error("Camera is not streaming.");
        return false;
    }

    return true;
}, [detector, isStreaming]);

这段代码会抛出错误：Video element is not available.

下面是startCamera函数的代码：

const startCamera = useCallback(async () => {
    setIsInitializing(true);
    try {
        if (!window.isSecureContext) {
            console.error('Application not running in secure context - camera may not work');
        }

        const stream = await navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false
        });

        console.log('Camera stream obtained:', stream);

        if (videoRef.current) {
            videoRef.current.srcObject = stream;
            console.log('Video element assigned stream:', videoRef.current.srcObject);

            localStreamRef.current = stream;

            videoRef.current.onplay = () => {
                console.log('Video is playing');
            };

            videoRef.current.onloadedmetadata = () => {
                const { videoWidth, videoHeight } = videoRef.current;
                if (canvasRef.current) {
                    canvasRef.current.width = videoWidth;
                    canvasRef.current.height = videoHeight;
                    if (containerRef.current) {
                        containerRef.current.style.aspectRatio = `${videoWidth}/${videoHeight}`;
                        console.log('Canvas dimensions set:', videoWidth, videoHeight);
                        const ctx = canvasRef.current.getContext('2d');
                        ctx.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
                    }
                    setIsStreaming(true);
                }
            };

            // Add canplay event listener to ensure video is ready
            videoRef.current.oncanplay = () => {
                console.log('Video is ready to play');
                videoRef.current.play();
            };

        } else {
            console.error('Video element is not available.');
        }
    } catch (error) {
        console.error('Error accessing camera:', error);
    } finally {
        setIsInitializing(false);
    }
}, []);

截图对比 #

• 本地运行时的应用截图：画面正常显示摄像头捕捉到的内容，姿势检测功能正常运作。
• 部署到Firebase后的应用截图：摄像头区域为黑色，没有任何画面内容，但摄像头指示灯亮起。

请问是不是还需要给Firebase应用配置额外的权限才能让摄像头正常工作？

备注：内容来源于stack exchange，提问作者GB-DEV