摄像机实时监控

最新推荐文章于 2024-12-24 15:00:02 发布

原创最新推荐文章于 2024-12-24 15:00:02 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript

本文介绍了一种使用React Hooks和WebRtcStreamerxiaoxujs库来实现从RTSP源加载并播放视频流的方法。通过解析后端返回的数据，动态创建视频元素并连接到指定的RTSP地址。

// 摄像头
const videoEle = useRef(null);
const videoEleAdd = useRef<any>();

useEffect(() => {
if (rightTopBindData) {
let value = `rtsp://${rightTopBindData?.enterCamera.username}:${rightTopBindData?.enterCamera.password}@${rightTopBindData?.enterCamera.host}:${rightTopBindData?.enterCamera.rtspPort}/Streaming/Channels/101`;
if (videoEleEnter.current && value) {
videoEleAddEnter.current = new WebRtcStreamerxiaoxujs(
videoEleEnter.current!,
"http://localhost:8000"
);
videoEleAddEnter.current.connect(value);
}
return () => {
if (videoEleAddEnter.current) {
videoEleAddEnter.current.disconnect();
}
};
}
}, [rightTopBindData]);