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

• 将以下脚本作为库文件导入前端项目中：

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;
};

调用方法：

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

• 其中setRemoteStream和setRecList分别是在线视频地址设置函数和录像文件列表接收函数。设置方法举例(React)：

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} />