Merge branch 'master' of http://git.umayle.com:2023/liulonglong/shuinichang_

.history/public/webs/css/style_20231212102045.css

@@ -0,0 +1,32 @@
+@charset "utf-8";
+* {
+    margin:0;
+    padding:0;
+}
+html {
+    width:100%;
+    height:100%;
+    font-size:12px;
+    font-family:Arial, Helvetica, sans-serif;
+    -webkit-text-size-adjust:none;
+    background:#FFFFFF;
+    overflow: hidden;
+}
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.h5-left {
+    width: 100%;
+    height: 100%;
+}
+
+.h5-play-wrap {
+    width: auto;
+    height: auto;
+    background-color: #000;
+    border: 1px solid #333;
+    position: relative;
+    overflow: hidden;
+}

.history/public/webs/css/style_20231212135453.css

@@ -0,0 +1,28 @@
+@charset "utf-8";
+* {
+    margin:0;
+    padding:0;
+}
+html {
+    width:100%;
+    height:100%;
+    font-size:12px;
+    font-family:Arial, Helvetica, sans-serif;
+    -webkit-text-size-adjust:none;
+    background:#FFFFFF;
+    overflow: hidden;
+}
+body {
+    width: 100%;
+    height: 100%;
+}
+.h5-left {
+    float: left;
+}
+
+.h5-play-wrap {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}

.history/public/webs/index_20231212101944.js

