Веб-камера React не работает при использовании хостинга Firebase ⇐ Javascript

[Anonymous]

У меня есть приложение React, которое использует веб-камеру для определения определенных поз. Как следует из названия, когда я развертываю приложение локально, оно работает должным образом.
Однако при развертывании приложения на хостинге Firebase изображение с камеры становится черным. Я предоставил необходимые разрешения в 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]);

... Что выдает: элемент видео недоступен.

Код: Выделить всё

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

Снимок экрана приложения React на локальном компьютере
[img]https:// i.sstatic.net/LRKPIRQd.png[/img]

Снимок экрана в размещенном приложении


Есть ли дополнительные разрешения, которые мне нужно включить для приложения Firebase?

Подробнее здесь: https://stackoverflow.com/questions/793 ... se-hosting