React Webcam Doesn’t Work When Using Firebase Hosting

I have a React App that uses the webcam to detect specific poses. As the title suggests, when I deploy the app locally, it works as expected.

However, when deploying the app to firebase hosting, the camera feed is black. I have provided the necessary permissions in Chrome and the website is being served securely over https. Curiously the camera light on my Macbook lights up green for a while but nothing shows up.

This is the relevant code in the camera component:

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]);

… Which Throws: Video element is not available.

     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);
    }
}, []);

Screenshot of React App in Local

Screenshot in Hosted App

Are there additional permissions that I need to include for the firebase application?