@@ -0,0 +1,306 @@
+let $ip,
+  $port,
+  $user,
+  $password,
+  $loginState,
+  $stream,
+  $volume,
+  $canvas, //canvas播放视频DOM
+  $video, //video播放视频DOM
+  $canvas_ivs, //canvas绘图DOM
+  $video_wrap, //视频外层Wrap
+  $videoLoading, //“加载中...”提示
+  WndIndex = 0, //宫格窗口Id
+  WebCaps = null; //webCapsConfig文件转存变量
+let isLogin = false; //是否登录
+let channel = 0; //当前通道
+let curPage = 1; //视频下载列表的当前页
+let totalPage = 1; //视频下载列表的总页数
+let recordArr = []; //视频文件数组
+let canvasSon = null; //canvas绘图实例
+let playerInstance = []; //播放|回放实例数组
+let recordInstance = []; //录像下载实例数组
+let talkInstance = []; //对讲实例数组
+let ivsInstance = []; //canvas绘图实例数组
+let cutInstance = []; //视频裁剪实例数组
+let onlineChannel = []; //当前成功拉流的视频通道数组
+let isCuting = false; //是否正在进行视频裁剪
+let downList = []; //勾选的视频下载列表
+let downItemIndex = 0; //视频下载索引
+let canvasParam = {
+  //canvas绘图默认传参
+  strokeColor: "#FF0000",
+  title: "",
+  resizeEnable: false,
+  moveEnable: false,
+  closeEnable: true,
+  array: true,
+  showSize: false,
+  selectType: "inSide",
+  disappear: true,
+  selected: false,
+};
+const lINENUMBER = 16; //回放列表每页显示录像条数
+let curEnlargeWnd = 0;
+
+/**
+ * @description 初始化
+ */
+const init = () => {
+  let videoStr = "";
+  for (var i = 0; i < 16; i++) {
+    videoStr +=
+      '<div wnd-index="' +
+      i +
+      '" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
+      i +
+      '" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
+      i +
+      '" class="video_loading"  style="display:none">加载中...</p><video id="h5_video_' +
+      i +
+      '" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
+      i +
+      '" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
+  }
+  document.querySelector(".h5-play-wrap").innerHTML = videoStr;
+  document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
+    item.addEventListener("click", function (event) {
+      let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
+      if (
+        !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
+      ) {
+        channel = event.target.parentNode.getAttribute("channel") - 0;
+        document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+          item.classList.remove("fn-fontRed");
+        });
+      }
+      document
+        .querySelectorAll(".h5-play-wrap div")
+        .forEach(function (item, index) {
+          if (index === _wndIndex) {
+            item.style.borderColor = "rgb(255, 204, 0)";
+            if (
+              !(
+                playerInstance[_wndIndex] &&
+                playerInstance[_wndIndex].isPlayback
+              )
+            ) {
+              if (onlineChannel.indexOf(channel) > -1) {
+                document
+                  .querySelector(
+                    '#h5_channel_list li[channel="' + channel + '"]'
+                  )
+                  .classList.add("fn-fontRed");
+              }
+            }
+            WndIndex = _wndIndex;
+            setVideoDom();
+          } else {
+            item.style.borderColor = "rgb(125, 125, 125)";
+          }
+        });
+    });
+  });
+  $ip = $("#h5_ip");
+  $port = $("#h5_port");
+  $user = $("#h5_user");
+  $password = $("#h5_password");
+  $loginState = $("#h5_loginState");
+  $stream = $("#h5_stream");
+  $volume = $("#h5_volume");
+  $video_wrap = document.querySelector(".h5-play-wrap");
+  setVideoDom();
+
+  let inputArr = document.querySelectorAll("input[btn-for]");
+  for (let node of inputArr) {
+    node.addEventListener("click", bindClickEvent);
+  }
+
+  let selArr = document.querySelectorAll("select[sel-for]");
+  for (let node of selArr) {
+    node.addEventListener("change", bindChangeEvent);
+  }
+  [
+    "fullscreenchange",
+    "webkitfullscreenchange",
+    "mozfullscreenchange",
+    "msfullscreenchange",
+  ].forEach((item, index) => {
+    document.addEventListener(item, fullscreenchange, false);
+  });
+  onPreview(false);
+};
+/**
+ * @description 切换宫格时重新设置当前视频dom
+ */
+const setVideoDom = () => {
+  $canvas = $("#h5_canvas_" + WndIndex);
+  $video = $("#h5_video_" + WndIndex);
+  $canvas_ivs = $("#h5_ivs_" + WndIndex);
+  $videoLoading = $("#h5_loading_" + WndIndex);
+};
+/**
+/**
+ * @description 预览
+ * @param {boolean} isPlayback 是否是回放
+ * @param {string} url 回放视频的url
+ * @param {number} playbackIndex 回放视频的索引
+ * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
+ */
+const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
+  if (
+    playerInstance[WndIndex] &&
+    onlineChannel.indexOf(channel) > -1 &&
+    !isChangeStream
+  ) {
+    alert("通道" + (channel + 1) + "已存在！");
+    return;
+  }
+  onStopPreview();
+  var player = null
+  let options = {
+    
+    wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
+    rtspURL:
+      "rtsp://" +
+      "221.214.127.18" +
+      ":" +
+      "8200" +
+      "/cam/realmonitor?channel=10" +
+      "&subtype=0" +
+      "&proto=Private3",
+    username: "admin",
+    password: "pyss2017",
+    lessRateCanvas: true,
+    playback: isPlayback,
+    isPrivateProtocol: false,
+    realm: RPC.realm, //设备登录返回的realm
+    playbackIndex: playbackIndex,
+  };
+  player = new PlayerControl(options);
+
+  player.on("MSEResolutionChanged", function (e) {
+    console.log(e);
+  });
+  player.on("PlayStart", function (e) {
+    console.log(e);
+    $videoLoading.style.display = "none";
+    if (!player.isPlayback) {
+      onlineChannel.push(channel);
+      updateChannelList();
+      // if(curWndType !== 1) {
+      //     clickNextWnd();
+      // }
+    }
+  });
+
+  player.on("GetFrameRate", function (e) {
+    console.log("GetFrameRate: " + e);
+  });
+  player.on("FrameTypeChange", function (e) {
+    console.log("FrameTypeChange: " + e);
+  });
+  player.on("Error", function (e) {
+    //console.log('Error: ' + JSON.stringify(e))
+  });
+  player.on("IvsDraw", function (e) {
+    //console.log('IvsDraw: ' + JSON.stringify(e))
+  });
+  player.on("WorkerReady", function () {
+    player.connect();
+  });
+  player.init($canvas, $video);
+  $canvas.parentNode.setAttribute("channel", channel);
+  $videoLoading.style.display = "";
+};
+/**
+ * @description 更新通道列表
+ */
+const updateChannelList = () => {
+  document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+    item.classList.remove("fn-fontBlue");
+    item.classList.remove("fn-fontRed");
+    if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
+      item.classList.add("fn-fontBlue");
+    }
+  });
+};
+/**
+ * @description 停止预览
+ */
+const onStopPreview = () => {
+  if (playerInstance[WndIndex]) {
+    playerInstance[WndIndex].stop();
+    playerInstance[WndIndex].close();
+    playerInstance[WndIndex] = null;
+    let _index = onlineChannel.indexOf(channel);
+    onlineChannel.splice(_index, 1);
+    updateChannelList();
+    let dom = $canvas;
+    if (dom.style.display === "none") {
+      dom = $video;
+    }
+    dom.style.display = "none";
+    if (talkInstance[WndIndex]) {
+      talkInstance[WndIndex].talk("off");
+      talkInstance[WndIndex] = null;
+    }
+    if (recordInstance[WndIndex]) {
+      recordInstance[WndIndex].startRecord(false);
+      recordInstance[WndIndex] = null;
+    }
+  }
+};
+/**
+ * @description 自定义选择器
+ * @param {string} str dom元素
+ */
+function $(str) {
+  if (str.charAt(0) == "#") {
+    return document.getElementById(str.substring(1));
+  } else if (str.charAt(0) == ".") {
+    return document.getElementsByClassName(str.substring(1));
+  } else {
+    return document.getElementsByTagName(str);
+  }
+}
+/**
+ * @description 设置样式
+ * @param {object} obj dom元素
+ * @param {*} json css样式
+ */
+function setStyle(obj, json) {
+  for (let i in json) {
+    obj.style[i] = json[i];
+  }
+}
+/**
+ * @description 绑定click事件
+ * @param {object} event event对象
+ */
+function bindClickEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("btn-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+/**
+ * @description 绑定change事件
+ * @param {object} event event对象
+ */
+function bindChangeEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("sel-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+function fullscreenchange() {
+  if (getFull()) {
+    return;
+  }
+}
+init();

.history/public/webs/index_20231212133606.js

@@ -0,0 +1,307 @@
+let $ip,
+  $port,
+  $user,
+  $password,
+  $loginState,
+  $stream,
+  $volume,
+  $canvas, //canvas播放视频DOM
+  $video, //video播放视频DOM
+  $canvas_ivs, //canvas绘图DOM
+  $video_wrap, //视频外层Wrap
+  $videoLoading, //“加载中...”提示
+  WndIndex = 0, //宫格窗口Id
+  WebCaps = null; //webCapsConfig文件转存变量
+let isLogin = false; //是否登录
+let channel = 0; //当前通道
+let curPage = 1; //视频下载列表的当前页
+let totalPage = 1; //视频下载列表的总页数
+let recordArr = []; //视频文件数组
+let canvasSon = null; //canvas绘图实例
+let playerInstance = []; //播放|回放实例数组
+let recordInstance = []; //录像下载实例数组
+let talkInstance = []; //对讲实例数组
+let ivsInstance = []; //canvas绘图实例数组
+let cutInstance = []; //视频裁剪实例数组
+let onlineChannel = []; //当前成功拉流的视频通道数组
+let isCuting = false; //是否正在进行视频裁剪
+let downList = []; //勾选的视频下载列表
+let downItemIndex = 0; //视频下载索引
+let canvasParam = {
+  //canvas绘图默认传参
+  strokeColor: "#FF0000",
+  title: "",
+  resizeEnable: false,
+  moveEnable: false,
+  closeEnable: true,
+  array: true,
+  showSize: false,
+  selectType: "inSide",
+  disappear: true,
+  selected: false,
+};
+const lINENUMBER = 16; //回放列表每页显示录像条数
+let curEnlargeWnd = 0;
+
+/**
+ * @description 初始化
+ */
+const init = () => {
+  let videoStr = "";
+  for (var i = 0; i < 16; i++) {
+    videoStr +=
+      '<div wnd-index="' +
+      i +
+      '" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
+      i +
+      '" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
+      i +
+      '" class="video_loading"  style="display:none">加载中...</p><video id="h5_video_' +
+      i +
+      '" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
+      i +
+      '" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
+  }
+  document.querySelector(".h5-play-wrap").innerHTML = videoStr;
+  document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
+    item.addEventListener("click", function (event) {
+      let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
+      if (
+        !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
+      ) {
+        channel = event.target.parentNode.getAttribute("channel") - 0;
+        document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+          item.classList.remove("fn-fontRed");
+        });
+      }
+      document
+        .querySelectorAll(".h5-play-wrap div")
+        .forEach(function (item, index) {
+          if (index === _wndIndex) {
+            item.style.borderColor = "rgb(255, 204, 0)";
+            if (
+              !(
+                playerInstance[_wndIndex] &&
+                playerInstance[_wndIndex].isPlayback
+              )
+            ) {
+              if (onlineChannel.indexOf(channel) > -1) {
+                document
+                  .querySelector(
+                    '#h5_channel_list li[channel="' + channel + '"]'
+                  )
+                  .classList.add("fn-fontRed");
+              }
+            }
+            WndIndex = _wndIndex;
+            setVideoDom();
+          } else {
+            item.style.borderColor = "rgb(125, 125, 125)";
+          }
+        });
+    });
+  });
+  $ip = $("#h5_ip");
+  $port = $("#h5_port");
+  $user = $("#h5_user");
+  $password = $("#h5_password");
+  $loginState = $("#h5_loginState");
+  $stream = $("#h5_stream");
+  $volume = $("#h5_volume");
+  $video_wrap = document.querySelector(".h5-play-wrap");
+  setVideoDom();
+
+  let inputArr = document.querySelectorAll("input[btn-for]");
+  for (let node of inputArr) {
+    node.addEventListener("click", bindClickEvent);
+  }
+
+  let selArr = document.querySelectorAll("select[sel-for]");
+  for (let node of selArr) {
+    node.addEventListener("change", bindChangeEvent);
+  }
+  [
+    "fullscreenchange",
+    "webkitfullscreenchange",
+    "mozfullscreenchange",
+    "msfullscreenchange",
+  ].forEach((item, index) => {
+    document.addEventListener(item, fullscreenchange, false);
+  });
+  onPreview(false);
+};
+/**
+ * @description 切换宫格时重新设置当前视频dom
+ */
+const setVideoDom = () => {
+  $canvas = $("#h5_canvas_" + WndIndex);
+  $video = $("#h5_video_" + WndIndex);
+  $canvas_ivs = $("#h5_ivs_" + WndIndex);
+  $videoLoading = $("#h5_loading_" + WndIndex);
+};
+/**
+/**
+ * @description 预览
+ * @param {boolean} isPlayback 是否是回放
+ * @param {string} url 回放视频的url
+ * @param {number} playbackIndex 回放视频的索引
+ * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
+ */
+const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
+  if (
+    playerInstance[WndIndex] &&
+    onlineChannel.indexOf(channel) > -1 &&
+    !isChangeStream
+  ) {
+    alert("通道" + (channel + 1) + "已存在！");
+    return;
+  }
+  let ip = window.location.href.split("?")[2];
+  let channel = window.location.href.split("?")[1];
+  onStopPreview();
+  var player = null;
+  let options = {
+    wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
+    rtspURL:
+      "rtsp://" +
+      ip +
+      ":" +
+      "8200" +
+      `/cam/realmonitor?channel=${channel}` +
+      "&subtype=0" +
+      "&proto=Private3",
+    username: "admin",
+    password: "pyss2017",
+    lessRateCanvas: true,
+    playback: isPlayback,
+    isPrivateProtocol: false,
+    realm: RPC.realm, //设备登录返回的realm
+    playbackIndex: playbackIndex,
+  };
+  player = new PlayerControl(options);
+
+  player.on("MSEResolutionChanged", function (e) {
+    console.log(e);
+  });
+  player.on("PlayStart", function (e) {
+    console.log(e);
+    $videoLoading.style.display = "none";
+    if (!player.isPlayback) {
+      onlineChannel.push(channel);
+      updateChannelList();
+      // if(curWndType !== 1) {
+      //     clickNextWnd();
+      // }
+    }
+  });
+
+  player.on("GetFrameRate", function (e) {
+    console.log("GetFrameRate: " + e);
+  });
+  player.on("FrameTypeChange", function (e) {
+    console.log("FrameTypeChange: " + e);
+  });
+  player.on("Error", function (e) {
+    //console.log('Error: ' + JSON.stringify(e))
+  });
+  player.on("IvsDraw", function (e) {
+    //console.log('IvsDraw: ' + JSON.stringify(e))
+  });
+  player.on("WorkerReady", function () {
+    player.connect();
+  });
+  player.init($canvas, $video);
+  $canvas.parentNode.setAttribute("channel", channel);
+  $videoLoading.style.display = "";
+};
+/**
+ * @description 更新通道列表
+ */
+const updateChannelList = () => {
+  document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+    item.classList.remove("fn-fontBlue");
+    item.classList.remove("fn-fontRed");
+    if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
+      item.classList.add("fn-fontBlue");
+    }
+  });
+};
+/**
+ * @description 停止预览
+ */
+const onStopPreview = () => {
+  if (playerInstance[WndIndex]) {
+    playerInstance[WndIndex].stop();
+    playerInstance[WndIndex].close();
+    playerInstance[WndIndex] = null;
+    let _index = onlineChannel.indexOf(channel);
+    onlineChannel.splice(_index, 1);
+    updateChannelList();
+    let dom = $canvas;
+    if (dom.style.display === "none") {
+      dom = $video;
+    }
+    dom.style.display = "none";
+    if (talkInstance[WndIndex]) {
+      talkInstance[WndIndex].talk("off");
+      talkInstance[WndIndex] = null;
+    }
+    if (recordInstance[WndIndex]) {
+      recordInstance[WndIndex].startRecord(false);
+      recordInstance[WndIndex] = null;
+    }
+  }
+};
+/**
+ * @description 自定义选择器
+ * @param {string} str dom元素
+ */
+function $(str) {
+  if (str.charAt(0) == "#") {
+    return document.getElementById(str.substring(1));
+  } else if (str.charAt(0) == ".") {
+    return document.getElementsByClassName(str.substring(1));
+  } else {
+    return document.getElementsByTagName(str);
+  }
+}
+/**
+ * @description 设置样式
+ * @param {object} obj dom元素
+ * @param {*} json css样式
+ */
+function setStyle(obj, json) {
+  for (let i in json) {
+    obj.style[i] = json[i];
+  }
+}
+/**
+ * @description 绑定click事件
+ * @param {object} event event对象
+ */
+function bindClickEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("btn-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+/**
+ * @description 绑定change事件
+ * @param {object} event event对象
+ */
+function bindChangeEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("sel-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+function fullscreenchange() {
+  if (getFull()) {
+    return;
+  }
+}
+init();

.history/public/webs/index_20231212133742.js

@@ -0,0 +1,307 @@
+let $ip,
+  $port,
+  $user,
+  $password,
+  $loginState,
+  $stream,
+  $volume,
+  $canvas, //canvas播放视频DOM
+  $video, //video播放视频DOM
+  $canvas_ivs, //canvas绘图DOM
+  $video_wrap, //视频外层Wrap
+  $videoLoading, //“加载中...”提示
+  WndIndex = 0, //宫格窗口Id
+  WebCaps = null; //webCapsConfig文件转存变量
+let isLogin = false; //是否登录
+let channel = 0; //当前通道
+let curPage = 1; //视频下载列表的当前页
+let totalPage = 1; //视频下载列表的总页数
+let recordArr = []; //视频文件数组
+let canvasSon = null; //canvas绘图实例
+let playerInstance = []; //播放|回放实例数组
+let recordInstance = []; //录像下载实例数组
+let talkInstance = []; //对讲实例数组
+let ivsInstance = []; //canvas绘图实例数组
+let cutInstance = []; //视频裁剪实例数组
+let onlineChannel = []; //当前成功拉流的视频通道数组
+let isCuting = false; //是否正在进行视频裁剪
+let downList = []; //勾选的视频下载列表
+let downItemIndex = 0; //视频下载索引
+let canvasParam = {
+  //canvas绘图默认传参
+  strokeColor: "#FF0000",
+  title: "",
+  resizeEnable: false,
+  moveEnable: false,
+  closeEnable: true,
+  array: true,
+  showSize: false,
+  selectType: "inSide",
+  disappear: true,
+  selected: false,
+};
+const lINENUMBER = 16; //回放列表每页显示录像条数
+let curEnlargeWnd = 0;
+
+/**
+ * @description 初始化
+ */
+const init = () => {
+  let videoStr = "";
+  for (var i = 0; i < 16; i++) {
+    videoStr +=
+      '<div wnd-index="' +
+      i +
+      '" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
+      i +
+      '" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
+      i +
+      '" class="video_loading"  style="display:none">加载中...</p><video id="h5_video_' +
+      i +
+      '" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
+      i +
+      '" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
+  }
+  document.querySelector(".h5-play-wrap").innerHTML = videoStr;
+  document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
+    item.addEventListener("click", function (event) {
+      let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
+      if (
+        !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
+      ) {
+        channel = event.target.parentNode.getAttribute("channel") - 0;
+        document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+          item.classList.remove("fn-fontRed");
+        });
+      }
+      document
+        .querySelectorAll(".h5-play-wrap div")
+        .forEach(function (item, index) {
+          if (index === _wndIndex) {
+            item.style.borderColor = "rgb(255, 204, 0)";
+            if (
+              !(
+                playerInstance[_wndIndex] &&
+                playerInstance[_wndIndex].isPlayback
+              )
+            ) {
+              if (onlineChannel.indexOf(channel) > -1) {
+                document
+                  .querySelector(
+                    '#h5_channel_list li[channel="' + channel + '"]'
+                  )
+                  .classList.add("fn-fontRed");
+              }
+            }
+            WndIndex = _wndIndex;
+            setVideoDom();
+          } else {
+            item.style.borderColor = "rgb(125, 125, 125)";
+          }
+        });
+    });
+  });
+  $ip = $("#h5_ip");
+  $port = $("#h5_port");
+  $user = $("#h5_user");
+  $password = $("#h5_password");
+  $loginState = $("#h5_loginState");
+  $stream = $("#h5_stream");
+  $volume = $("#h5_volume");
+  $video_wrap = document.querySelector(".h5-play-wrap");
+  setVideoDom();
+
+  let inputArr = document.querySelectorAll("input[btn-for]");
+  for (let node of inputArr) {
+    node.addEventListener("click", bindClickEvent);
+  }
+
+  let selArr = document.querySelectorAll("select[sel-for]");
+  for (let node of selArr) {
+    node.addEventListener("change", bindChangeEvent);
+  }
+  [
+    "fullscreenchange",
+    "webkitfullscreenchange",
+    "mozfullscreenchange",
+    "msfullscreenchange",
+  ].forEach((item, index) => {
+    document.addEventListener(item, fullscreenchange, false);
+  });
+  onPreview(false);
+};
+/**
+ * @description 切换宫格时重新设置当前视频dom
+ */
+const setVideoDom = () => {
+  $canvas = $("#h5_canvas_" + WndIndex);
+  $video = $("#h5_video_" + WndIndex);
+  $canvas_ivs = $("#h5_ivs_" + WndIndex);
+  $videoLoading = $("#h5_loading_" + WndIndex);
+};
+/**
+/**
+ * @description 预览
+ * @param {boolean} isPlayback 是否是回放
+ * @param {string} url 回放视频的url
+ * @param {number} playbackIndex 回放视频的索引
+ * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
+ */
+const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
+  if (
+    playerInstance[WndIndex] &&
+    onlineChannel.indexOf(channel) > -1 &&
+    !isChangeStream
+  ) {
+    alert("通道" + (channel + 1) + "已存在！");
+    return;
+  }
+  let ip = window.location.href.split("?")[2];
+  let channel = window.location.href.split("?")[1];
+  onStopPreview();
+  var player = null;
+  let options = {
+    wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
+    rtspURL:
+      "rtsp://" +
+      ip +
+      ":" +
+      "8200" +
+      `/cam/realmonitor?channel=${channel}` +
+      "&subtype=0" +
+      "&proto=Private3",
+    username: "admin",
+    password: "pyss2017",
+    lessRateCanvas: true,
+    playback: isPlayback,
+    isPrivateProtocol: false,
+    realm: RPC.realm, //设备登录返回的realm
+    playbackIndex: playbackIndex,
+  };
+  player = new PlayerControl(options);
+
+  player.on("MSEResolutionChanged", function (e) {
+    console.log(e);
+  });
+  player.on("PlayStart", function (e) {
+    console.log(e);
+    $videoLoading.style.display = "none";
+    if (!player.isPlayback) {
+      onlineChannel.push(channel);
+      updateChannelList();
+      // if(curWndType !== 1) {
+      //     clickNextWnd();
+      // }
+    }
+  });
+
+  player.on("GetFrameRate", function (e) {
+    console.log("GetFrameRate: " + e);
+  });
+  player.on("FrameTypeChange", function (e) {
+    console.log("FrameTypeChange: " + e);
+  });
+  player.on("Error", function (e) {
+    //console.log('Error: ' + JSON.stringify(e))
+  });
+  player.on("IvsDraw", function (e) {
+    //console.log('IvsDraw: ' + JSON.stringify(e))
+  });
+  player.on("WorkerReady", function () {
+    player.connect();
+  });
+  player.init($canvas, $video);
+  $canvas.parentNode.setAttribute("channel", channel);
+  $videoLoading.style.display = "";
+};
+/**
+ * @description 更新通道列表
+ */
+const updateChannelList = () => {
+  document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+    item.classList.remove("fn-fontBlue");
+    item.classList.remove("fn-fontRed");
+    if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
+      item.classList.add("fn-fontBlue");
+    }
+  });
+};
+/**
+ * @description 停止预览
+ */
+const onStopPreview = () => {
+  if (playerInstance[WndIndex]) {
+    playerInstance[WndIndex].stop();
+    playerInstance[WndIndex].close();
+    playerInstance[WndIndex] = null;
+    let _index = onlineChannel.indexOf(channel);
+    onlineChannel.splice(_index, 1);
+    updateChannelList();
+    let dom = $canvas;
+    if (dom.style.display === "none") {
+      dom = $video;
+    }
+    dom.style.display = "none";
+    if (talkInstance[WndIndex]) {
+      talkInstance[WndIndex].talk("off");
+      talkInstance[WndIndex] = null;
+    }
+    if (recordInstance[WndIndex]) {
+      recordInstance[WndIndex].startRecord(false);
+      recordInstance[WndIndex] = null;
+    }
+  }
+};
+/**
+ * @description 自定义选择器
+ * @param {string} str dom元素
+ */
+function $(str) {
+  if (str.charAt(0) == "#") {
+    return document.getElementById(str.substring(1));
+  } else if (str.charAt(0) == ".") {
+    return document.getElementsByClassName(str.substring(1));
+  } else {
+    return document.getElementsByTagName(str);
+  }
+}
+/**
+ * @description 设置样式
+ * @param {object} obj dom元素
+ * @param {*} json css样式
+ */
+function setStyle(obj, json) {
+  for (let i in json) {
+    obj.style[i] = json[i];
+  }
+}
+/**
+ * @description 绑定click事件
+ * @param {object} event event对象
+ */
+function bindClickEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("btn-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+/**
+ * @description 绑定change事件
+ * @param {object} event event对象
+ */
+function bindChangeEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("sel-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+function fullscreenchange() {
+  if (getFull()) {
+    return;
+  }
+}
+init();

.history/src/api/fhgl_20231213094657.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095308.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `https://img2020.cnblogs.com/blog/2600859/202110/2600859-20211025144758994-1769294655.png`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095534.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `https://st0.dancf.com/market-operations/market/side/1693884270949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095655.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `https://st0.dancf.com/market-operations/market/side/169388420949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095657.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `https://st0.dancf.com/market-operations/market/side/1693880949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095711.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `https://st0.dancf.com/market-operations/market/side/169388420949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095844.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 获取品牌
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `https://img2020.cnblogs.com/blog/2600859/202110/2600859-20211025144758994-1769294655.png`,
+    method: 'GET'
+  })
+}

