TJ系列探测器前端部署方法(rtsp)

  • 将以下脚本作为库文件导入前端项目中:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { io } from "socket.io-client";
import playRecord from "./playRecord";

const socketIOInit = async (sio_url,setRmoteStream, setRecList) => {
const socketio = io(sio_url);
let pc;
let heartbeat_timer;

socketio.on("connect", () => {
console.log("connected");
});

socketio.on("create", () => {
socketio.emit("auth");
socketio.emit("heartbeatping");
console.log("created");
});
socketio.on("bridge", async (pathid) => {
setTimeout(() => {
setRemoteStream(
`https://live.tongjiai.cn/channel/${pathid}/index.m3u8`
);
}, 3000);
});
socketio.on("join", () => {
socketio.emit("auth");
socketio.emit("heartbeatping");
socketio.emit("getRecList");
console.log("joined");
});

// client-side custom heartbeat check with an interval of 10 seconds.
socketio.on("heartbeatpong", () => {
if (heartbeat_timer) {
clearTimeout(heartbeat_timer);
}
heartbeat_timer = setTimeout(() => {
socketio.emit("heartbeatping");
socketio.emit("getRecList");
}, 10000);
});

// recList handler
socketio.on("recList", (list) => {
console.log("list:",list);
setRecList(list);
});

socketio.on("hangup", () => {
console.log("hangup");
});
return socketio;
};

调用方法:

1
2
const socket = await socketIOInit("https://服务端地址:端口", setRemoteStream, setRecList);

  • 其中setRemoteStreamsetRecList分别是在线视频地址设置函数和录像文件列表接收函数。设置方法举例(React):
1
2
3
4
5
6
7
8
import RecordProgressBar from "/components/RecordProgressBar";
import VideoPlayer from "react-player";

const [remoteStream, setRemoteStream] = useState();
return (<VideoPlayer remoteStream = {remoteStream} />

const [recList, setRecList] = useState();
return (<RecordProgressBar recList = {recList} />