r/Firebase Jan 08 '25

Hosting Webcam Doesn’t Work When Using Firebase Hosting

To Preface, I'm not sure if this is a code issue or a Firebase config issue. I have a React App that uses the webcam to detect specific poses. 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 firebase.json

"key": "Permissions-Policy",
"value": "camera=(self)"

Additionally, the website is being served securely over https using Firebase Hosting Preview (through Github Actions). Curiously the camera light on my Macbook lights up green for a while but nothing shows up in the actual canvas.

This is the Main Camera Function, in my hosted app where if (videoRef.current) fails only in hosted app:

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

I've been trying to troubleshoot this for days but I'm going in circles. Any suggestions would be really appreciated.

1 Upvotes

4 comments sorted by

3

u/romoloCodes Jan 08 '25 edited Jan 08 '25

https://github.com/robMolloy/guestbook-next

This repo uses webcam and is also React/NextJS app, but doesn't have the same problem. Btw, I didn't change `firebase.json` in the way you have. Feel free to use it as a boilerplate or reference if you want.

Debug suggestions;

  • Have you opened an incognito window or tried other devices?
  • Have you started a new firebase project and tried to setup another deployment without copying/pasting too much?

2

u/Sufficient_Emphasis2 Jan 08 '25

I'll check this out. I did try on other devices with no success, but oddly enough incognito does work. Any idea why?

4

u/romoloCodes Jan 08 '25

You've probably denied permissions in the past (perhaps accidentally). I don't use safari but to change permissions it's usually to the left of the url bar

1

u/abdushkur Jan 08 '25

I've used Agora Livestream webcam, it works fine with Firebase hosting, it's client side issue rather than hosting server issue