.history/src/api/fhgl_20231213095910.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 
+export function loadBrand (limit) {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}

.history/src/utils/request_20231213093452.js

@@ -0,0 +1,39 @@
+/* 封装axios用于发送请求 */
+import axios from 'axios'
+ 
+/*
+(1)request 相当于 Axios 的实例对象
+(2)为什么要有request,而不是直接用axios
+  * 项目开发中，有可能会有两个基地址
+  * 不同的接口配置不同（有的要token,有的不要token）
+*/
+const request = axios.create({
+  baseURL: '/home/', // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000 // 请求超时：当5s没有响应就会结束请求
+})
+ 
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  }
+)
+ 
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data
+  },
+  function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error)
+  }
+)
+ 
+export default request

.history/src/utils/request_20231213093513.js

@@ -0,0 +1,33 @@
+/* 封装axios用于发送请求 */
+import axios from 'axios'
+ 
+const request = axios.create({
+  baseURL: '', // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000 // 请求超时：当5s没有响应就会结束请求
+})
+ 
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  }
+)
+ 
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data
+  },
+  function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error)
+  }
+)
+ 
+export default request

.history/src/utils/request_20231213093541.js

@@ -0,0 +1,35 @@
+/* 封装axios用于发送请求 */
+import axios from 'axios'
+ 
+const request = axios.create({
+  baseURL: '', // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000 // 请求超时：当5s没有响应就会结束请求
+})
+ 
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  }
+)
+ 
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data
+  },
+  function (error) {
+    // 对响应错误做点什么
+    console.log(error);
+    
+    return Promise.reject(error)
+  }
+)
+ 
+export default request

