反应网络摄像头不在同一 Wifi 网络上的其他设备上显示

Question

我正在尝试制作一个网络应用程序，如果用户在笔记本电脑上，它会显示用户网络摄像头的视频流，如果用户通过移动设备访问浏览器，它会在后台摄像头上显示视频流。使用react网络摄像头库执行此操作(https://github.com/mozmorris/react-webcam)。

它在我运行npm的设备上运行良好，但网络上的其他设备(在不同的笔记本电脑和安卓/IOS设备上尝试过(不会显示网络摄像头视图，只显示"开始捕获"按钮。

代码：Camera.js

import React from "react";
import Webcam from "react-webcam";
function Camera(){
const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
const [capturing, setCapturing] = React.useState(false);
const [recordedChunks, setRecordedChunks] = React.useState([]);
const handleStartCaptureClick = React.useCallback(() => {
setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: "video/webm"
});
mediaRecorderRef.current.addEventListener(
"dataavailable",
handleDataAvailable
);
mediaRecorderRef.current.start();
}, [webcamRef, setCapturing, mediaRecorderRef]);
const handleDataAvailable = React.useCallback(
({ data }) => {
if (data.size > 0) {
setRecordedChunks((prev) => prev.concat(data));
}
},[setRecordedChunks]
);
const handleStopCaptureClick = React.useCallback(() => {
mediaRecorderRef.current.stop();
setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]);
const handleDownload = React.useCallback(() => {
if (recordedChunks.length) {
const blob = new Blob(recordedChunks, {
type: "video/webm"
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "react-webcam-stream-capture.webm";
a.click();
window.URL.revokeObjectURL(url);
setRecordedChunks([]);
}
}, [recordedChunks]);
return (
<>
<Webcam audio={false} ref={webcamRef} />
{capturing ? 
(<button onClick={handleStopCaptureClick}>Stop Capture</button>) : 
(<button onClick={handleStartCaptureClick}>Start Capture</button>)}
{recordedChunks.length > 0 && 
(<button onClick={handleDownload}>Download</button>)}
</>
);
}
export default Camera;

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Webcam from 'react-webcam';
import './index.css';
import Camera from './Camera';
//ReactDOM.render(<App />, document.getElementById("root"));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Camera />
</React.StrictMode>
);

我认为这可能与权限有关，因为其他设备不会显示允许相机访问的弹出窗口，但我不确定如何手动请求权限以使其工作。

感谢您的帮助或建议，谢谢！

Answer 1

我最近遇到了一个类似的问题，解决方案是需要HTTPS配置才能工作。如果它还没有配置为HTTPS，暂时来说，如果使用chrome，你可以尝试在这里将URL作为chrome标志输入到你的页面(这应该在客户端上完成，也就是笔记本电脑/手机(：

chrome://flags/#unsafely-将不安全来源视为安全

并且它将该页面视为安全上下文。除非只是为了测试相机，否则我不建议这样保存。