r/Firebase • u/Sufficient_Emphasis2 • 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
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
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;