.history/src/utils/request_20231213094233.js

@@ -0,0 +1,34 @@
+/* 封装axios用于发送请求 */
+import axios from 'axios'
+ 
+const request = axios.create({
+  baseURL: '', // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000 // 请求超时：当5s没有响应就会结束请求
+})
+ 
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  }
+)
+ 
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data
+  },
+  function (error) {
+    // 对响应错误做点什么
+    console.log(error);
+    return Promise.reject(error)
+  }
+)
+ 
+export default request

.history/src/utils/request_20231213094310.js

@@ -0,0 +1,76 @@
+/* 封装axios用于发送请求 */
+import axios from 'axios'
+import { Message } from 'element-ui'; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: '', // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000 // 请求超时：当5s没有响应就会结束请求
+})
+ 
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  }
+)
+ 
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data
+  },
+  function (error) {
+    // 对响应错误做点什么
+    console.log(error);
+    return Promise.reject(error)
+  }
+)
+ 
+export default request
+
+
+
+// axios.js
+const instance = axios.create({
+  baseURL: 'https://api.example.com', // 设置你的API基础URL
+});
+
+// 添加一个响应拦截器
+instance.interceptors.response.use(
+  (response) => {
+    // 如果请求成功，直接返回响应数据
+    return response.data;
+  },
+  (error) => {
+    // 如果请求失败，处理错误信息
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error('Error status:', error.response.status);
+      console.error('Error data:', error.response.data);
+      console.error('Error headers:', error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error('No response received:', error.request);
+
+      // 提示错误信息
+      Message.error('网络错误，请稍后重试');
+    } else {
+      // 设置请求时发生了一些错误
+      console.error('Error:', error.message);
+
+      // 提示错误信息
+      Message.error('请求失败，请稍后重试');
+    }
+    // 返回一个带有错误信息的 Promise 对象
+    return Promise.reject(error);
+  }
+);
+

.history/src/utils/request_20231213094435.js

@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from 'axios'
+import { Message } from 'element-ui'; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: '', // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000 // 请求超时：当5s没有响应就会结束请求
+})
+ 
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error)
+  }
+)
+ 
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+        // 请求已发出，但服务器响应状态码不在 2xx 范围内
+        console.error('Error status:', error.response.status);
+        console.error('Error data:', error.response.data);
+        console.error('Error headers:', error.response.headers);
+  
+        // 提示错误信息
+        Message.error(`请求错误：${error.response.status}`);
+      } else if (error.request) {
+        // 请求被发出但未收到响应
+        console.error('No response received:', error.request);
+  
+        // 提示错误信息
+        Message.error('网络错误，请稍后重试');
+      } else {
+        // 设置请求时发生了一些错误
+        console.error('Error:', error.message);
+  
+        // 提示错误信息
+        Message.error('请求失败，请稍后重试');
+      }
+    return Promise.reject(error)
+  }
+)
+ 
+export default request

.history/src/utils/request_20231213094443.js

@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: "", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;

.history/src/utils/request_20231213095838.js

@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: "", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;