React Webcam Doesn’t Work When Using Firebase Hosting

Question

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 Local Screenshot

Screenshot in Hosted App Hosted Screenshot

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