1 éve · c02eb05889
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+.DS_Store
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,7 @@
 
				+# Vue 3 + Vite
			
 
				+
			
 
				+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
			
 
				+
			
 
				+## Recommended IDE Setup
			
 
				+
			
 
				+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,25 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+    <title>大屏</title>
			
 
				+    <script src="/dist/h5player.min.js"></script>
			
 
				+      <style>
			
 
				+          /*.viewer-container {*/
			
 
				+          /*    width: 100vw;*/
			
 
				+          /*    height: 100vh;*/
			
 
				+          /*    position: absolute;*/
			
 
				+          /*    top: 0;*/
			
 
				+          /*    left: 0;*/
			
 
				+          /*    background-color: rgba(0, 0, 0, .8);*/
			
 
				+          /*    z-index: 99;*/
			
 
				+          /*}*/
			
 
				+      </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="app"></div>
			
 
				+    <script type="module" src="/src/main.js"></script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,44 @@
 
				+{
			
 
				+  "name": "huimvscreen",
			
 
				+  "private": true,
			
 
				+  "version": "0.0.0",
			
 
				+  "type": "module",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vite build",
			
 
				+    "preview": "vite preview"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "@ant-design/icons-vue": "^6.1.0",
			
 
				+    "@cloudgeek/playcore-hls": "^0.1.7",
			
 
				+    "@cloudgeek/vue3-video-player": "^0.3.10",
			
 
				+    "animate.css": "^4.1.1",
			
 
				+    "ant-design-vue": "^3.2.15",
			
 
				+    "axios": "^1.1.3",
			
 
				+    "echarts": "^5.4.0",
			
 
				+    "echarts-gl": "^2.0.9",
			
 
				+    "echarts-liquidfill": "^3.1.0",
			
 
				+    "konva": "^8.3.14",
			
 
				+    "less": "4.1.3",
			
 
				+    "less-loader": "11.1.3",
			
 
				+    "moment": "^2.29.4",
			
 
				+    "sm-crypto": "^0.3.13",
			
 
				+    "swiper": "^8.4.4",
			
 
				+    "unplugin-vue-components": "^0.24.0",
			
 
				+    "v-viewer": "3.0.11",
			
 
				+    "video.js": "7.19.2",
			
 
				+    "vite-plugin-style-import": "^2.0.0",
			
 
				+    "vue": "^3.2.37",
			
 
				+    "vue-router": "^4.1.5",
			
 
				+    "vue-seamless-scroll": "^1.1.23",
			
 
				+    "vue3-count-to": "^1.1.2",
			
 
				+    "vue3-seamless-scroll": "^2.0.1",
			
 
				+    "vue3-video-play": "^1.3.1-beta.6",
			
 
				+    "vuex": "^4.0.2"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vitejs/plugin-vue": "^3.1.0",
			
 
				+    "@zougt/vite-plugin-theme-preprocessor": "^1.4.8",
			
 
				+    "vite": "^3.1.0"
			
 
				+  }
			
 
				+}
			
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/static/jinm/image/siagn.png
+++ b/public/static/jinm/image/siagn.png
--- a/public/static/jinm/index.html
+++ b/public/static/jinm/index.html
@@ -0,0 +1,236 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>player</title>
			
 
				+<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>-->
			
 
				+<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/addons/p5.sound.min.js"></script>-->
			
 
				+<!--    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>-->
			
 
				+    <style>
			
 
				+      .sk-chase {
			
 
				+        width: 40px;
			
 
				+        height: 40px;
			
 
				+        position: absolute;
			
 
				+        top: 50%;
			
 
				+        left: 50%;
			
 
				+        transform: translate(-50%, -50%);
			
 
				+        display: block;
			
 
				+        animation: sk-chase 2.5s infinite linear both;
			
 
				+      }
			
 
				+      .sk_text {
			
 
				+          position: absolute;
			
 
				+          top: 40%;
			
 
				+          left: 50%;
			
 
				+          transform: translate(-50%, -50%);
			
 
				+          display: block;
			
 
				+          color: #fff;
			
 
				+      }
			
 
				+
			
 
				+      .sk-chase-dot {
			
 
				+        width: 100%;
			
 
				+        height: 100%;
			
 
				+        position: absolute;
			
 
				+        left: 0;
			
 
				+        top: 0;
			
 
				+        animation: sk-chase-dot 2.0s infinite ease-in-out both;
			
 
				+      }
			
 
				+
			
 
				+      .sk-chase-dot:before {
			
 
				+        content: '';
			
 
				+        display: block;
			
 
				+        width: 25%;
			
 
				+        height: 25%;
			
 
				+        background-color: #8cc5ff;
			
 
				+        border-radius: 100%;
			
 
				+        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
			
 
				+      }
			
 
				+
			
 
				+      .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
			
 
				+      .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
			
 
				+      .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
			
 
				+      .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
			
 
				+      .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
			
 
				+      .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
			
 
				+      .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
			
 
				+      .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
			
 
				+      .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
			
 
				+      .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
			
 
				+      .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
			
 
				+      .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
			
 
				+
			
 
				+      @keyframes sk-chase {
			
 
				+        100% { transform: rotate(360deg); }
			
 
				+      }
			
 
				+
			
 
				+      @keyframes sk-chase-dot {
			
 
				+        80%, 100% { transform: rotate(360deg); }
			
 
				+      }
			
 
				+
			
 
				+      @keyframes sk-chase-dot-before {
			
 
				+        50% {
			
 
				+          transform: scale(0.4);
			
 
				+        } 100%, 0% {
			
 
				+            transform: scale(1.0);
			
 
				+          }
			
 
				+      }
			
 
				+      #error_text {
			
 
				+          width: 170px;
			
 
				+          height: 170px;
			
 
				+          background: url("./image/siagn.png") no-repeat;
			
 
				+          background-size: 100%;
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          transform: translate(-50%, -50%);
			
 
				+          display: none;
			
 
				+      }
			
 
				+      body::-webkit-scrollbar {
			
 
				+          display: none;
			
 
				+      }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body style="margin: 0; width: 100%; text-align: center; z-index:999; background-color: transparent; overflow:hidden " >
			
 
				+    <video width="100%" id="video"></video>
			
 
				+    <canvas id="canvas"></canvas>
			
 
				+    <canvas id="draw"></canvas>
			
 
				+    <div id="sk_text" class="sk_text">视频加载中..</div>
			
 
				+    <div class="sk-chase">
			
 
				+      <div class="sk-chase-dot"></div>
			
 
				+      <div class="sk-chase-dot"></div>
			
 
				+      <div class="sk-chase-dot"></div>
			
 
				+      <div class="sk-chase-dot"></div>
			
 
				+      <div class="sk-chase-dot"></div>
			
 
				+      <div class="sk-chase-dot"></div>
			
 
				+    </div>
			
 
				+    <div id="error_text" ></div>
			
 
				+</body>
			
 
				+<script type="module">
			
 
				+    import Player from "./src/player.js";
			
 
				+    var clickTimeId;
			
 
				+    let str  = location.href;
			
 
				+    let num = str.indexOf('?');
			
 
				+    str = str.substr(num+1);
			
 
				+    let data = str.split(',');
			
 
				+    let isShow = Number(data[0]);
			
 
				+    let key = data[4];
			
 
				+    let video = document.getElementsByTagName('body')[0];
			
 
				+    let height = video.clientHeight;
			
 
				+
			
 
				+    // 定时器
			
 
				+    let timer = null;
			
 
				+    let count = 0;
			
 
				+    video.dblclick = function () {
			
 
				+    };
			
 
				+    function onDocumentClick(event) {
			
 
				+        // 取消上次延时未执行的方法
			
 
				+        clearTimeout(clickTimeId);
			
 
				+        //执行延时
			
 
				+        clickTimeId = setTimeout(function() {
			
 
				+            //此处为单击事件要执行的代码
			
 
				+            console.log("鼠标单击");
			
 
				+        }, 250);
			
 
				+    }
			
 
				+    function onDocumenDblClick(event) {
			
 
				+        // 取消上次延时未执行的方法
			
 
				+        clearTimeout(clickTimeId);
			
 
				+        console.log("鼠标双击");
			
 
				+      // isFullscreenEnabled();
			
 
				+      let video = document.getElementById('video');
			
 
				+
			
 
				+        if (video.requestFullscreen) { //w3c
			
 
				+          console.log(video.requestFullscreen);
			
 
				+          console.log(video.requestFullscreen());
			
 
				+          video.requestFullscreen();
			
 
				+        } else if (video.mozRequestFullScreen) { //moz Firefox
			
 
				+          video.mozRequestFullScreen();
			
 
				+        } else if (video.msRequestFullscreen) { //IE
			
 
				+          video.msRequestFullscreen();
			
 
				+        } else if (video.oRequestFullscreen) { //Opera
			
 
				+          video.oRequestFullscreen();
			
 
				+        } else if (video.webkitRequestFullscreen) { //webkit内核 Chrome Safari
			
 
				+          video.webkitRequestFullScreen();
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    // close.onclick = function () {
			
 
				+    //   let video = document.getElementById('bodySng');
			
 
				+    // }
			
 
				+
			
 
				+    // function isFullscreenEnabled() {
			
 
				+    //   return  (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
			
 
				+    // }
			
 
				+    const options = {
			
 
				+        video: document.getElementById('video'),
			
 
				+        canvas: document.getElementById('canvas'),
			
 
				+        drawer: document.getElementById('draw'),
			
 
				+        // wsUrl:'ws://111.2.71.225:10080/camera_relay?tcpaddr=admin%3Ahmkj6688%40192.168.1.144',
			
 
				+        // rtspUrl: 'rtsp://admin:hmkj6688@192.168.1.144',
			
 
				+        user: '',
			
 
				+        pwd: ''
			
 
				+    };
			
 
				+    options.wsUrl = data[1];
			
 
				+    options.rtspUrl = data[2];
			
 
				+    let player = new Player(options);
			
 
				+    player.init();
			
 
				+    player.on('error', function () {
			
 
				+      clearInterval(timer)
			
 
				+        console.log('连接失败')
			
 
				+      let er = document.getElementById('error_text');
			
 
				+      er.style.display = 'block';
			
 
				+      // er.style.lineHeight = height + 'px';
			
 
				+      er.style.lineHeight = height + 'px';
			
 
				+
			
 
				+    });
			
 
				+    player.on('noStream', function () {
			
 
				+        console.log('noStream');
			
 
				+        player.close();
			
 
				+        player = null;
			
 
				+        player = new Player(options);
			
 
				+        player.init();
			
 
				+        player.connect();
			
 
				+    });
			
 
				+    // 首次播放
			
 
				+    player.on('canplay', function () {
			
 
				+      clearInterval(timer)
			
 
				+      let sk = document.getElementsByClassName('sk-chase')[0];
			
 
				+      sk.style.display = 'none';
			
 
				+
			
 
				+      let text = document.getElementById('sk_text');
			
 
				+      text.style.display = 'none';
			
 
				+    });
			
 
				+
			
 
				+    player.on('initialCompleted', function () {
			
 
				+    });
			
 
				+
			
 
				+    player.on('ROIFinished', function () {
			
 
				+       console.log('ROIFinished');
			
 
				+    });
			
 
				+
			
 
				+    player.connect();
			
 
				+
			
 
				+    window.onload = function() {
			
 
				+      document.addEventListener('dblclick', onDocumenDblClick);
			
 
				+    };
			
 
				+
			
 
				+    timer = setInterval(() => {
			
 
				+      count++;
			
 
				+      if(count > 5) {
			
 
				+        player.close();
			
 
				+        count = 0;
			
 
				+        let er = document.getElementById('error_text');
			
 
				+        er.style.display = 'block';
			
 
				+        er.style.lineHeight = height + 'px';
			
 
				+        let sk = document.getElementsByClassName('sk-chase')[0];
			
 
				+        sk.style.display = 'none';
			
 
				+
			
 
				+        let text = document.getElementById('sk_text');
			
 
				+        text.style.display = 'none';
			
 
				+        clearInterval(timer)
			
 
				+      }
			
 
				+    }, 1000)
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+</html>
			
--- a/public/static/jinm/src/H264SPSParser.js
+++ b/public/static/jinm/src/H264SPSParser.js
@@ -0,0 +1,387 @@
 
				+//import Map from './Map.js';
			
 
				+
			
 
				+let BITWISE0x00000007 = 0x00000007;
			
 
				+let BITWISE0x7 = 0x7;
			
 
				+let BITWISE2 = 2;
			
 
				+let BITWISE3 = 3;
			
 
				+let BITWISE4 = 4;
			
 
				+let BITWISE5 = 5;
			
 
				+let BITWISE6 = 6;
			
 
				+let BITWISE8 = 8;
			
 
				+let BITWISE12 = 12;
			
 
				+let BITWISE15 = 15;
			
 
				+let BITWISE16 = 16;
			
 
				+let BITWISE32 = 32;
			
 
				+let BITWISE64 = 64;
			
 
				+let BITWISE255 = 255;
			
 
				+let BITWISE256 = 256;
			
 
				+
			
 
				+function H264SPSParser() {
			
 
				+    let vBitCount = 0;
			
 
				+    let spsMap = null;
			
 
				+    let fps = null;
			
 
				+
			
 
				+
			
 
				+    function constructor() {
			
 
				+        spsMap = new Map();
			
 
				+    }
			
 
				+
			
 
				+    constructor.prototype = {
			
 
				+        parse (pSPSBytes) {
			
 
				+            //console.log("=========================SPS START=========================");
			
 
				+            vBitCount = 0;
			
 
				+            spsMap.clear();
			
 
				+
			
 
				+            // forbidden_zero_bit, nal_ref_idc, nal_unit_type
			
 
				+            spsMap.set("forbidden_zero_bit", readBits(pSPSBytes, 1));
			
 
				+            spsMap.set("nal_ref_idc", readBits(pSPSBytes, BITWISE2));
			
 
				+            spsMap.set("nal_unit_type", readBits(pSPSBytes, BITWISE5));
			
 
				+
			
 
				+            // profile_idc
			
 
				+            spsMap.set("profile_idc", readBits(pSPSBytes, BITWISE8));
			
 
				+            spsMap.set("profile_compatibility", readBits(pSPSBytes, BITWISE8));
			
 
				+
			
 
				+            // spsMap.set("constrained_set0_flag", readBits(pSPSBytes, 1));
			
 
				+            // spsMap.set("constrained_set1_flag", readBits(pSPSBytes, 1));
			
 
				+            // spsMap.set("constrained_set2_flag", readBits(pSPSBytes, 1));
			
 
				+            // spsMap.set("constrained_set3_flag", readBits(pSPSBytes, 1));
			
 
				+            // spsMap.set("constrained_set4_flag", readBits(pSPSBytes, 1));
			
 
				+            // spsMap.set("constrained_set5_flag", readBits(pSPSBytes, 1));
			
 
				+            // spsMap.set("reserved_zero_2bits", readBits(pSPSBytes, 2));
			
 
				+
			
 
				+            // level_idc
			
 
				+            spsMap.set("level_idc", readBits(pSPSBytes, BITWISE8));
			
 
				+            spsMap.set("seq_parameter_set_id", ue(pSPSBytes, 0));
			
 
				+
			
 
				+            let profileIdc = spsMap.get("profile_idc");
			
 
				+            let BITWISE100 = 100;
			
 
				+            let BITWISE110 = 110;
			
 
				+            let BITWISE122 = 122;
			
 
				+            let BITWISE244 = 244;
			
 
				+            let BITWISE44 = 44;
			
 
				+            let BITWISE83 = 83;
			
 
				+            let BITWISE86 = 86;
			
 
				+            let BITWISE118 = 118;
			
 
				+            let BITWISE128 = 128;
			
 
				+            let BITWISE138 = 138;
			
 
				+            let BITWISE139 = 139;
			
 
				+            let BITWISE134 = 134;
			
 
				+
			
 
				+            if ((profileIdc === BITWISE100) || (profileIdc === BITWISE110) ||
			
 
				+                (profileIdc === BITWISE122) || (profileIdc === BITWISE244) ||
			
 
				+                (profileIdc === BITWISE44) || (profileIdc === BITWISE83) ||
			
 
				+                (profileIdc === BITWISE86) || (profileIdc === BITWISE118) ||
			
 
				+                (profileIdc === BITWISE128) || (profileIdc === BITWISE138) ||
			
 
				+                (profileIdc === BITWISE139) || (profileIdc === BITWISE134)) {
			
 
				+                spsMap.set("chroma_format_idc", ue(pSPSBytes, 0));
			
 
				+                if (spsMap.get("chroma_format_idc") === BITWISE3) {
			
 
				+                    spsMap.set("separate_colour_plane_flag", readBits(pSPSBytes, 1));
			
 
				+                }
			
 
				+
			
 
				+                spsMap.set("bit_depth_luma_minus8", ue(pSPSBytes, 0));
			
 
				+                spsMap.set("bit_depth_chroma_minus8", ue(pSPSBytes, 0));
			
 
				+                spsMap.set("qpprime_y_zero_transform_bypass_flag", readBits(pSPSBytes, 1));
			
 
				+                spsMap.set("seq_scaling_matrix_present_flag", readBits(pSPSBytes, 1));
			
 
				+
			
 
				+                if (spsMap.get("seq_scaling_matrix_present_flag")) {
			
 
				+                    let num = spsMap.get("chroma_format_idc") !== BITWISE3 ? BITWISE8 : BITWISE12;
			
 
				+                    let seqScalingListPresentFlag = new Array(num);
			
 
				+                    for (let i = 0; i < num; i++) {
			
 
				+                        seqScalingListPresentFlag[i] = readBits(pSPSBytes, 1);
			
 
				+
			
 
				+                        if (seqScalingListPresentFlag[i]) {
			
 
				+                            let slNumber = i < BITWISE6 ? BITWISE16 : BITWISE64;
			
 
				+                            let lastScale = 8;
			
 
				+                            let nextScale = 8;
			
 
				+                            let deltaScale = 0;
			
 
				+
			
 
				+                            for (let j = 0; j < slNumber; j++) {
			
 
				+                                if (nextScale) {
			
 
				+                                    deltaScale = se(pSPSBytes, 0);
			
 
				+                                    nextScale = (lastScale + deltaScale + BITWISE256) % BITWISE256;
			
 
				+                                }
			
 
				+                                lastScale = (nextScale === 0) ? lastScale : nextScale;
			
 
				+                            }
			
 
				+                        }
			
 
				+                    }
			
 
				+                    spsMap.set("seq_scaling_list_present_flag", seqScalingListPresentFlag);
			
 
				+                }
			
 
				+            }
			
 
				+            spsMap.set("log2_max_frame_num_minus4", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("pic_order_cnt_type", ue(pSPSBytes, 0));
			
 
				+
			
 
				+            if (spsMap.get("pic_order_cnt_type") === 0) {
			
 
				+                spsMap.set("log2_max_pic_order_cnt_lsb_minus4", ue(pSPSBytes, 0));
			
 
				+            } else if (spsMap.get("pic_order_cnt_type") === 1) {
			
 
				+                spsMap.set("delta_pic_order_always_zero_flag", readBits(pSPSBytes, 1));
			
 
				+                spsMap.set("offset_for_non_ref_pic", se(pSPSBytes, 0));
			
 
				+                spsMap.set("offset_for_top_to_bottom_field", se(pSPSBytes, 0));
			
 
				+                spsMap.set("num_ref_frames_in_pic_order_cnt_cycle", ue(pSPSBytes, 0));
			
 
				+                for (let numR = 0; numR < spsMap.get("num_ref_frames_in_pic_order_cnt_cycle"); numR++) {
			
 
				+                    spsMap.set("num_ref_frames_in_pic_order_cnt_cycle", se(pSPSBytes, 0));
			
 
				+                }
			
 
				+            }
			
 
				+            spsMap.set("num_ref_frames", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("gaps_in_frame_num_value_allowed_flag", readBits(pSPSBytes, 1));
			
 
				+            spsMap.set("pic_width_in_mbs_minus1", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("pic_height_in_map_units_minus1", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("frame_mbs_only_flag", readBits(pSPSBytes, 1));
			
 
				+
			
 
				+            if (spsMap.get("frame_mbs_only_flag") === 0) {
			
 
				+                spsMap.set("mb_adaptive_frame_field_flag", readBits(pSPSBytes, 1));
			
 
				+            }
			
 
				+            spsMap.set("direct_8x8_interence_flag", readBits(pSPSBytes, 1));
			
 
				+            spsMap.set("frame_cropping_flag", readBits(pSPSBytes, 1));
			
 
				+            if (spsMap.get("frame_cropping_flag") === 1) {
			
 
				+                spsMap.set("frame_cropping_rect_left_offset", ue(pSPSBytes, 0));
			
 
				+                spsMap.set("frame_cropping_rect_right_offset", ue(pSPSBytes, 0));
			
 
				+                spsMap.set("frame_cropping_rect_top_offset", ue(pSPSBytes, 0));
			
 
				+                spsMap.set("frame_cropping_rect_bottom_offset", ue(pSPSBytes, 0));
			
 
				+            }
			
 
				+
			
 
				+            //vui parameters
			
 
				+            spsMap.set("vui_parameters_present_flag", readBits(pSPSBytes, 1));
			
 
				+            if (spsMap.get("vui_parameters_present_flag")) {
			
 
				+                vuiParameters(pSPSBytes);
			
 
				+            }
			
 
				+
			
 
				+            //console.log("=========================SPS END=========================");
			
 
				+
			
 
				+
			
 
				+            return true;
			
 
				+        },
			
 
				+        getSizeInfo () {
			
 
				+            let SubWidthC = 0;
			
 
				+            let SubHeightC = 0;
			
 
				+
			
 
				+            if (spsMap.get("chroma_format_idc") === 0) { //monochrome
			
 
				+                SubWidthC = SubHeightC = 0;
			
 
				+            } else if (spsMap.get("chroma_format_idc") === 1) { //4:2:0
			
 
				+                SubWidthC = SubHeightC = BITWISE2;
			
 
				+            } else if (spsMap.get("chroma_format_idc") === BITWISE2) { //4:2:2
			
 
				+                SubWidthC = BITWISE2;
			
 
				+                SubHeightC = 1;
			
 
				+            } else if (spsMap.get("chroma_format_idc") === BITWISE3) { //4:4:4
			
 
				+                if (spsMap.get("separate_colour_plane_flag") === 0) {
			
 
				+                    SubWidthC = SubHeightC = 1;
			
 
				+                } else if (spsMap.get("separate_colour_plane_flag") === 1) {
			
 
				+                    SubWidthC = SubHeightC = 0;
			
 
				+                }
			
 
				+            }
			
 
				+
			
 
				+            let PicWidthInMbs = spsMap.get("pic_width_in_mbs_minus1") + 1;
			
 
				+
			
 
				+            let PicHeightInMapUnits = spsMap.get("pic_height_in_map_units_minus1") + 1;
			
 
				+            let FrameHeightInMbs = (BITWISE2 - spsMap.get("frame_mbs_only_flag")) * PicHeightInMapUnits;
			
 
				+
			
 
				+            let cropLeft = 0;
			
 
				+            let cropRight = 0;
			
 
				+            let cropTop = 0;
			
 
				+            let cropBottom = 0;
			
 
				+
			
 
				+            if (spsMap.get("frame_cropping_flag") === 1) {
			
 
				+                cropLeft = spsMap.get("frame_cropping_rect_left_offset");
			
 
				+                cropRight = spsMap.get("frame_cropping_rect_right_offset");
			
 
				+                cropTop = spsMap.get("frame_cropping_rect_top_offset");
			
 
				+                cropBottom = spsMap.get("frame_cropping_rect_bottom_offset");
			
 
				+            }
			
 
				+            let decodeSize = (PicWidthInMbs * BITWISE16) * (FrameHeightInMbs * BITWISE16);
			
 
				+            let width = (PicWidthInMbs * BITWISE16) - (SubWidthC * (cropLeft + cropRight));
			
 
				+            let height = (FrameHeightInMbs * BITWISE16) -
			
 
				+                (SubHeightC * (BITWISE2 - spsMap.get("frame_mbs_only_flag")) * (cropTop + cropBottom));
			
 
				+
			
 
				+            let sizeInfo = {
			
 
				+                'width': width,
			
 
				+                'height': height,
			
 
				+                'decodeSize': decodeSize,
			
 
				+            };
			
 
				+
			
 
				+            return sizeInfo;
			
 
				+        },
			
 
				+        getSpsValue (key) {
			
 
				+            return spsMap.get(key);
			
 
				+        },
			
 
				+        getCodecInfo () {
			
 
				+            let profileIdc = spsMap.get("profile_idc").toString(BITWISE16);
			
 
				+            let profileCompatibility = spsMap.get("profile_compatibility") < BITWISE15 ?
			
 
				+                "0" + spsMap.get("profile_compatibility").toString(BITWISE16) :
			
 
				+                spsMap.get("profile_compatibility").toString(BITWISE16);
			
 
				+
			
 
				+            let levelIdc = spsMap.get("level_idc").toString(BITWISE16);
			
 
				+
			
 
				+            //console.log("getCodecInfo = " + (profile_idc + profile_compatibility + level_idc));
			
 
				+            return profileIdc + profileCompatibility + levelIdc;
			
 
				+
			
 
				+        },
			
 
				+
			
 
				+        getSpsMap() {
			
 
				+            return spsMap;
			
 
				+        },
			
 
				+
			
 
				+        getFPS() {
			
 
				+            return fps;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    return new constructor();
			
 
				+
			
 
				+    function getBit(base, offset) {
			
 
				+        let offsetData = offset;
			
 
				+        let vCurBytes = (vBitCount + offsetData) >> BITWISE3;
			
 
				+        offsetData = (vBitCount + offset) & BITWISE0x00000007;
			
 
				+        return (((base[(vCurBytes)])) >> (BITWISE0x7 - (offsetData & BITWISE0x7))) & 0x1;
			
 
				+    }
			
 
				+
			
 
				+    function readBits(pBuf, vReadBits) {
			
 
				+        let vOffset = 0;
			
 
				+        let vTmp = 0,
			
 
				+            vTmp2 = 0;
			
 
				+
			
 
				+        if (vReadBits === 1) {
			
 
				+            vTmp = getBit(pBuf, vOffset);
			
 
				+        } else {
			
 
				+            for (let i = 0; i < vReadBits; i++) {
			
 
				+                vTmp2 = getBit(pBuf, i);
			
 
				+                vTmp = (vTmp << 1) + vTmp2;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        vBitCount += vReadBits;
			
 
				+        return vTmp;
			
 
				+    }
			
 
				+
			
 
				+    function ue(base, offset) {
			
 
				+        let zeros = 0,
			
 
				+            vTmp = 0,
			
 
				+            vReturn = 0;
			
 
				+        let vIdx = offset;
			
 
				+        do {
			
 
				+            vTmp = getBit(base, vIdx++);
			
 
				+            if (vTmp === 0) {
			
 
				+                zeros++;
			
 
				+            }
			
 
				+        } while (0 === vTmp);
			
 
				+
			
 
				+        if (zeros === 0) {
			
 
				+            vBitCount += 1;
			
 
				+            return 0;
			
 
				+        }
			
 
				+
			
 
				+        vReturn = 1 << zeros;
			
 
				+
			
 
				+        for (let i = zeros - 1; i >= 0; i--, vIdx++) {
			
 
				+            vTmp = getBit(base, vIdx);
			
 
				+            vReturn |= vTmp << i;
			
 
				+        }
			
 
				+
			
 
				+        let addBitCount = (zeros * BITWISE2) + 1;
			
 
				+        vBitCount += addBitCount;
			
 
				+
			
 
				+        return (vReturn - 1);
			
 
				+    }
			
 
				+
			
 
				+    function se(base, offset) {
			
 
				+        let vReturn = ue(base, offset);
			
 
				+
			
 
				+        if (vReturn & 0x1) {
			
 
				+            return (vReturn + 1) / BITWISE2;
			
 
				+        } else {
			
 
				+            return -vReturn / BITWISE2;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    function hrdParameters(pSPSBytes) {
			
 
				+        spsMap.set("cpb_cnt_minus1", ue(pSPSBytes, 0));
			
 
				+        spsMap.set("bit_rate_scale", readBits(pSPSBytes, BITWISE4));
			
 
				+        spsMap.set("cpb_size_scale", readBits(pSPSBytes, BITWISE4));
			
 
				+        let cpdCntMinus1 = spsMap.get("cpb_cnt_minus1");
			
 
				+        let bitRateValueMinus1 = new Array(cpdCntMinus1);
			
 
				+        let cpbSizeValueMinus1 = new Array(cpdCntMinus1);
			
 
				+        let cbrFlag = new Array(cpdCntMinus1);
			
 
				+        //Todo: 原本为i <= cpdCntMinus1，运行到此处时直接停住，原因不明，改为<后正常
			
 
				+        for (let i = 0; i < cpdCntMinus1; i++) {
			
 
				+            bitRateValueMinus1[i] = ue(pSPSBytes, 0);
			
 
				+            cpbSizeValueMinus1[i] = ue(pSPSBytes, 0);
			
 
				+            cbrFlag[i] = readBits(pSPSBytes, 1);
			
 
				+        }
			
 
				+        spsMap.set("bit_rate_value_minus1", bitRateValueMinus1);
			
 
				+        spsMap.set("cpb_size_value_minus1", cpbSizeValueMinus1);
			
 
				+        spsMap.set("cbr_flag", cbrFlag);
			
 
				+
			
 
				+        spsMap.set("initial_cpb_removal_delay_length_minus1", readBits(pSPSBytes, BITWISE4));
			
 
				+        spsMap.set("cpb_removal_delay_length_minus1", readBits(pSPSBytes, BITWISE4));
			
 
				+        spsMap.set("dpb_output_delay_length_minus1", readBits(pSPSBytes, BITWISE4));
			
 
				+        spsMap.set("time_offset_length", readBits(pSPSBytes, BITWISE4));
			
 
				+    }
			
 
				+
			
 
				+    function vuiParameters(pSPSBytes) {
			
 
				+        spsMap.set("aspect_ratio_info_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("aspect_ratio_info_present_flag")) {
			
 
				+            spsMap.set("aspect_ratio_idc", readBits(pSPSBytes, BITWISE8));
			
 
				+            //Extended_SAR
			
 
				+            if (spsMap.get("aspect_ratio_idc") === BITWISE255) {
			
 
				+                spsMap.set("sar_width", readBits(pSPSBytes, BITWISE16));
			
 
				+                spsMap.set("sar_height", readBits(pSPSBytes, BITWISE16));
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        spsMap.set("overscan_info_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("overscan_info_present_flag")) {
			
 
				+            spsMap.set("overscan_appropriate_flag", readBits(pSPSBytes, 1));
			
 
				+        }
			
 
				+        spsMap.set("video_signal_type_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("video_signal_type_present_flag")) {
			
 
				+            spsMap.set("video_format", readBits(pSPSBytes, BITWISE3));
			
 
				+            spsMap.set("video_full_range_flag", readBits(pSPSBytes, 1));
			
 
				+            spsMap.set("colour_description_present_flag", readBits(pSPSBytes, 1));
			
 
				+            if (spsMap.get("colour_description_present_flag")) {
			
 
				+                spsMap.set("colour_primaries", readBits(pSPSBytes, BITWISE8));
			
 
				+                spsMap.set("transfer_characteristics", readBits(pSPSBytes, BITWISE8));
			
 
				+                spsMap.set("matrix_coefficients", readBits(pSPSBytes, BITWISE8));
			
 
				+            }
			
 
				+        }
			
 
				+        spsMap.set("chroma_loc_info_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("chroma_loc_info_present_flag")) {
			
 
				+            spsMap.set("chroma_sample_loc_type_top_field", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("chroma_sample_loc_type_bottom_field", ue(pSPSBytes, 0));
			
 
				+        }
			
 
				+        spsMap.set("timing_info_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("timing_info_present_flag")) {
			
 
				+            spsMap.set("num_units_in_tick", readBits(pSPSBytes, BITWISE32));
			
 
				+            spsMap.set("time_scale", readBits(pSPSBytes, BITWISE32));
			
 
				+            spsMap.set("fixed_frame_rate_flag", readBits(pSPSBytes, 1));
			
 
				+
			
 
				+            fps =  spsMap.get("time_scale") / spsMap.get("num_units_in_tick");
			
 
				+            if(spsMap.get("fixed_frame_rate_flag")) {
			
 
				+                fps = fps / 2;
			
 
				+            }
			
 
				+        }
			
 
				+        spsMap.set("nal_hrd_parameters_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("nal_hrd_parameters_present_flag")) {
			
 
				+            hrdParameters(pSPSBytes);
			
 
				+        }
			
 
				+        spsMap.set("vcl_hrd_parameters_present_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("vcl_hrd_parameters_present_flag")) {
			
 
				+            hrdParameters(pSPSBytes);
			
 
				+        }
			
 
				+        if (spsMap.get("nal_hrd_parameters_present_flag") ||
			
 
				+            spsMap.get("vcl_hrd_parameters_present_flag")) {
			
 
				+            spsMap.set("low_delay_hrd_flag", readBits(pSPSBytes, 1));
			
 
				+        }
			
 
				+        spsMap.set("pic_struct_present_flag", readBits(pSPSBytes, 1));
			
 
				+        spsMap.set("bitstream_restriction_flag", readBits(pSPSBytes, 1));
			
 
				+        if (spsMap.get("bitstream_restriction_flag")) {
			
 
				+            spsMap.set("motion_vectors_over_pic_boundaries_flag", readBits(pSPSBytes, 1));
			
 
				+            spsMap.set("max_bytes_per_pic_denom", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("max_bits_per_mb_denom", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("log2_max_mv_length_horizontal", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("log2_max_mv_length_vertical", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("max_num_reorder_frames", ue(pSPSBytes, 0));
			
 
				+            spsMap.set("max_dec_frame_buffering", ue(pSPSBytes, 0));
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+//export default H264SPSParser;
			
--- a/public/static/jinm/src/H264Session.js
+++ b/public/static/jinm/src/H264Session.js
@@ -0,0 +1,667 @@
 
				+function H264Session() {
			
 
				+    let rtpTimeStamp = 0;
			
 
				+    let size1M = 1048576; //1024 * 1024
			
 
				+    let inputBuffer = new Uint8Array(size1M);
			
 
				+    let spsSegment = null;
			
 
				+    let ppsSegment = null;
			
 
				+
			
 
				+    let SPSParser = null;
			
 
				+
			
 
				+    let width = 0;
			
 
				+    let height = 0;
			
 
				+    let inputLength = 0;
			
 
				+
			
 
				+    let initalSegmentFlag = true; //用于确定是否是initSegment
			
 
				+    let initalMediaFrameFlag = true;
			
 
				+
			
 
				+    let frameRate = null; //根据SDP或者SPS设置
			
 
				+    let preSample = null; //上一个Sample
			
 
				+    let durationTimeCount = 0;
			
 
				+    let frameCount = 0;
			
 
				+    let inputSegBufferSub = null;
			
 
				+
			
 
				+    //MSE使用的数据以及相关配置，顺序codecInfo -> initSegmentData -> mediaSample -> frameData
			
 
				+    //时间戳用于绘制人脸框
			
 
				+    let decodedData = {
			
 
				+        frameData: null, //视频数据
			
 
				+        timeStamp: null, //时间戳
			
 
				+        initSegmentData: null, //MP4配置,用于initsegment
			
 
				+        mediaSample: null, //使用duration控制每一帧的播放时间
			
 
				+        codecInfo: "", //MSE init时传入，用于创建mediasource
			
 
				+    };
			
 
				+    let FRAMETYPE = {
			
 
				+        1: 'P',
			
 
				+        5: 'I',
			
 
				+        6: 'SEI',
			
 
				+        7: 'I'
			
 
				+    };
			
 
				+    let frameType = '';
			
 
				+    let decodeMode = 'video';
			
 
				+    let outputSize = 0;
			
 
				+    let curSize = 0;
			
 
				+
			
 
				+    const PREFIX = new Uint8Array(['0x00', '0x00', '0x00', '0x01']);
			
 
				+
			
 
				+    let firstIframe = false;
			
 
				+
			
 
				+    let SEIInfo = {
			
 
				+        ivs: null,
			
 
				+        timestamp: null,
			
 
				+    };
			
 
				+
			
 
				+    let preWidth = null,
			
 
				+        preHeight = null;
			
 
				+    let resetTimeCount = 0;
			
 
				+    let lastTimeStamp = 0;
			
 
				+    //const RESETTIME = 162000000;
			
 
				+    const RESETTIME = 4320000;
			
 
				+    let SEIBuffer = null;
			
 
				+    let lastSEITime = 0;
			
 
				+
			
 
				+    function constructor() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    constructor.prototype = {
			
 
				+        init() {
			
 
				+            SPSParser = new H264SPSParser();
			
 
				+            this.resolutionChangedCallback = () => {
			
 
				+            };
			
 
				+        },
			
 
				+
			
 
				+        remuxRTPData(rtspInterleaved, rtpHeader, rtpPayload) {
			
 
				+            //console.log(rtspInterleaved)
			
 
				+            //console.log(rtpHeader)
			
 
				+            let PaddingSize = 0;
			
 
				+            let extensionHeaderLen = 0; //如果RtpHeader.X=1，则在RTP报头后跟有一个扩展报头
			
 
				+            let PAYLOAD = null;
			
 
				+//console.log(rtpHeader)
			
 
				+//console.log(rtspInterleaved, rtpHeader, rtpPayload.subarray(0,5))
			
 
				+            let RtpHeader = {
			
 
				+                V: rtpHeader[0] >>> 6,
			
 
				+                P: rtpHeader[0] & 0x20,
			
 
				+                X: rtpHeader[0] & 0x10,
			
 
				+                CC: rtpHeader[0] & 0x0F,
			
 
				+                M: (rtpHeader[1] & 0x80) >> 7,
			
 
				+                PT: rtpHeader[1] & 127,
			
 
				+                SN: (rtpHeader[2] << 8) + rtpHeader[3],
			
 
				+                timeStamp: (rtpHeader[4] << 24) + (rtpHeader[5] << 16) + (rtpHeader[6] << 8) + rtpHeader[7],
			
 
				+                SSRC: (rtpHeader[8] << 24) + (rtpHeader[9] << 16) + (rtpHeader[10] << 8) + rtpHeader[11],
			
 
				+            };
			
 
				+            if (RtpHeader.P) { //填充
			
 
				+                PaddingSize = rtpPayload[rtpPayload.length - 1];
			
 
				+                console.log("Padding - " + PaddingSize);
			
 
				+            }
			
 
				+
			
 
				+            if (RtpHeader.X) { //扩展
			
 
				+                extensionHeaderLen = (((rtpPayload[2] << 8) | rtpPayload[3]) * 4) + 4;
			
 
				+                console.log('X: ' + rtpPayload[0])
			
 
				+            }
			
 
				+//console.log('extensionHeaderLen: '+ extensionHeaderLen)
			
 
				+            PAYLOAD = rtpPayload.subarray(extensionHeaderLen, rtpPayload.length - PaddingSize);
			
 
				+            rtpTimeStamp = RtpHeader.timeStamp;
			
 
				+
			
 
				+            //console.log(rtpTimeStamp, rtpHeader[4], rtpHeader[5], rtpHeader[6] , rtpHeader[7], PAYLOAD[0] & 0x1f)
			
 
				+            /* 载荷结构(https://blog.csdn.net/davebobo/article/details/52994596)
			
 
				+            +---------------+
			
 
				+            |0|1|2|3|4|5|6|7|
			
 
				+            +-+-+-+-+-+-+-+-+
			
 
				+            |F|NRI|  Type   |
			
 
				+            +---------------+
			
 
				+            Type = 1-23 单个NAL单元包
			
 
				+            Type = 24,25, 26, 27聚合包
			
 
				+            Type = 28，29, 分片单元
			
 
				+            */
			
 
				+            //console.log(rtspInterleaved,rtpHeader, PAYLOAD[0]);
			
 
				+            let nalType = (PAYLOAD[0] & 0x1f);
			
 
				+            //console.log(PAYLOAD[0] + ' nalType: ' + nalType);
			
 
				+
			
 
				+//console.log('rtpPayload.length: ' + rtpPayload.length)
			
 
				+//console.log(nalType, PAYLOAD[0])
			
 
				+//console.log('nalType: ' + nalType, RtpHeader.M)
			
 
				+            switch (nalType) {
			
 
				+                case 6: //SEI
			
 
				+                    //console.log(PAYLOAD, String.fromCharCode.apply(null, PAYLOAD))
			
 
				+                    if (SEIParse(PAYLOAD) === null) {
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
			
 
				+                    break;
			
 
				+                case 7: //SPS
			
 
				+                    //console.log('SPS');
			
 
				+                    SPSParser.parse(removeH264or5EmulationBytes(PAYLOAD));
			
 
				+                    let sizeInfo = SPSParser.getSizeInfo();
			
 
				+                    //console.log(SPSParser.getSpsMap())
			
 
				+                    width = sizeInfo.width;
			
 
				+                    height = sizeInfo.height;
			
 
				+
			
 
				+                    if (preWidth !== width || preHeight !== height) {
			
 
				+                        console.log('resolution changed!');
			
 
				+                        console.log('preWidth: ', preWidth, ' preHeight: ', preHeight, ' width: ', width, ' height: ', height);
			
 
				+                        preWidth = width;
			
 
				+                        preHeight = height;
			
 
				+                    }
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
			
 
				+                    spsSegment = PAYLOAD;
			
 
				+                    //console.log('width： ',width, 'height: ', height)
			
 
				+                    curSize = sizeInfo.decodeSize;
			
 
				+                    firstIframe = true;
			
 
				+//console.log(spsSegment)
			
 
				+                    if (frameRate === null) {
			
 
				+                        frameRate = SPSParser.getFPS();
			
 
				+                    }
			
 
				+                    break;
			
 
				+                case 8: //PPS
			
 
				+                    //console.log('PPS')
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
			
 
				+                    ppsSegment = PAYLOAD;
			
 
				+//console.log(ppsSegment)
			
 
				+                    break;
			
 
				+                case 28: //FU
			
 
				+                    //console.log('FU');
			
 
				+                    let startBit = ((PAYLOAD[1] & 0x80) === 0x80),
			
 
				+                        endBit = ((PAYLOAD[1] & 0x40) === 0x40),
			
 
				+                        fuType = PAYLOAD[1] & 0x1f,
			
 
				+                        payloadStartIndex = 2;
			
 
				+                    //console.log('startBit: ' + startBit + ' endBit: ' + endBit)
			
 
				+                    //console.log('fuType: ' + fuType)
			
 
				+                    if (startBit === true && endBit === false) {
			
 
				+                        let newNalHeader = new Uint8Array(1);
			
 
				+                        newNalHeader[0] = ((PAYLOAD[0] & 0xe0) | fuType);
			
 
				+                        //console.log('newNalHeader： ', newNalHeader[0])
			
 
				+                        //console.log('fuType: ' + fuType)
			
 
				+                        //console.log((PAYLOAD[2] << 8) + PAYLOAD[3])
			
 
				+//console.log(new Uint8Array(PAYLOAD.subarray(0, 100)));
			
 
				+                        if (false) { //赛兰摄像头，SPS,PPS,I帧打在一个RTP包中
			
 
				+                            PAYLOAD[1] = newNalHeader[0];
			
 
				+                            SPSParser.parse(removeH264or5EmulationBytes(PAYLOAD.subarray(1, 27)));
			
 
				+                            let sizeInfo = SPSParser.getSizeInfo();
			
 
				+//console.log(sizeInfo, SPSParser.getSpsMap())
			
 
				+                            //SPS
			
 
				+                            width = sizeInfo.width;
			
 
				+                            height = sizeInfo.height;
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(1, 27));
			
 
				+                            spsSegment = PAYLOAD.subarray(1, 27);
			
 
				+                            //console.log('width： ',width, 'height: ', height)
			
 
				+                            curSize = sizeInfo.decodeSize;
			
 
				+                            firstIframe = true;
			
 
				+
			
 
				+                            //PPS
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(30, 34));
			
 
				+                            ppsSegment = PAYLOAD.subarray(30, 34);
			
 
				+
			
 
				+                            //I
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(38, PAYLOAD.length));
			
 
				+
			
 
				+                        } else {
			
 
				+                            //console.log(newNalHeader[0] & 0x1f)
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                            inputBuffer = setBuffer(inputBuffer, newNalHeader);
			
 
				+                            inputBuffer = setBuffer(inputBuffer, PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
			
 
				+                        }
			
 
				+
			
 
				+                    } else {
			
 
				+                        //console.log(startBit, endBit, 'endBit')
			
 
				+                        inputBuffer = setBuffer(inputBuffer,
			
 
				+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
			
 
				+                    }
			
 
				+//console.log(startBit,endBit)
			
 
				+                    // if(endBit === true) {
			
 
				+                    //     end = true;
			
 
				+                    // }
			
 
				+                    break;
			
 
				+                case 1:
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
			
 
				+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
			
 
				+                    break;
			
 
				+                default:
			
 
				+                    //console.log('nalType: ' + nalType);
			
 
				+                    //console.log(PAYLOAD)
			
 
				+                    break;
			
 
				+            }
			
 
				+//console.log('M: ' + RtpHeader.M + ' ' + (rtpHeader[1] & 0x80))
			
 
				+            //check marker bit
			
 
				+            if (RtpHeader.M) {
			
 
				+                if (!firstIframe) {
			
 
				+                    inputLength = 0;
			
 
				+                    return;
			
 
				+                }
			
 
				+                let inputBufferSub = inputBuffer.subarray(0, inputLength);
			
 
				+                frameType = FRAMETYPE[inputBufferSub[4] & 0x1f];
			
 
				+
			
 
				+                //只根据视频帧计算resetTimeCount
			
 
				+                if (frameType !== 'SEI') {
			
 
				+                    // rtp时间戳周期为RESETTIME，如果单向递增，设为0
			
 
				+                    if (lastTimeStamp - rtpTimeStamp > (RESETTIME / 2)) { //判断lastTimeStamp远大于rtpTimeStamp，防止后一帧比前一帧先到的情况
			
 
				+                        //console.log(lastTimeStamp - rtpTimeStamp)
			
 
				+                        console.warn('时间戳重置', lastTimeStamp, rtpTimeStamp, frameType, new Date())
			
 
				+                        resetTimeCount++;
			
 
				+                    }
			
 
				+                    rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
			
 
				+                } else {
			
 
				+                    //同一帧的SEI比视频发送慢时
			
 
				+                    if (rtpTimeStamp - lastTimeStamp > (RESETTIME / 2)) {
			
 
				+                        console.warn('SEI翻转', rtpTimeStamp, lastTimeStamp);
			
 
				+                        rtpTimeStamp = rtpTimeStamp + RESETTIME * (resetTimeCount - 1);
			
 
				+                    } else {
			
 
				+                        rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
			
 
				+                    }
			
 
				+                    //同一帧的SEI比视频发送快时
			
 
				+                    // if(rtpTimeStamp > lastTimeStamp) {
			
 
				+                    //     rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
			
 
				+                    // } else {
			
 
				+                    //     rtpTimeStamp = rtpTimeStamp + RESETTIME * (resetTimeCount + 1);
			
 
				+                    // }
			
 
				+                }
			
 
				+//console.log('frameType: ', frameType, 'rtpTimeStamp: ', rtpTimeStamp)
			
 
				+                if (frameType === 'SEI') {
			
 
				+                    //SEI被分片（nal === 28）时，分片包发送完后marker为1，不会和视频帧一起
			
 
				+                    SEIBuffer = inputBuffer.subarray(4, inputLength);
			
 
				+                    //console.log(SEIBuffer)
			
 
				+                    inputBufferSub = new Uint8Array();
			
 
				+                }
			
 
				+                if (SEIBuffer) {
			
 
				+                    let SEI = SEIParse(SEIBuffer);
			
 
				+                    if (SEI) {
			
 
				+                        SEIInfo.ivs = SEI;
			
 
				+                        SEIInfo.timestamp = rtpTimeStamp;
			
 
				+                        decodedData.SEIInfo = SEIInfo;
			
 
				+                        if ((rtpTimeStamp - lastSEITime) !== (90000 / frameRate)) {
			
 
				+                            //console.log('SEI 时间差：', (rtpTimeStamp - lastTime), rtpTimeStamp, lastTime)
			
 
				+                        }
			
 
				+                        lastSEITime = rtpTimeStamp;
			
 
				+                        SEIInfo = {
			
 
				+                            ivs: null,
			
 
				+                            timestamp: 0,
			
 
				+                        };
			
 
				+                    }
			
 
				+                    SEIBuffer = null;
			
 
				+                }
			
 
				+
			
 
				+                if (!initalSegmentFlag) {
			
 
				+                    decodedData.initSegmentData = null;
			
 
				+                    decodedData.codecInfo = null;
			
 
				+                } else {
			
 
				+                    initalSegmentFlag = false;
			
 
				+                    const info = {
			
 
				+                        id: 1,
			
 
				+                        width: width,
			
 
				+                        height: height,
			
 
				+                        type: "video",
			
 
				+                        profileIdc: SPSParser.getSpsValue("profile_idc"),
			
 
				+                        profileCompatibility: 0,
			
 
				+                        levelIdc: SPSParser.getSpsValue("level_idc"),
			
 
				+                        sps: [spsSegment],
			
 
				+                        pps: [ppsSegment],
			
 
				+                        timescale: 1e3,
			
 
				+                        fps: frameRate
			
 
				+                    };
			
 
				+                    decodedData.initSegmentData = info;
			
 
				+                    decodedData.codecInfo = SPSParser.getCodecInfo();
			
 
				+                    //console.log(info.pps)
			
 
				+                }
			
 
				+
			
 
				+                if (frameType === 'I') {
			
 
				+//console.log('ppsSegment: ', ppsSegment)
			
 
				+                    let h264parameterLength = spsSegment.length + ppsSegment.length + 8;
			
 
				+                    inputSegBufferSub = inputBufferSub.subarray(h264parameterLength, inputBufferSub.length);
			
 
				+                } else {
			
 
				+                    inputSegBufferSub = inputBufferSub.subarray(0, inputBufferSub.length);
			
 
				+                }
			
 
				+                if (inputSegBufferSub.length) {
			
 
				+                    let segSize = inputSegBufferSub.length - 4;
			
 
				+                    //mp4 box头
			
 
				+                    inputSegBufferSub[0] = (segSize & 0xFF000000) >>> 24;
			
 
				+                    inputSegBufferSub[1] = (segSize & 0xFF0000) >>> 16;
			
 
				+                    inputSegBufferSub[2] = (segSize & 0xFF00) >>> 8;
			
 
				+                    inputSegBufferSub[3] = (segSize & 0xFF);
			
 
				+
			
 
				+                    decodedData.frameData = new Uint8Array(inputSegBufferSub);
			
 
				+
			
 
				+                    let sample = {
			
 
				+                        duration: Math.round((1 / frameRate) * 1000),
			
 
				+                        size: inputSegBufferSub.length,
			
 
				+                        frame_time_stamp: null,
			
 
				+                        frameDuration: null,
			
 
				+                    };
			
 
				+                    sample.frame_time_stamp = rtpTimeStamp; //Todo：暂时为null，通过帧率控制duration
			
 
				+                    if (initalMediaFrameFlag) {
			
 
				+                        sample.frameDuration = 0;
			
 
				+                        initalMediaFrameFlag = false;
			
 
				+                    } else {
			
 
				+                        if (frameRate) {
			
 
				+                            frameCount++;
			
 
				+                            if (!(frameCount % frameRate)) { //每秒最后一帧时
			
 
				+                                sample.frameDuration = 1000 - durationTimeCount;
			
 
				+                                frameCount = 0;
			
 
				+                                durationTimeCount = 0;
			
 
				+                            } else {
			
 
				+                                sample.frameDuration = Math.round(1000 / frameRate);
			
 
				+                                durationTimeCount += Math.round(1000 / frameRate);
			
 
				+                            }
			
 
				+                        } else {
			
 
				+                            sample.frameDuration = (sample.frame_time_stamp - preSample.frame_time_stamp) / 90; // 时钟频率90000，timescale=1000
			
 
				+                        }
			
 
				+                        //console.log(sample.frameDuration)
			
 
				+                    }
			
 
				+                    preSample = sample;
			
 
				+                    decodedData.mediaSample = sample;
			
 
				+                    decodedData.timeStamp = rtpTimeStamp;
			
 
				+                }
			
 
				+                this.handleDecodedData(decodedData);
			
 
				+                inputLength = 0;
			
 
				+                decodedData.SEIInfo = null;
			
 
				+                inputSegBufferSub = null;
			
 
				+                if (frameType !== 'SEI') {
			
 
				+                    lastTimeStamp = RtpHeader.timeStamp;
			
 
				+                }
			
 
				+                frameType = '';
			
 
				+            }
			
 
				+            //console.log('xxxxxxxxxxxxxxxxxxxxxxxxx')
			
 
				+        },
			
 
				+
			
 
				+        set rtpSessionCallback(func) {
			
 
				+            this.handleDecodedData = func;
			
 
				+        },
			
 
				+
			
 
				+        setFrameRate(fps) {
			
 
				+            frameRate = fps;
			
 
				+            //console.log('frameRate: ', frameRate)
			
 
				+        },
			
 
				+
			
 
				+        setResolutionChangedCallback(callback) {
			
 
				+            this.resolutionChangedCallback = callback;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    return new constructor();
			
 
				+
			
 
				+    function setBuffer(buffer1, buffer2) {
			
 
				+        let bufferTemp = buffer1;
			
 
				+        if ((inputLength + buffer2.length) > buffer1.length) {
			
 
				+            bufferTemp = new Uint8Array(buffer1.length + size1M);
			
 
				+        }
			
 
				+
			
 
				+        bufferTemp.set(buffer2, inputLength);
			
 
				+        inputLength += buffer2.length;
			
 
				+        return bufferTemp;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * 去除SPS中的Emulation字节
			
 
				+ * @param data SPS源数据
			
 
				+ * @returns {Array} 去除后Emulation字节后的SPS
			
 
				+ */
			
 
				+function removeH264or5EmulationBytes(data) {
			
 
				+    let toSize = 0;
			
 
				+    let i = 0;
			
 
				+    let to = [];
			
 
				+    let dataLength = data.length;
			
 
				+    while (i < dataLength) {
			
 
				+        if (i + 2 < dataLength && data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 3) {
			
 
				+            to[toSize] = to[toSize + 1] = 0;
			
 
				+            toSize += 2;
			
 
				+            i += 3;
			
 
				+        } else {
			
 
				+            to[toSize] = data[i];
			
 
				+            toSize += 1;
			
 
				+            i += 1;
			
 
				+        }
			
 
				+    }
			
 
				+    return to;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 解析SEI信息
			
 
				+ * @param data
			
 
				+ * @return {Array}
			
 
				+ */
			
 
				+function SEIParse(data) {
			
 
				+    //console.log(data)
			
 
				+    if ((data[0] & 0x1f) !== 6) {
			
 
				+        //非SEI
			
 
				+        return null;
			
 
				+    }
			
 
				+
			
 
				+    if (data[1] !== 0x55 || data[2] !== 0x4C || data[3] !== 0x53 || data[4] !== 0x40) {
			
 
				+        //ULS@开头
			
 
				+        console.warn('unknown SEI type');
			
 
				+        return null;
			
 
				+    }
			
 
				+
			
 
				+    let dataLength = data.length;
			
 
				+    let type = (data[5] << 8) + data[6];
			
 
				+    let checkSum = (data[7] << 8) + data[8];
			
 
				+    // if(dataLength !== (checkSum + 1 + 4 + 4)) {
			
 
				+    //     console.log('SEI check fail!');
			
 
				+    //     return null;
			
 
				+    // }
			
 
				+    let result;
			
 
				+    data = data.subarray(9);
			
 
				+    switch (type) {
			
 
				+        case 0:
			
 
				+            result = parseFace(data);
			
 
				+            break;
			
 
				+        case 1:
			
 
				+            //console.log(parseBody(data))
			
 
				+            result = parseBody(data);
			
 
				+            break;
			
 
				+        case 2:
			
 
				+            result = parseRegion(data);
			
 
				+            break;
			
 
				+        case 3:
			
 
				+            result = parseBodyEx(data);
			
 
				+            break;
			
 
				+        case 4:
			
 
				+            result = parseOverSpeed(data);
			
 
				+            break;
			
 
				+        default:
			
 
				+            result = null;
			
 
				+            break;
			
 
				+    }
			
 
				+    return result;
			
 
				+}
			
 
				+
			
 
				+function parseFace(data) {
			
 
				+    //console.log(data)
			
 
				+    let dataLength = data.length;
			
 
				+    let contents = [];
			
 
				+    while (dataLength > 0) {
			
 
				+        //console.log('dataLength: ', dataLength)
			
 
				+        let x0 = ((data[4] & 0x7f) << 8) + data[5],
			
 
				+            y0 = ((data[6] & 0x7f) << 8) + data[7],
			
 
				+            width = ((data[8] & 0x7f) << 8) + data[9] - x0,
			
 
				+            height = ((data[10] & 0x7f) << 8) + data[11] - y0;
			
 
				+        let content = {
			
 
				+            type: 'rect',
			
 
				+            id: (data[2] << 8) + data[3],
			
 
				+            rect: [x0, y0, width, height],
			
 
				+            state: data[1] & 0x01,
			
 
				+            quality: (data[1] & 0x02) >> 1,
			
 
				+        };
			
 
				+        Array.prototype.push.apply(contents, [content]);
			
 
				+        data = data.subarray(12);
			
 
				+        dataLength = data.length;
			
 
				+    }
			
 
				+
			
 
				+    return contents;
			
 
				+}
			
 
				+
			
 
				+function parseBody(data) {
			
 
				+    let dataLength = data.length;
			
 
				+    let contents = [];
			
 
				+    while (dataLength > 0) {
			
 
				+        //console.log('dataLength: ', dataLength)
			
 
				+        let x0 = ((data[4] & 0x7f) << 8) + data[5],
			
 
				+            y0 = ((data[6] & 0x7f) << 8) + data[7],
			
 
				+            width = ((data[8] & 0x7f) << 8) + data[9] - x0,
			
 
				+            height = ((data[10] & 0x7f) << 8) + data[11] - y0,
			
 
				+            boxConfidence = ((data[12] & 0x7f) << 8) + data[13];
			
 
				+        let points = [];
			
 
				+
			
 
				+        for (let i = 0; i < 17; i++) {
			
 
				+            let point = {
			
 
				+                x: ((data[16 + i * 8] & 0x7f) << 8) + data[17 + i * 8],
			
 
				+                y: ((data[18 + i * 8] & 0x7f) << 8) + data[19 + i * 8],
			
 
				+                confidence: ((data[20 + i * 8] & 0x7f) << 8) + data[21 + i * 8],
			
 
				+                // x: Math.random() * 8191,
			
 
				+                // y: Math.random() * 8191,
			
 
				+                // confidence: 1,
			
 
				+            };
			
 
				+            points.push(point);
			
 
				+        }
			
 
				+        let content = {
			
 
				+            type: 'coco-pose',
			
 
				+            id: (data[2] << 8) + data[3],
			
 
				+            handsUp: data[1] & 0x04,
			
 
				+            boundingBox: [x0, y0, width, height],
			
 
				+            boxConfidence,
			
 
				+            points: parseBodyToTree(points),
			
 
				+            state: data[1] & 0x01,
			
 
				+        };
			
 
				+        Array.prototype.push.apply(contents, [content]);
			
 
				+        data = data.subarray(152);
			
 
				+        dataLength = data.length;
			
 
				+
			
 
				+    }
			
 
				+    return contents;
			
 
				+}
			
 
				+
			
 
				+function parseRegion(data) {
			
 
				+    let dataLength = data.length;
			
 
				+    let contents = [];
			
 
				+    while (dataLength > 0) {
			
 
				+        let pointNum = (data[0] << 8) + data[1],
			
 
				+            state = data[3] & 0x03,
			
 
				+            area = [];
			
 
				+
			
 
				+        for (let i = 0; i < pointNum; i++) {
			
 
				+            let point = {
			
 
				+                x: ((data[i * 4 + 4] & 0x7f) << 8) + data[i * 4 + 5],
			
 
				+                y: ((data[i * 4 + 6] & 0x7f) << 8) + data[i * 4 + 7],
			
 
				+            };
			
 
				+            area.push(point);
			
 
				+        }
			
 
				+        let content = {
			
 
				+            type: 'region-detect',
			
 
				+            state,
			
 
				+            area
			
 
				+        };
			
 
				+        Array.prototype.push.apply(contents, [content]);
			
 
				+        data = data.subarray(pointNum * 4 + 4);
			
 
				+        dataLength = data.length;
			
 
				+    }
			
 
				+    return contents;
			
 
				+}
			
 
				+
			
 
				+function parseBodyEx(data) {
			
 
				+    let dataLength = data.length;
			
 
				+    let contents = [];
			
 
				+    while (dataLength > 0) {
			
 
				+        //console.log('dataLength: ', dataLength)
			
 
				+        let x0 = ((data[4] & 0x7f) << 8) + data[5],
			
 
				+            y0 = ((data[6] & 0x7f) << 8) + data[7],
			
 
				+            width = ((data[8] & 0x7f) << 8) + data[9] - x0,
			
 
				+            height = ((data[10] & 0x7f) << 8) + data[11] - y0,
			
 
				+            boxConfidence = ((data[12] & 0x7f) << 8) + data[13];
			
 
				+        let points = [];
			
 
				+
			
 
				+        for (let i = 0; i < 17; i++) {
			
 
				+            let point = {
			
 
				+                x: ((data[16 + i * 8] & 0x7f) << 8) + data[17 + i * 8],
			
 
				+                y: ((data[18 + i * 8] & 0x7f) << 8) + data[19 + i * 8],
			
 
				+                confidence: ((data[20 + i * 8] & 0x7f) << 8) + data[21 + i * 8],
			
 
				+            };
			
 
				+            points.push(point);
			
 
				+        }
			
 
				+        let guides = [
			
 
				+            {
			
 
				+                x: ((data[16 + 17 * 8] & 0x7f) << 8) + data[17 + 17 * 8],
			
 
				+                y: ((data[18 + 17 * 8] & 0x7f) << 8) + data[19 + 17 * 8],
			
 
				+            },
			
 
				+            {
			
 
				+                x: ((data[20 + 17 * 8] & 0x7f) << 8) + data[21 + 17 * 8],
			
 
				+                y: ((data[22 + 17 * 8] & 0x7f) << 8) + data[23 + 17 * 8],
			
 
				+            }
			
 
				+        ];
			
 
				+        let content = {
			
 
				+            type: 'coco-poseex',
			
 
				+            id: (data[2] << 8) + data[3],
			
 
				+            Loiter: data[1] & 0x03,
			
 
				+            Standing: (data[1] & 0x04) >> 2,
			
 
				+            Alone: (data[1] & 0x08) >> 3,
			
 
				+            boundingBox: [x0, y0, width, height],
			
 
				+            boxConfidence,
			
 
				+            points: parseBodyToTree(points),
			
 
				+            guides,
			
 
				+            state: 1
			
 
				+        };
			
 
				+        Array.prototype.push.apply(contents, [content]);
			
 
				+        data = data.subarray(160);
			
 
				+        dataLength = data.length;
			
 
				+
			
 
				+    }
			
 
				+    return contents;
			
 
				+}
			
 
				+
			
 
				+function parseOverSpeed(data) {
			
 
				+    let dataLength = data.length;
			
 
				+    let contents = [];
			
 
				+    while (dataLength > 0) {
			
 
				+        //console.log('dataLength: ', dataLength)
			
 
				+        let speed = ((data[4] & 0x7f) << 8) + data[5],
			
 
				+            overSpeed = data[1] & 0x01;
			
 
				+        let content = {
			
 
				+            type: 'over-speed',
			
 
				+            id: (data[2] << 8) + data[3],
			
 
				+            speed,
			
 
				+            overSpeed,
			
 
				+            state: 1,
			
 
				+        };
			
 
				+        Array.prototype.push.apply(contents, [content]);
			
 
				+        data = data.subarray(8);
			
 
				+        dataLength = data.length;
			
 
				+    }
			
 
				+    return contents;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 将智能帧中的人体姿态点转化为树结构(双亲表示法)
			
 
				+ * @param points
			
 
				+ */
			
 
				+function parseBodyToTree(points) {
			
 
				+    let newPoints = [];
			
 
				+    newPoints[0] = {...points[0], parent: -1, pointColor: '#FF0002', lineColor: '#FF0002'};
			
 
				+    newPoints[1] = {...points[1], parent: 0, pointColor: '#FF0002', lineColor: '#FF0002'};
			
 
				+    newPoints[2] = {...points[2], parent: 0, pointColor: '#FF0002', lineColor: '#FF0002'};
			
 
				+    newPoints[3] = {...points[5], parent: 17, pointColor: '#D9E34F', lineColor: '#FF0002'};
			
 
				+    newPoints[4] = {...points[6], parent: 17, pointColor: '#D9E34F', lineColor: '#FF0002'};
			
 
				+    newPoints[5] = {...points[3], parent: 1, pointColor: '#00FF00', lineColor: '#FF0002'};
			
 
				+    newPoints[6] = {...points[4], parent: 2, pointColor: '#FFAC00', lineColor: '#FF0002'};
			
 
				+    newPoints[7] = {...points[7], parent: 3, pointColor: '#00FF45', lineColor: '#'};
			
 
				+    newPoints[8] = {...points[11], parent: 17, pointColor: '#EEC446', lineColor: '#'};
			
 
				+    newPoints[9] = {...points[8], parent: 4, pointColor: '#43D3AF', lineColor: '#'};
			
 
				+    newPoints[10] = {...points[12], parent: 17, pointColor: '#7A93E8', lineColor: '#'};
			
 
				+    newPoints[11] = {...points[9], parent: 7, pointColor: '#EFB842', lineColor: '#'};
			
 
				+    newPoints[12] = {...points[13], parent: 8, pointColor: '#E56C00', lineColor: '#'};
			
 
				+    newPoints[13] = {...points[10], parent: 9, pointColor: '#47CD43', lineColor: '#0096FF'};
			
 
				+    newPoints[14] = {...points[14], parent: 10, pointColor: '#3868D2', lineColor: '#00FF51'};
			
 
				+    newPoints[15] = {...points[15], parent: 12, pointColor: '#DF4D01', lineColor: '#5100FF'};
			
 
				+    newPoints[16] = {...points[16], parent: 14, pointColor: '#1E48D4', lineColor: '#00FFA0'};
			
 
				+    newPoints[17] = {
			
 
				+        x: (points[5].x + points[6].x) / 2,
			
 
				+        y: (points[5].y + points[6].y) / 2,
			
 
				+        parent: -1,
			
 
				+        pointColor: '#D9E34F',
			
 
				+        lineColor: '#00FFA0'
			
 
				+    };
			
 
				+    return newPoints;
			
 
				+}
			
--- a/public/static/jinm/src/MP4Remux.js
+++ b/public/static/jinm/src/MP4Remux.js
@@ -0,0 +1,573 @@
 
				+let _dtsBase;
			
 
				+let _types = [];
			
 
				+let datas = {};
			
 
				+
			
 
				+_types = {
			
 
				+    avc1: [], avcC: [], btrt: [], dinf: [],
			
 
				+    dref: [], esds: [], ftyp: [], hdlr: [],
			
 
				+    mdat: [], mdhd: [], mdia: [], mfhd: [],
			
 
				+    minf: [], moof: [], moov: [], mp4a: [],
			
 
				+    mvex: [], mvhd: [], sdtp: [], stbl: [],
			
 
				+    stco: [], stsc: [], stsd: [], stsz: [],
			
 
				+    stts: [], tfdt: [], tfhd: [], traf: [],
			
 
				+    trak: [], trun: [], trex: [], tkhd: [],
			
 
				+    vmhd: [], smhd: []
			
 
				+};
			
 
				+
			
 
				+class MP4Remux {
			
 
				+    constructor() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    init() {
			
 
				+        for (let name in _types) {
			
 
				+            _types[name] = [
			
 
				+                name.charCodeAt(0),
			
 
				+                name.charCodeAt(1),
			
 
				+                name.charCodeAt(2),
			
 
				+                name.charCodeAt(3)
			
 
				+            ];
			
 
				+        }
			
 
				+
			
 
				+        _dtsBase = 0;
			
 
				+
			
 
				+        datas.FTYP = new Uint8Array([
			
 
				+            0x69, 0x73, 0x6F, 0x6D, // major_brand: isom
			
 
				+            0x0, 0x0, 0x0, 0x1,  // minor_version: 0x01
			
 
				+            0x69, 0x73, 0x6F, 0x6D, // isom
			
 
				+            0x61, 0x76, 0x63, 0x31  // avc1
			
 
				+        ]);
			
 
				+
			
 
				+        datas.STSD_PREFIX = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x01  // entry_count
			
 
				+        ]);
			
 
				+
			
 
				+        datas.STTS = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x00  // entry_count
			
 
				+        ]);
			
 
				+
			
 
				+        datas.STSC = datas.STCO = datas.STTS;
			
 
				+
			
 
				+        datas.STSZ = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x00, // sample_size
			
 
				+            0x00, 0x00, 0x00, 0x00  // sample_count
			
 
				+        ]);
			
 
				+
			
 
				+        datas.HDLR_VIDEO = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x00, // pre_defined
			
 
				+            0x76, 0x69, 0x64, 0x65, // handler_type: 'vide'
			
 
				+            0x00, 0x00, 0x00, 0x00, // reserved: 3 * 4 bytes
			
 
				+            0x00, 0x00, 0x00, 0x00,
			
 
				+            0x00, 0x00, 0x00, 0x00,
			
 
				+            0x56, 0x69, 0x64, 0x65,
			
 
				+            0x6F, 0x48, 0x61, 0x6E,
			
 
				+            0x64, 0x6C, 0x65, 0x72, 0x00 // name: VideoHandler
			
 
				+        ]);
			
 
				+
			
 
				+        datas.HDLR_AUDIO = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x00, // pre_defined
			
 
				+            0x73, 0x6F, 0x75, 0x6E, // handler_type: 'soun'
			
 
				+            0x00, 0x00, 0x00, 0x00, // reserved: 3 * 4 bytes
			
 
				+            0x00, 0x00, 0x00, 0x00,
			
 
				+            0x00, 0x00, 0x00, 0x00,
			
 
				+            0x53, 0x6F, 0x75, 0x6E,
			
 
				+            0x64, 0x48, 0x61, 0x6E,
			
 
				+            0x64, 0x6C, 0x65, 0x72, 0x00 // name: SoundHandler
			
 
				+        ]);
			
 
				+
			
 
				+        datas.DREF = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x01, // entry_count
			
 
				+            0x00, 0x00, 0x00, 0x0C, // entry_size
			
 
				+            0x75, 0x72, 0x6C, 0x20, // type 'url '
			
 
				+            0x00, 0x00, 0x00, 0x01  // version(0) + flags
			
 
				+        ]);
			
 
				+
			
 
				+        // Sound media header
			
 
				+        datas.SMHD = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x00, // version(0) + flags
			
 
				+            0x00, 0x00, 0x00, 0x00  // balance(2) + reserved(2)
			
 
				+        ]);
			
 
				+
			
 
				+        // video media header
			
 
				+        datas.VMHD = new Uint8Array([
			
 
				+            0x00, 0x00, 0x00, 0x01, // version(0) + flags
			
 
				+            0x00, 0x00,             // graphicsmode: 2 bytes
			
 
				+            0x00, 0x00, 0x00, 0x00, // opcolor: 3 * 2 bytes
			
 
				+            0x00, 0x00
			
 
				+        ]);
			
 
				+    }
			
 
				+
			
 
				+    initSegment(meta) {
			
 
				+        let ftyp = box(_types.ftyp, datas.FTYP);
			
 
				+        let moov = Moov(meta);
			
 
				+        let seg = new Uint8Array(ftyp.byteLength + moov.byteLength);
			
 
				+        seg.set(ftyp, 0);
			
 
				+        seg.set(moov, ftyp.byteLength);
			
 
				+        return seg;
			
 
				+    }
			
 
				+
			
 
				+    mediaSegment(sequenceNumber, track, data) {
			
 
				+        let moof = Moof(sequenceNumber, track);
			
 
				+        let frameData = mdat(data);
			
 
				+        let seg = new Uint8Array(moof.byteLength + frameData.byteLength);
			
 
				+        seg.set(moof, 0);
			
 
				+        seg.set(frameData, moof.byteLength);
			
 
				+        return seg
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+//组装initSegment
			
 
				+
			
 
				+function Moov(meta) {
			
 
				+    let mvhd = Mvhd(meta.timescale, meta.duration);
			
 
				+    let trak = Trak(meta);
			
 
				+    let mvex = Mvex(meta);
			
 
				+
			
 
				+    return box(_types.moov, mvhd, trak, mvex);
			
 
				+}
			
 
				+
			
 
				+//组装moov
			
 
				+function Mvhd(timescale, duration) {
			
 
				+    return box(_types.mvhd, new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x00,    // version(0) + flags
			
 
				+        0x00, 0x00, 0x00, 0x00,    // creation_time
			
 
				+        0x00, 0x00, 0x00, 0x00,    // modification_time
			
 
				+        (timescale >>> 24) & 0xFF, // timescale: 4 bytes
			
 
				+        (timescale >>> 16) & 0xFF,
			
 
				+        (timescale >>>  8) & 0xFF,
			
 
				+        (timescale) & 0xFF,
			
 
				+        (duration >>> 24) & 0xFF,  // duration: 4 bytes
			
 
				+        (duration >>> 16) & 0xFF,
			
 
				+        (duration >>>  8) & 0xFF,
			
 
				+        (duration) & 0xFF,
			
 
				+        0x00, 0x01, 0x00, 0x00,    // Preferred rate: 1.0
			
 
				+        0x01, 0x00, 0x00, 0x00,    // PreferredVolume(1.0, 2bytes) + reserved(2bytes)
			
 
				+        0x00, 0x00, 0x00, 0x00,    // reserved: 4 + 4 bytes
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x01, 0x00, 0x00,    // ----begin composition matrix----
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x01, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x40, 0x00, 0x00, 0x00,    // ----end composition matrix----
			
 
				+        0x00, 0x00, 0x00, 0x00,    // ----begin pre_defined 6 * 4 bytes----
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,    // ----end pre_defined 6 * 4 bytes----
			
 
				+        0xFF, 0xFF, 0xFF, 0xFF     // next_track_ID
			
 
				+    ]));
			
 
				+}
			
 
				+
			
 
				+function Trak(meta) {
			
 
				+    return box(_types.trak, Tkhd(meta), Mdia(meta));
			
 
				+}
			
 
				+
			
 
				+function Mvex(meta) {
			
 
				+    return box(_types.mvex, trex(meta));
			
 
				+}
			
 
				+
			
 
				+//组装trak
			
 
				+function Tkhd(meta) {
			
 
				+    let trackId = meta.id;
			
 
				+    let duration = meta.duration;
			
 
				+    let width = meta.width;
			
 
				+    let height = meta.height;
			
 
				+
			
 
				+    return box(_types.tkhd, new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x07,   // version(0) + flags
			
 
				+        0x00, 0x00, 0x00, 0x00,   // creation_time
			
 
				+        0x00, 0x00, 0x00, 0x00,   // modification_time
			
 
				+        (trackId >>> 24) & 0xFF,  // track_ID: 4 bytes
			
 
				+        (trackId >>> 16) & 0xFF,
			
 
				+        (trackId >>>  8) & 0xFF,
			
 
				+        (trackId) & 0xFF,
			
 
				+        0x00, 0x00, 0x00, 0x00,   // reserved: 4 bytes
			
 
				+        (duration >>> 24) & 0xFF, // duration: 4 bytes
			
 
				+        (duration >>> 16) & 0xFF,
			
 
				+        (duration >>>  8) & 0xFF,
			
 
				+        (duration) & 0xFF,
			
 
				+        0x00, 0x00, 0x00, 0x00,   // reserved: 2 * 4 bytes
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,   // layer(2bytes) + alternate_group(2bytes)
			
 
				+        0x00, 0x00, 0x00, 0x00,   // volume(2bytes) + reserved(2bytes)
			
 
				+        0x00, 0x01, 0x00, 0x00,   // ----begin composition matrix----
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x01, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x40, 0x00, 0x00, 0x00,   // ----end composition matrix----
			
 
				+        (width >>> 8) & 0xFF,     // width and height
			
 
				+        (width) & 0xFF,
			
 
				+        0x00, 0x00,
			
 
				+        (height >>> 8) & 0xFF,
			
 
				+        (height) & 0xFF,
			
 
				+        0x00, 0x00
			
 
				+    ]));
			
 
				+}
			
 
				+
			
 
				+function Mdia(meta) {
			
 
				+    return box(_types.mdia, mdhd(meta), hdlr(meta), minf(meta));
			
 
				+}
			
 
				+
			
 
				+//组装mdia
			
 
				+function mdhd(meta) {
			
 
				+    let timescale = meta.timescale;
			
 
				+    let duration = meta.duration;
			
 
				+
			
 
				+    return box(_types.mdhd, new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x00,    // version(0) + flags
			
 
				+        0x00, 0x00, 0x00, 0x00,    // creation_time
			
 
				+        0x00, 0x00, 0x00, 0x00,    // modification_time
			
 
				+        (timescale >>> 24) & 0xFF, // timescale: 4 bytes
			
 
				+        (timescale >>> 16) & 0xFF,
			
 
				+        (timescale >>>  8) & 0xFF,
			
 
				+        (timescale) & 0xFF,
			
 
				+        (duration >>> 24) & 0xFF,  // duration: 4 bytes
			
 
				+        (duration >>> 16) & 0xFF,
			
 
				+        (duration >>>  8) & 0xFF,
			
 
				+        (duration) & 0xFF,
			
 
				+        0x55, 0xC4,                // language: und (undetermined)
			
 
				+        0x00, 0x00                 // pre_defined = 0
			
 
				+    ]));
			
 
				+}
			
 
				+
			
 
				+function hdlr(meta) {
			
 
				+    let data = null;
			
 
				+
			
 
				+    if (meta.type === 'audio') {
			
 
				+        data = datas.HDLR_AUDIO;
			
 
				+    } else {
			
 
				+        data = datas.HDLR_VIDEO;
			
 
				+    }
			
 
				+
			
 
				+    return box(_types.hdlr, data);
			
 
				+}
			
 
				+
			
 
				+function minf(meta) {
			
 
				+    let xmhd = null;
			
 
				+
			
 
				+    if (meta.type === 'audio') {
			
 
				+        xmhd = box(_types.smhd, datas.SMHD);
			
 
				+    } else {
			
 
				+        xmhd = box(_types.vmhd, datas.VMHD);
			
 
				+    }
			
 
				+
			
 
				+    return box(_types.minf, xmhd, dinf(), stbl(meta));
			
 
				+}
			
 
				+
			
 
				+//组装minf
			
 
				+function dinf() {
			
 
				+    return box(_types.dinf, box(_types.dref, datas.DREF));
			
 
				+}
			
 
				+
			
 
				+function stbl(meta) {
			
 
				+    let result = box(_types.stbl,   // type: stbl
			
 
				+        stsd(meta),                   // Sample Description Table
			
 
				+        box(_types.stts, datas.STTS), // Time-To-Sample
			
 
				+        box(_types.stsc, datas.STSC), // Sample-To-Chunk
			
 
				+        box(_types.stsz, datas.STSZ), // Sample size
			
 
				+        box(_types.stco, datas.STCO)  // Chunk offset
			
 
				+    );
			
 
				+
			
 
				+    return result;
			
 
				+}
			
 
				+
			
 
				+//组装stbl
			
 
				+function stsd(meta) {
			
 
				+    if (meta.type === 'audio') {
			
 
				+        return box(_types.stsd, datas.STSD_PREFIX, mp4a(meta));
			
 
				+    } else {
			
 
				+        return box(_types.stsd, datas.STSD_PREFIX, avc1(meta));
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+//组装stsd
			
 
				+function mp4a(meta) {
			
 
				+    let channelCount = meta.channelCount;
			
 
				+    let sampleRate = meta.audioSampleRate;
			
 
				+
			
 
				+    let data = new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x00,    // reserved(4)
			
 
				+        0x00, 0x00, 0x00, 0x01,    // reserved(2) + data_reference_index(2)
			
 
				+        0x00, 0x00, 0x00, 0x00,    // reserved: 2 * 4 bytes
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        0x00, channelCount,        // channelCount(2)
			
 
				+        0x00, 0x10,                // sampleSize(2)
			
 
				+        0x00, 0x00, 0x00, 0x00,    // reserved(4)
			
 
				+        (sampleRate >>> 8) & 0xFF, // Audio sample rate
			
 
				+        (sampleRate) & 0xFF,
			
 
				+        0x00, 0x00
			
 
				+    ]);
			
 
				+
			
 
				+    return box(_types.mp4a, data, esds(meta));
			
 
				+}
			
 
				+
			
 
				+function avc1(meta) {
			
 
				+    let width = meta.width;
			
 
				+    let height = meta.height;
			
 
				+
			
 
				+    let sps = meta.sps || [], pps = meta.pps || [], sequenceParameterSets = [], pictureParameterSets = [];
			
 
				+    for (let i = 0; i < sps.length; i++) {
			
 
				+        sequenceParameterSets.push((sps[i].byteLength & 65280) >>> 8);
			
 
				+        sequenceParameterSets.push(sps[i].byteLength & 255);
			
 
				+        sequenceParameterSets = sequenceParameterSets.concat(Array.prototype.slice.call(sps[i]))
			
 
				+    }
			
 
				+    for (let i = 0; i < pps.length; i++) {
			
 
				+        pictureParameterSets.push((pps[i].byteLength & 65280) >>> 8);
			
 
				+        pictureParameterSets.push(pps[i].byteLength & 255);
			
 
				+        pictureParameterSets = pictureParameterSets.concat(Array.prototype.slice.call(pps[i]))
			
 
				+    }
			
 
				+
			
 
				+    //Todo: 待测，如果视频有问题，修改这里
			
 
				+    // let data = new Uint8Array([
			
 
				+    //     0x00, 0x00, 0x00, 0x00, // reserved(4)
			
 
				+    //     0x00, 0x00, 0x00, 0x01, // reserved(2) + data_reference_index(2)
			
 
				+    //     0x00, 0x00, 0x00, 0x00, // pre_defined(2) + reserved(2)
			
 
				+    //     0x00, 0x00, 0x00, 0x00, // pre_defined: 3 * 4 bytes
			
 
				+    //     0x00, 0x00, 0x00, 0x00,
			
 
				+    //     0x00, 0x00, 0x00, 0x00,
			
 
				+    //     (width >>> 8) & 0xFF,   // width: 2 bytes
			
 
				+    //     (width) & 0xFF,
			
 
				+    //     (height >>> 8) & 0xFF,  // height: 2 bytes
			
 
				+    //     (height) & 0xFF,
			
 
				+    //     0x00, 0x48, 0x00, 0x00, // horizresolution: 4 bytes
			
 
				+    //     0x00, 0x48, 0x00, 0x00, // vertresolution: 4 bytes
			
 
				+    //     0x00, 0x00, 0x00, 0x00, // reserved: 4 bytes
			
 
				+    //     0x00, 0x01,             // frame_count
			
 
				+    //     0x0A,                   // strlen
			
 
				+    //     0x78, 0x71, 0x71, 0x2F, // compressorname: 32 bytes
			
 
				+    //     0x66, 0x6C, 0x76, 0x2E,
			
 
				+    //     0x6A, 0x73, 0x00, 0x00,
			
 
				+    //     0x00, 0x00, 0x00, 0x00,
			
 
				+    //     0x00, 0x00, 0x00, 0x00,
			
 
				+    //     0x00, 0x00, 0x00, 0x00,
			
 
				+    //     0x00, 0x00, 0x00, 0x00,
			
 
				+    //     0x00, 0x00, 0x00,
			
 
				+    //     0x00, 0x18,             // depth
			
 
				+    //     0xFF, 0xFF              // pre_defined = -1
			
 
				+    // ]);
			
 
				+
			
 
				+    let data = new Uint8Array(
			
 
				+        [0, 0, 0, 0,
			
 
				+            0, 0, 0, 1,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            (65280 & width) >> 8,
			
 
				+            255 & width,
			
 
				+            (65280 & height) >> 8,
			
 
				+            255 & height,
			
 
				+            0, 72, 0, 0,
			
 
				+            0, 72, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 1, 19, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 0,
			
 
				+            0, 0, 0, 24, 17, 17]);
			
 
				+
			
 
				+    return box(_types.avc1, data, box(_types.avcC, new Uint8Array([1, meta.profileIdc, meta.profileCompatibility, meta.levelIdc, 255].concat([sps.length]).concat(sequenceParameterSets).concat([pps.length]).concat(pictureParameterSets))));
			
 
				+}
			
 
				+
			
 
				+//组装mp4a
			
 
				+function esds(meta) {
			
 
				+    let config = meta.config;
			
 
				+    let configSize = config.length;
			
 
				+    let data = new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x00, // version 0 + flags
			
 
				+
			
 
				+        0x03,                   // descriptor_type
			
 
				+        0x17 + configSize,      // length3
			
 
				+        0x00, 0x01,             // es_id
			
 
				+        0x00,                   // stream_priority
			
 
				+
			
 
				+        0x04,                   // descriptor_type
			
 
				+        0x0F + configSize,      // length
			
 
				+        0x40,                   // codec: mpeg4_audio
			
 
				+        0x15,                   // stream_type: Audio
			
 
				+        0x00, 0x00, 0x00,       // buffer_size
			
 
				+        0x00, 0x00, 0x00, 0x00, // maxBitrate
			
 
				+        0x00, 0x00, 0x00, 0x00, // avgBitrate
			
 
				+
			
 
				+        0x05                    // descriptor_type
			
 
				+    ].concat(
			
 
				+        [configSize]
			
 
				+    ).concat(
			
 
				+        config
			
 
				+    ).concat(
			
 
				+        [0x06, 0x01, 0x02]      // GASpecificConfig
			
 
				+    ));
			
 
				+
			
 
				+    return box(_types.esds, data);
			
 
				+}
			
 
				+
			
 
				+//组装mvex
			
 
				+function trex(meta) {
			
 
				+    var trackId = meta.id;
			
 
				+    var data = new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x00,  // version(0) + flags
			
 
				+        (trackId >>> 24) & 0xFF, // track_ID
			
 
				+        (trackId >>> 16) & 0xFF,
			
 
				+        (trackId >>>  8) & 0xFF,
			
 
				+        (trackId) & 0xFF,
			
 
				+        0x00, 0x00, 0x00, 0x01,  // default_sample_description_index
			
 
				+        0x00, 0x00, 0x00, 0x00,  // default_sample_duration
			
 
				+        0x00, 0x00, 0x00, 0x00,  // default_sample_size
			
 
				+        0x00, 0x01, 0x00, 0x01   // default_sample_flags
			
 
				+    ]);
			
 
				+
			
 
				+    return box(_types.trex, data);
			
 
				+}
			
 
				+
			
 
				+//组装mediaSegment
			
 
				+function Moof(sequenceNumber, track) {
			
 
				+    return box(_types.moof, mfhd(sequenceNumber), traf(track));
			
 
				+}
			
 
				+
			
 
				+function mdat(data) {
			
 
				+    return box(_types.mdat, data);
			
 
				+}
			
 
				+
			
 
				+//组装moof
			
 
				+function mfhd(sequenceNumber) {
			
 
				+    var data = new Uint8Array([
			
 
				+        0x00, 0x00, 0x00, 0x00,
			
 
				+        (sequenceNumber >>> 24) & 0xFF, // sequence_number: int32
			
 
				+        (sequenceNumber >>> 16) & 0xFF,
			
 
				+        (sequenceNumber >>>  8) & 0xFF,
			
 
				+        (sequenceNumber) & 0xFF
			
 
				+    ]);
			
 
				+
			
 
				+    return box(_types.mfhd, data);
			
 
				+}
			
 
				+
			
 
				+function traf(track) {
			
 
				+    //console.log(track)
			
 
				+    var trackFragmentHeader = null, trackFragmentDecodeTime = null, trackFragmentRun = null, dataOffset = null;
			
 
				+    trackFragmentHeader = box(_types.tfhd, new Uint8Array([0, 2, 0, 0, 0, 0, 0, 1]));
			
 
				+    trackFragmentDecodeTime = box(_types.tfdt,
			
 
				+        new Uint8Array([
			
 
				+            0, 0, 0, 0,
			
 
				+            track.baseMediaDecodeTime >>> 24 & 255,
			
 
				+            track.baseMediaDecodeTime >>> 16 & 255,
			
 
				+            track.baseMediaDecodeTime >>> 8 & 255,
			
 
				+            track.baseMediaDecodeTime & 255
			
 
				+        ]));
			
 
				+    dataOffset = 16 + 16 + 8 + 16 + 8 + 8;
			
 
				+    trackFragmentRun = trun(track, dataOffset);
			
 
				+    return box(_types.traf, trackFragmentHeader, trackFragmentDecodeTime, trackFragmentRun)
			
 
				+}
			
 
				+
			
 
				+//组装traf
			
 
				+function trun(track, offset) {
			
 
				+    if (track.type === "audio") {
			
 
				+        return audioTrun(track, offset)
			
 
				+    }
			
 
				+    return videoTrun(track, offset)
			
 
				+}
			
 
				+
			
 
				+//组装trun
			
 
				+function videoTrun(track, _offset) {
			
 
				+    var bytes = null, samples = null, sample = null, i = 0;
			
 
				+    var offset = _offset;
			
 
				+    samples = track.samples || [];
			
 
				+    if (samples[0].frameDuration === null) {
			
 
				+        offset += 8 + 12 + 4 + 4 * samples.length;
			
 
				+        bytes = trunHeader(samples, offset);
			
 
				+        for (i = 0; i < samples.length; i++) {
			
 
				+            sample = samples[i];
			
 
				+            bytes = bytes.concat([(sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
			
 
				+        }
			
 
				+    } else {
			
 
				+        offset += 8 + 12 + 4 + 4 * samples.length + 4 * samples.length;
			
 
				+        bytes = trunHeader1(samples, offset);
			
 
				+        for (i = 0; i < samples.length; i++) {
			
 
				+            sample = samples[i];
			
 
				+            bytes = bytes.concat([(sample.frameDuration & 4278190080) >>> 24, (sample.frameDuration & 16711680) >>> 16, (sample.frameDuration & 65280) >>> 8, sample.frameDuration & 255, (sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
			
 
				+        }
			
 
				+    }
			
 
				+    return box(_types.trun, new Uint8Array(bytes))
			
 
				+}
			
 
				+
			
 
				+function audioTrun(track, _offset) {
			
 
				+    var bytes = null, samples = null, sample = null, i = 0;
			
 
				+    var offset = _offset;
			
 
				+    samples = track.samples || [];
			
 
				+    offset += 8 + 12 + 8 * samples.length;
			
 
				+    bytes = trunHeader(samples, offset);
			
 
				+    for (i = 0; i < samples.length; i++) {
			
 
				+        sample = samples[i];
			
 
				+        bytes = bytes.concat([(sample.duration & 4278190080) >>> 24, (sample.duration & 16711680) >>> 16, (sample.duration & 65280) >>> 8, sample.duration & 255, (sample.size & 4278190080) >>> 24, (sample.size & 16711680) >>> 16, (sample.size & 65280) >>> 8, sample.size & 255])
			
 
				+    }
			
 
				+    return box(_types.trun, new Uint8Array(bytes))
			
 
				+}
			
 
				+
			
 
				+//组装videoTurn
			
 
				+function trunHeader(samples, offset) {
			
 
				+    return [0, 0, 2, 5, (samples.length & 4278190080) >>> 24, (samples.length & 16711680) >>> 16, (samples.length & 65280) >>> 8, samples.length & 255, (offset & 4278190080) >>> 24, (offset & 16711680) >>> 16, (offset & 65280) >>> 8, offset & 255, 0, 0, 0, 0]
			
 
				+}
			
 
				+
			
 
				+function trunHeader1(samples, offset) {
			
 
				+    return [0, 0, 3, 5, (samples.length & 4278190080) >>> 24, (samples.length & 16711680) >>> 16, (samples.length & 65280) >>> 8, samples.length & 255, (offset & 4278190080) >>> 24, (offset & 16711680) >>> 16, (offset & 65280) >>> 8, offset & 255, 0, 0, 0, 0]
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ *
			
 
				+ * @param type
			
 
				+ * @returns {Uint8Array}
			
 
				+ */
			
 
				+function box(type, ...items) {
			
 
				+    let size = 8;
			
 
				+    //Todo: 测试一下这里
			
 
				+    //let arrs = Array.prototype.slice.call(arguments, 1);
			
 
				+    let arrs = [];
			
 
				+    arrs.push(...items);
			
 
				+    for (let i = 0; i < arrs.length; i++) {
			
 
				+        size += arrs[i].byteLength;
			
 
				+    }
			
 
				+
			
 
				+    let data = new Uint8Array(size);
			
 
				+    let pos = 0;
			
 
				+
			
 
				+    // set size
			
 
				+    data[pos++] = size >>> 24 & 0xFF;
			
 
				+    data[pos++] = size >>> 16 & 0xFF;
			
 
				+    data[pos++] = size >>> 8 & 0xFF;
			
 
				+    data[pos++] = size & 0xFF;
			
 
				+
			
 
				+    // set type
			
 
				+    data.set(type, pos);
			
 
				+    pos += 4;
			
 
				+
			
 
				+    // set data
			
 
				+    for (let i = 0; i < arrs.length; i++) {
			
 
				+        data.set(arrs[i], pos);
			
 
				+        pos += arrs[i].byteLength;
			
 
				+    }
			
 
				+
			
 
				+    return data;
			
 
				+}
			
 
				+
			
 
				+// let mp4Remux = new MP4Remux();
			
 
				+// mp4Remux.init();
			
 
				+
			
 
				+export default MP4Remux;
			
--- a/public/static/jinm/src/MediaSource.js
+++ b/public/static/jinm/src/MediaSource.js
@@ -0,0 +1,414 @@
 
				+
			
 
				+
			
 
				+function VideoMediaSource(element) {
			
 
				+    let videoElement = null;
			
 
				+    let codecInfo = null;
			
 
				+
			
 
				+    let mediaSource = null;
			
 
				+    let sourceBuffer = null;
			
 
				+
			
 
				+    let initSegmentData = null;
			
 
				+
			
 
				+    let ctrlDelayFlag = false;
			
 
				+    let delay = 4;
			
 
				+    const DELAY = 0.5;
			
 
				+    let waitingCount = 0;
			
 
				+    let time = 0;
			
 
				+
			
 
				+    let segmentWaitDecode = [];
			
 
				+
			
 
				+    let firstTimeStamp = null;
			
 
				+    let isFirstTimeStamp = false;
			
 
				+
			
 
				+
			
 
				+    let onDurationChangeCallback = null;
			
 
				+    let onCanplayCallback = null;
			
 
				+    let startPlay = false;
			
 
				+
			
 
				+    function constructor(element) {
			
 
				+        videoElement = element;
			
 
				+    }
			
 
				+
			
 
				+    constructor.prototype = {
			
 
				+        init() {
			
 
				+            videoElement.controls = false;
			
 
				+            videoElement.autoplay = 'autoplay';
			
 
				+            //videoElement.preload = "auto";
			
 
				+            videoElement.muted = true;
			
 
				+
			
 
				+            addVideoEventListener(videoElement);
			
 
				+
			
 
				+            appendInitSegment();
			
 
				+        },
			
 
				+
			
 
				+        setMediaSegment(mediaSegment) {
			
 
				+            appendNextMediaSegment(mediaSegment)
			
 
				+        },
			
 
				+
			
 
				+        setFirstTimeStamp(time) {
			
 
				+            if(!isFirstTimeStamp) {
			
 
				+                console.log('set firstTimeStamp:', time)
			
 
				+                firstTimeStamp = time;
			
 
				+                isFirstTimeStamp = true;
			
 
				+            }
			
 
				+        },
			
 
				+
			
 
				+        setDurationChangeCallBack(callback) {
			
 
				+            onDurationChangeCallback = callback;
			
 
				+        },
			
 
				+
			
 
				+        set CodecInfo(CodecInfo) {
			
 
				+            codecInfo = CodecInfo;
			
 
				+        },
			
 
				+
			
 
				+        get CodecInfo() {
			
 
				+            return codecInfo;
			
 
				+        },
			
 
				+
			
 
				+        set InitSegment(data) {
			
 
				+            initSegmentData = data;
			
 
				+        },
			
 
				+
			
 
				+        get InitSegment() {
			
 
				+            return initSegmentData;
			
 
				+        },
			
 
				+
			
 
				+        onCanplayCallback(callback) {
			
 
				+            onCanplayCallback = callback;
			
 
				+        },
			
 
				+
			
 
				+        close() {
			
 
				+            videoElement.pause();
			
 
				+            removeEventListener();
			
 
				+            mediaSource.removeSourceBuffer(sourceBuffer);
			
 
				+            mediaSource.endOfStream();
			
 
				+            sourceBuffer = null;
			
 
				+            mediaSource = null;
			
 
				+            videoElement = null;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    return new constructor(element);
			
 
				+
			
 
				+    function appendInitSegment() {
			
 
				+        if(mediaSource == null || mediaSource.readyState === 'end') {
			
 
				+            mediaSource = new MediaSource();
			
 
				+            addMediaSourceEventListener(mediaSource);
			
 
				+            videoElement.src = window.URL.createObjectURL(mediaSource);
			
 
				+            //console.log('new MediaSource');
			
 
				+            return;
			
 
				+        }
			
 
				+
			
 
				+        //console.log('appendInitSegment start');
			
 
				+        if(mediaSource.sourceBuffers.length === 0) {
			
 
				+            mediaSource.duration = 0;
			
 
				+            let codecs = 'video/mp4;codecs="avc1.' + codecInfo + '"';
			
 
				+            if(!MediaSource.isTypeSupported(codecs)) {
			
 
				+                //console.log('要播放视频格式 video/mp4;codecs="avc1.64002a", video/mp4;codecs="avc1.64002a"，您还需要安装一个额外的微软组件，参见 https://support.mozilla.org/kb/fix-video-audio-problems-firefox-windows')
			
 
				+                console.log('not support ' + codecs)
			
 
				+                return;
			
 
				+            }
			
 
				+            sourceBuffer = mediaSource.addSourceBuffer(codecs);
			
 
				+            addSourceBufferEventListener(sourceBuffer);
			
 
				+        }
			
 
				+
			
 
				+        let initSegment = initSegmentData;
			
 
				+        if(initSegment == null) {
			
 
				+            mediaSource.endOfStream();
			
 
				+            console.log('no initSegmentData');
			
 
				+        }
			
 
				+        //console.log(sourceBuffer)
			
 
				+        sourceBuffer.appendBuffer(initSegment);
			
 
				+        //console.log(sourceBuffer)
			
 
				+        // saveAs(new File(initSegment, "test"));
			
 
				+        //  Savesegments.set(initSegment, 0);
			
 
				+        //  segmentsLength += initSegment.length;
			
 
				+        //  segmentsNum --;
			
 
				+        console.log('appendInitSegment end')
			
 
				+        checkDelay();
			
 
				+    }
			
 
				+
			
 
				+    function appendNextMediaSegment(mediaData) {
			
 
				+
			
 
				+
			
 
				+        if(sourceBuffer == null) {
			
 
				+            segmentWaitDecode.push(mediaData);
			
 
				+            return;
			
 
				+        }
			
 
				+        //console.log(mediaSource.readyState, mediaSource.readyState,sourceBuffer.updating)
			
 
				+        if(mediaSource.readyState === 'closed' || mediaSource.readyState === "ended") {
			
 
				+            console.log('mediaSource closed or ended')
			
 
				+            return;
			
 
				+        }
			
 
				+
			
 
				+        if(onDurationChangeCallback) {
			
 
				+            //90000为采样率，先写死
			
 
				+            let rtpTimestamp = parseInt((videoElement.currentTime.toFixed(2) * 90000).toFixed(0)) + firstTimeStamp + 3600;//
			
 
				+            //console.log('callback time: ', rtpTimestamp)
			
 
				+            //console.log('sourceBuffer: ', sourceBuffer.timestampOffset)
			
 
				+            onDurationChangeCallback(rtpTimestamp);
			
 
				+        }
			
 
				+
			
 
				+        //console.count('一帧');
			
 
				+
			
 
				+        //try {
			
 
				+        if(segmentWaitDecode.length) {
			
 
				+            segmentWaitDecode.push(mediaData);
			
 
				+            //console.log(segmentWaitDecode)
			
 
				+        }else {
			
 
				+            if(!sourceBuffer.updating) {
			
 
				+                sourceBuffer.appendBuffer(mediaData);
			
 
				+            } else {
			
 
				+                segmentWaitDecode.push(mediaData);
			
 
				+            }
			
 
				+        }
			
 
				+        //}catch (e){
			
 
				+        //    console.log('appendNextMediaSegment Error')
			
 
				+        //}
			
 
				+
			
 
				+        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length &&  sourceBuffer.buffered.end(0) > DELAY) {
			
 
				+            if(!startPlay) {
			
 
				+                videoElement.play();
			
 
				+                console.warn('playbakrate: ', videoElement.playbackRate)
			
 
				+                ctrlDelayFlag = true;
			
 
				+            }
			
 
				+            startPlay = true;
			
 
				+        } else {
			
 
				+            if(!startPlay) {
			
 
				+                videoElement.pause();
			
 
				+            }
			
 
				+        }
			
 
				+        //console.log(sourceBuffer)
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * Video事件
			
 
				+     * @param videoElement video对象
			
 
				+     */
			
 
				+    function addVideoEventListener(videoElement) {
			
 
				+        videoElement.addEventListener('loadstart', onloadstart);
			
 
				+
			
 
				+        videoElement.addEventListener('waiting', onWaiting);
			
 
				+
			
 
				+        videoElement.addEventListener('durationchange', onDurationChange);
			
 
				+
			
 
				+        videoElement.addEventListener('timeupdate', timeupdate);
			
 
				+
			
 
				+        videoElement.addEventListener('canplay', oncanplay);
			
 
				+
			
 
				+        videoElement.addEventListener('canplaythrough', oncanplaythrough);
			
 
				+
			
 
				+        videoElement.addEventListener('error', onVideoError);
			
 
				+
			
 
				+        document.addEventListener('visibilitychange', onVisibilityChange);
			
 
				+    }
			
 
				+
			
 
				+    function onVisibilityChange(e) {
			
 
				+        if(document.visibilityState === 'visible') {
			
 
				+            ctrlDelayFlag = true;
			
 
				+            checkDelay();
			
 
				+            videoElement.play();
			
 
				+        } else {
			
 
				+            ctrlDelayFlag = false;
			
 
				+            videoElement.pause();
			
 
				+        }
			
 
				+        console.warn('visibilityState: ', document.visibilityState)
			
 
				+    }
			
 
				+
			
 
				+    function onloadstart() {
			
 
				+        console.log('loadstart');
			
 
				+    }
			
 
				+
			
 
				+    function onDurationChange() {
			
 
				+        //console.log('durationchange');
			
 
				+        if (mediaSource === null) {
			
 
				+            return;
			
 
				+        }
			
 
				+
			
 
				+        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length > 0) {
			
 
				+            checkBuffer();
			
 
				+        }
			
 
				+        //console.log('currentTime：', videoElement.currentTime);
			
 
				+        // if(onDurationChangeCallback) {
			
 
				+        //     //90000为采样率，先写死
			
 
				+        //     let rtpTimestamp = videoElement.currentTime * 90000 + firstTimeStamp ;
			
 
				+        //     //console.log('callback time: ', rtpTimestamp)
			
 
				+        //     onDurationChangeCallback(rtpTimestamp);
			
 
				+        // }
			
 
				+
			
 
				+        //try {
			
 
				+
			
 
				+        //}catch(e) {
			
 
				+        //    console.log('sourceBuffer has been moved')
			
 
				+        //}
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    function checkDelay() {
			
 
				+        if(sourceBuffer && sourceBuffer.buffered && sourceBuffer.buffered.length > 0) {
			
 
				+            if(ctrlDelayFlag) {
			
 
				+                let startTime = sourceBuffer.buffered.start(0);
			
 
				+                let endTime = sourceBuffer.buffered.end(0);
			
 
				+                let diffTime = (videoElement.currentTime === 0 ? endTime - startTime: endTime - videoElement.currentTime).toFixed(2);
			
 
				+                if(diffTime >= delay + 0.5) {
			
 
				+                    if(sourceBuffer.updating) {
			
 
				+                        return;
			
 
				+                    }
			
 
				+                    let tempCurrntTime = endTime - delay;
			
 
				+                    console.log('跳秒前', videoElement.currentTime)
			
 
				+                    videoElement.currentTime = tempCurrntTime.toFixed(3);
			
 
				+                    console.log('跳秒后', videoElement.currentTime, sourceBuffer.buffered.end(0), videoElement.duration)
			
 
				+                    //ctrlDelayFlag = false;
			
 
				+                } else if((diffTime < DELAY + 0.2 ) && diffTime >= DELAY) {
			
 
				+                    //console.warn('playbackRate:', 1, diffTime)
			
 
				+                    videoElement.playbackRate = 1;
			
 
				+                }
			
 
				+                else if(diffTime < DELAY) {
			
 
				+                    //console.warn('playbackRate:', 0.9, diffTime)
			
 
				+                    videoElement.playbackRate = 0.9;
			
 
				+                }else {
			
 
				+                    //console.warn('playbackRate:', 1.1, diffTime)
			
 
				+                    videoElement.playbackRate = 1.1;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        window.requestAnimationFrame(checkDelay);
			
 
				+    }
			
 
				+
			
 
				+    function timeupdate() {
			
 
				+        // console.log('******timeupdate******');
			
 
				+        // console.log(videoElement.currentTime);
			
 
				+        // console.log('******timeupdate end******')
			
 
				+    }
			
 
				+
			
 
				+    function oncanplay() {
			
 
				+        // if(isFirstTimeStamp && (firstTimeStamp == null)) {
			
 
				+        //     //firstTimeStamp =
			
 
				+        //     isFirstTimeStamp = false;
			
 
				+        // }
			
 
				+
			
 
				+        onCanplayCallback && onCanplayCallback(videoElement);
			
 
				+        console.log('canplay');
			
 
				+    }
			
 
				+
			
 
				+    function oncanplaythrough() {
			
 
				+        if(document.visibilityState === 'visible' && startPlay){ctrlDelayFlag = true};
			
 
				+        // console.log('canplaythrough');
			
 
				+    }
			
 
				+
			
 
				+    function onVideoError() {
			
 
				+        console.error('error');
			
 
				+        //console.log(e)
			
 
				+        console.error(videoElement.currentTime);
			
 
				+        console.error("Error " + videoElement.error.code + "; details: " + videoElement.error.message);
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    /**
			
 
				+     * MediaSource事件
			
 
				+     * @param mediaSource
			
 
				+     */
			
 
				+    function addMediaSourceEventListener(mediaSource) {
			
 
				+        mediaSource.addEventListener('sourceopen', onSourceOpen);
			
 
				+
			
 
				+        mediaSource.addEventListener('error', onMediaSourceError);
			
 
				+    }
			
 
				+
			
 
				+    function onSourceOpen() {
			
 
				+        console.log('OnsourceOpen');
			
 
				+        appendInitSegment(); //此处重新调用一次，是为了建立sourceBuffer
			
 
				+    }
			
 
				+
			
 
				+    function onMediaSourceError() {
			
 
				+        console.log('mediaSource error');
			
 
				+        console.log(videoElement.currentTime)
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * sourceBuffer事件
			
 
				+     */
			
 
				+    function addSourceBufferEventListener(sourceBuffer) {
			
 
				+        sourceBuffer.addEventListener('error', onSourceBufferError);
			
 
				+
			
 
				+        sourceBuffer.addEventListener('update', onUpdate);
			
 
				+    }
			
 
				+
			
 
				+    function onSourceBufferError() {
			
 
				+        console.log('sourceBuffer Error');
			
 
				+        console.log(videoElement.currentTime)
			
 
				+    }
			
 
				+
			
 
				+    function onUpdate() {
			
 
				+        //console.log('sourceBuffer update');
			
 
				+        if(segmentWaitDecode.length > 0) {
			
 
				+            if(!sourceBuffer.updating) {
			
 
				+                sourceBuffer.appendBuffer(segmentWaitDecode[0]);
			
 
				+
			
 
				+                //console.log('segmentWaitDecode:  ' + segmentWaitDecode.length)
			
 
				+                segmentWaitDecode.shift();
			
 
				+            }
			
 
				+        }
			
 
				+        //console.log(e)
			
 
				+    }
			
 
				+
			
 
				+    function checkBuffer() {
			
 
				+        let minute = 60;
			
 
				+        let bufferTime = 30;
			
 
				+        let startTime = sourceBuffer.buffered.start(0);
			
 
				+        let endTime = sourceBuffer.buffered.end(0);
			
 
				+        //console.log(endTime- videoElement.currentTime)
			
 
				+        if (!sourceBuffer.updating && (endTime - startTime > minute)) {
			
 
				+            sourceBuffer.remove(startTime, endTime - bufferTime);
			
 
				+            videoElement.play();
			
 
				+            console.log('remove buffer: ', startTime, ' - ', (endTime - bufferTime))
			
 
				+        }else if(sourceBuffer.updating && (endTime - startTime > minute)) {
			
 
				+            console.log('clear buffer failed!')
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    function onWaiting() {
			
 
				+        // console.log('waiting....');
			
 
				+        ctrlDelayFlag = false;
			
 
				+        // if(delay < 0.7) {
			
 
				+        //     if(waitingCount === 0) {
			
 
				+        //         time = Date.now();
			
 
				+        //         waitingCount++;
			
 
				+        //     }else {
			
 
				+        //         if((Date.now() - time) <= 5000) {
			
 
				+        //             waitingCount ++;
			
 
				+        //             if(waitingCount >= 5) {
			
 
				+        //                 delay += 0.1;
			
 
				+        //                 console.log('delay: ', delay);
			
 
				+        //                 time = Date.now();
			
 
				+        //                 waitingCount = 0;
			
 
				+        //             }
			
 
				+        //         } else {
			
 
				+        //             waitingCount = 1;
			
 
				+        //             time = Date.now();
			
 
				+        //         }
			
 
				+        //     }
			
 
				+        // }
			
 
				+    }
			
 
				+
			
 
				+    function removeEventListener() {
			
 
				+        document.removeEventListener('visibilitychange', onVisibilityChange);
			
 
				+        videoElement.removeEventListener('loadstart', onloadstart);
			
 
				+        videoElement.removeEventListener('waiting', onWaiting);
			
 
				+        videoElement.removeEventListener('durationchange', onDurationChange);
			
 
				+        videoElement.removeEventListener('timeupdate', timeupdate);
			
 
				+        videoElement.removeEventListener('canplay', oncanplay);
			
 
				+        videoElement.removeEventListener('canplaythrough', oncanplaythrough);
			
 
				+        videoElement.removeEventListener('error', onVideoError);
			
 
				+
			
 
				+        mediaSource.removeEventListener('sourceopen', onSourceOpen);
			
 
				+        mediaSource.removeEventListener('error', onMediaSourceError);
			
 
				+
			
 
				+        sourceBuffer.removeEventListener('error', onSourceBufferError);
			
 
				+        sourceBuffer.removeEventListener('update', onUpdate);
			
 
				+    }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+export default VideoMediaSource;
			
--- a/public/static/jinm/src/ROIDrawer.js
+++ b/public/static/jinm/src/ROIDrawer.js
@@ -0,0 +1,630 @@
 
				+import Drawer from './drawer.js';
			
 
				+
			
 
				+class ROIDrawer extends Drawer {
			
 
				+    constructor(props) {
			
 
				+        super(props);
			
 
				+        this.currentState = 'end';
			
 
				+        this.points = [];
			
 
				+        this.polygons = [];
			
 
				+        this.MAX_POLYGON = 1;
			
 
				+        this.onDrawROIFinishedCallback = null;
			
 
				+    }
			
 
				+
			
 
				+    _init() {
			
 
				+        this.context.lineWidth = 2;
			
 
				+        this.context.font = 'bold 20px Arial';
			
 
				+
			
 
				+        this.canvas.addEventListener('click', this._onClick.bind(this));
			
 
				+        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
			
 
				+        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
			
 
				+    }
			
 
				+
			
 
				+    _onClick(e) {
			
 
				+        switch (this.currentState) {
			
 
				+            case 'begin':
			
 
				+                this.points.push(getMousePos(this.canvas, e));
			
 
				+                this.currentState = 'firstPoint';
			
 
				+                break;
			
 
				+            case 'firstPoint': // 防止初始点点两次
			
 
				+                break;
			
 
				+            case 'move':
			
 
				+                this.currentState = 'points';
			
 
				+                break;
			
 
				+            case 'points':
			
 
				+                let currentPoint = getMousePos(this.canvas, e);
			
 
				+                if ((currentPoint.x === this.points[this.points.length - 1].x) && (currentPoint.y === this.points[this.points.length - 1].y)) {
			
 
				+                    return;
			
 
				+                }
			
 
				+                this.points.push(currentPoint);
			
 
				+                if (checkPolygon(this.points)) {
			
 
				+                    this.points.pop();
			
 
				+                }
			
 
				+                //console.log(this.points);
			
 
				+                break;
			
 
				+            case 'end':
			
 
				+                //console.log(this.points)
			
 
				+                break;
			
 
				+            default:
			
 
				+                console.log('unknown state: ', this.currentState);
			
 
				+                break;
			
 
				+        }
			
 
				+        // this._drawPolygons(this.points, true);
			
 
				+    }
			
 
				+
			
 
				+    _oncontextmenu(e) {
			
 
				+        e.preventDefault();
			
 
				+        if(this.currentState === 'end') { //防止点击右键启动绘制
			
 
				+            return ;
			
 
				+        }
			
 
				+        if (this.points.length <= 2) {
			
 
				+            this._resetPoints();
			
 
				+        } else {
			
 
				+            if ((this.points[0].x !== this.points[this.points.length - 1].x) || (this.points[0].y !== this.points[this.points.length - 1].y)) {
			
 
				+                this.points.push(this.points[0]);
			
 
				+            }
			
 
				+            if (checkPolygon(this.points)) {
			
 
				+                this.points.pop();
			
 
				+            } else {
			
 
				+                this.currentState = 'end';
			
 
				+                this.polygons.push([...this.points]);
			
 
				+                if(this.polygons.length < this.MAX_POLYGON) {
			
 
				+                    this._resetPoints();
			
 
				+                } else {
			
 
				+                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
			
 
				+                    this._drawPolygons([]);
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    _onmousemove(e) {
			
 
				+        let pos = getMousePos(this.canvas, e);
			
 
				+        //console.log('mousemove');
			
 
				+        if (e.button === 0) {
			
 
				+            if (this.currentState === 'firstPoint') {
			
 
				+                this.currentState = 'move';
			
 
				+                this.points.push(pos);
			
 
				+            } else if (this.currentState === 'move') {
			
 
				+                this.points.pop();
			
 
				+                this.points.push(pos);
			
 
				+            }
			
 
				+            if (this.currentState !== 'end') {
			
 
				+                this.points.push(pos);
			
 
				+                this._drawPolygons(this.points);
			
 
				+                this.points.pop();
			
 
				+            } else {
			
 
				+                //this._drawPolygons(this.points);
			
 
				+            }
			
 
				+            if(this.currentState === 'begin') {
			
 
				+                this._drawText('区域' + (this.polygons.length + 1), pos.x, pos.y)
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    getROIData() {
			
 
				+        if(this.currentState !== 'end') { //非完成状态
			
 
				+            return null;
			
 
				+        }
			
 
				+        let polygons = [];
			
 
				+        this.polygons.map((points, k) =>{
			
 
				+            let data = points.slice(0, points.length - 1);
			
 
				+            data.map((point, k) => {
			
 
				+                data[k] = this._to8191Coordinate(point, this.canvas);
			
 
				+            });
			
 
				+            polygons.push([...data]);
			
 
				+        });
			
 
				+
			
 
				+        return polygons;
			
 
				+    }
			
 
				+
			
 
				+    setROI(polygons) {
			
 
				+        if(!polygons) {
			
 
				+            return;
			
 
				+        }
			
 
				+        let data = [];
			
 
				+        this.polygons = [];
			
 
				+        polygons.map((points, k) => {
			
 
				+            points.map((point, k) => {
			
 
				+                let result = this._toRealCoordinate(point.x, point.y);
			
 
				+                data[k] = {x: result[0], y: result[1]};
			
 
				+            });
			
 
				+            if(data.length) {
			
 
				+                data[data.length] = data[0];
			
 
				+            }
			
 
				+            this.polygons.push([...data]);
			
 
				+            data = [];
			
 
				+        });
			
 
				+        this.currentState = 'end';
			
 
				+        this.points = [];
			
 
				+        this._drawPolygons(this.points);
			
 
				+    }
			
 
				+
			
 
				+    redrawROI() {
			
 
				+        this._drawPolygons(this.points);
			
 
				+    }
			
 
				+
			
 
				+    reset() {
			
 
				+        this.currentState = 'begin';
			
 
				+        this.polygons = [];
			
 
				+        this.points.length = 0;
			
 
				+        this._drawPolygons(this.points);
			
 
				+    }
			
 
				+
			
 
				+    setROIFinishedCallback(callback) {
			
 
				+        this.onDrawROIFinishedCallback = callback;
			
 
				+    }
			
 
				+
			
 
				+    setPolygonNum(num) {
			
 
				+        this.MAX_POLYGON = num;
			
 
				+    }
			
 
				+
			
 
				+    terminate() {
			
 
				+        this.clearCanvas();
			
 
				+        this.canvas.width = 0;
			
 
				+        this.canvas.height = 0;
			
 
				+        this.currentState = 'end';
			
 
				+        this.points.length = 0;
			
 
				+        this.canvas.removeEventListener('click', this._onClick);
			
 
				+        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
			
 
				+        this.canvas.removeEventListener('mousemove', this._onmousemove);
			
 
				+    }
			
 
				+
			
 
				+    _drawPolygons(points) {
			
 
				+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			
 
				+        this.polygons.map((points, k)=> {
			
 
				+            this._drawPolygon(points);
			
 
				+        });
			
 
				+        this._drawPolygon(points);
			
 
				+    }
			
 
				+
			
 
				+    _drawPolygon(points) {
			
 
				+        if (!points.length) {
			
 
				+            return;
			
 
				+        }
			
 
				+        const end = this.currentState === 'end';
			
 
				+        //console.log(points)
			
 
				+        this.context.strokeStyle = end ? '#0000ff' : "#ffff00";
			
 
				+
			
 
				+        this.context.beginPath();
			
 
				+        this.context.moveTo(points[0].x, points[0].y);
			
 
				+        for (let i = 1; i < points.length; i++) {
			
 
				+            this.context.lineTo(points[i].x, points[i].y);
			
 
				+        }
			
 
				+        if (end) {
			
 
				+            // draw is done, fill polygon with a color
			
 
				+            this.context.fillStyle = "rgba(255, 0, 0, 0.2)";
			
 
				+            this.context.fill();
			
 
				+        } else {
			
 
				+            this.context.stroke();
			
 
				+        }
			
 
				+        this.context.closePath();
			
 
				+
			
 
				+        this.polygons.map((points, k)=> {
			
 
				+            this._drawText('区域' + (k + 1), points[0].x - 20, points[0].y - 10);
			
 
				+        });
			
 
				+    }
			
 
				+
			
 
				+    _resetPoints() {
			
 
				+        this.currentState = 'begin';
			
 
				+        this.points.length = 0;
			
 
				+        this._drawPolygons(this.points);
			
 
				+    }
			
 
				+
			
 
				+    _drawText(text, x, y) {
			
 
				+        this.context.beginPath();
			
 
				+        this.context.fillStyle = "rgba(255, 255, 0, 1)";
			
 
				+        this.context.fillText(text, x, y);
			
 
				+        this.context.closePath();
			
 
				+    }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+class StandingDrawer extends Drawer {
			
 
				+    constructor(props) {
			
 
				+        super(props);
			
 
				+        this.currentState = 'end';
			
 
				+        this.points = [];
			
 
				+        this.onDrawROIFinishedCallback = null;
			
 
				+    }
			
 
				+
			
 
				+    _init() {
			
 
				+        this.context.lineWidth = 2;
			
 
				+        this.context.font = 'bold 20px Arial';
			
 
				+
			
 
				+        this.canvas.addEventListener('click', this._onClick.bind(this));
			
 
				+        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
			
 
				+        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
			
 
				+    }
			
 
				+
			
 
				+    _onClick(e) {
			
 
				+        let pos = getMousePos(this.canvas, e);
			
 
				+        switch (this.currentState) {
			
 
				+            case 'begin':
			
 
				+                this.points.push(pos);
			
 
				+                this.currentState = 'firstPoint';
			
 
				+                break;
			
 
				+            case 'firstPoint': // 防止初始点点两次
			
 
				+                break;
			
 
				+            case 'move':
			
 
				+                this.currentState = 'points';
			
 
				+                break;
			
 
				+            case 'points':
			
 
				+                if (((pos.x === this.points[this.points.length - 1].x) && (pos.y === this.points[this.points.length - 1].y))
			
 
				+                    || this.points.length > 6) {
			
 
				+                    return;
			
 
				+                }
			
 
				+                this.points.push(pos);
			
 
				+                let points = this.points.length > 4 ? this.points.slice(0, 4) : this.points;
			
 
				+                if(checkPolygon(points)) {
			
 
				+                    this.points.pop();
			
 
				+                }
			
 
				+                if(this.points.length === 6) {
			
 
				+                    this.currentState = 'end';
			
 
				+                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
			
 
				+                }
			
 
				+                this._drawArea(this.points);
			
 
				+                break;
			
 
				+            case 'end':
			
 
				+                break;
			
 
				+            default:
			
 
				+                console.log('unknown state: ', this.currentState);
			
 
				+                break;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    _oncontextmenu(e) {
			
 
				+        e.preventDefault();
			
 
				+    }
			
 
				+
			
 
				+    _onmousemove(e) {
			
 
				+        let pos = getMousePos(this.canvas, e);
			
 
				+        if (e.button === 0) {
			
 
				+            if (this.currentState === 'firstPoint') {
			
 
				+                this.currentState = 'move';
			
 
				+                this.points.push(pos);
			
 
				+            } else if (this.currentState === 'move') {
			
 
				+                this.points.pop();
			
 
				+                this.points.push(pos);
			
 
				+            }
			
 
				+            if (this.currentState !== 'end') {
			
 
				+                this.points.push(pos);
			
 
				+                this._drawArea(this.points);
			
 
				+                this.points.pop();
			
 
				+            } else {
			
 
				+            }
			
 
				+            // if(this.currentState === 'begin') {
			
 
				+            //     this._drawText('区域' + (this.polygons.length + 1), pos.x, pos.y)
			
 
				+            // }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    _drawArea(points) {
			
 
				+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			
 
				+        let polygon = points.length > 4 ? points.slice(0, 4) : points;
			
 
				+        this._drawPolygon(polygon);
			
 
				+        let line = points.length > 4 ? points.slice(4) : [];
			
 
				+        this._drawLine(line);
			
 
				+    }
			
 
				+
			
 
				+    _drawPolygon(points) {
			
 
				+        if(!points.length) {
			
 
				+            return;
			
 
				+        }
			
 
				+        this.context.strokeStyle = '#00ff00';
			
 
				+        this.context.beginPath();
			
 
				+        this.context.moveTo(points[0].x, points[0].y);
			
 
				+        for (let i = 1; i < points.length; i++) {
			
 
				+            this.context.lineTo(points[i].x, points[i].y);
			
 
				+        }
			
 
				+        this.points.length >= 4 && this.context.lineTo(points[0].x, points[0].y);
			
 
				+        this.context.stroke();
			
 
				+        this.context.closePath();
			
 
				+    }
			
 
				+
			
 
				+    _drawLine(points) {
			
 
				+        if(points.length !== 2) {
			
 
				+            return;
			
 
				+        }
			
 
				+        this.context.strokeStyle = '#0000ff';
			
 
				+        this.context.beginPath();
			
 
				+        this.context.moveTo(points[0].x, points[0].y);
			
 
				+        this.context.lineTo(points[1].x, points[1].y);
			
 
				+        this.context.stroke();
			
 
				+        this.context.closePath();
			
 
				+    }
			
 
				+
			
 
				+    getROIData() {
			
 
				+        if(this.currentState !== 'end') { //非完成状态
			
 
				+            return null;
			
 
				+        }
			
 
				+        let points = [];
			
 
				+        this.points.map((point, k) => {
			
 
				+            points.push(this._to8191Coordinate(point, this.canvas));
			
 
				+        });
			
 
				+        return points;
			
 
				+    }
			
 
				+
			
 
				+    setROI(points) {
			
 
				+        if(!points) {
			
 
				+            return;
			
 
				+        }
			
 
				+        let data = [];
			
 
				+        points.map((point, k) => {
			
 
				+            let result = this._toRealCoordinate(point.x, point.y);
			
 
				+            data[k] = {x: result[0], y: result[1]};
			
 
				+        });
			
 
				+        this.points = [...data];
			
 
				+        this._drawArea(data);
			
 
				+        this.currentState = 'end';
			
 
				+    }
			
 
				+
			
 
				+    redrawROI() {
			
 
				+        this._drawArea(this.points);
			
 
				+    }
			
 
				+
			
 
				+    reset() {
			
 
				+        this.currentState = 'begin';
			
 
				+        this.points.length = 0;
			
 
				+        this._drawArea(this.points);
			
 
				+    }
			
 
				+
			
 
				+    setROIFinishedCallback(callback) {
			
 
				+        this.onDrawROIFinishedCallback = callback;
			
 
				+    }
			
 
				+
			
 
				+    terminate() {
			
 
				+        this.clearCanvas();
			
 
				+        this.canvas.width = 0;
			
 
				+        this.canvas.height = 0;
			
 
				+        this.currentState = 'end';
			
 
				+        this.points.length = 0;
			
 
				+        this.canvas.removeEventListener('click', this._onClick);
			
 
				+        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
			
 
				+        this.canvas.removeEventListener('mousemove', this._onmousemove);
			
 
				+    }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+class SpeedLine extends Drawer {
			
 
				+    constructor(canvas) {
			
 
				+        super(canvas);
			
 
				+        this.currentState = 'end';
			
 
				+        this.MAXLINE = 2;
			
 
				+        this.points = [];
			
 
				+        this.onDrawROIFinishedCallback = null;
			
 
				+    }
			
 
				+
			
 
				+    _init() {
			
 
				+        this.canvas.addEventListener('click', this._onClick.bind(this));
			
 
				+        this.canvas.addEventListener('contextmenu', this._oncontextmenu.bind(this));
			
 
				+        this.canvas.addEventListener('mousemove', this._onmousemove.bind(this));
			
 
				+    }
			
 
				+
			
 
				+    _onClick(e) {
			
 
				+        if(this.points.length === this.MAXLINE * 2) {
			
 
				+            return;
			
 
				+        }
			
 
				+        switch (this.currentState) {
			
 
				+            case 'begin':
			
 
				+                this.points.push(getMousePos(this.canvas, e));
			
 
				+                this.currentState = 'firstPoint';
			
 
				+                break;
			
 
				+            case 'firstPoint': // 防止初始点点两次
			
 
				+                break;
			
 
				+            case 'move':
			
 
				+                this.currentState = 'points';
			
 
				+                break;
			
 
				+            case 'points':
			
 
				+                let currentPoint = getMousePos(this.canvas, e);
			
 
				+                if ((currentPoint.x === this.points[this.points.length - 1].x) && (currentPoint.y === this.points[this.points.length - 1].y)) {
			
 
				+                    return;
			
 
				+                }
			
 
				+                this.points.push(currentPoint);
			
 
				+                if(this.points.length === this.MAXLINE * 2) {
			
 
				+                    if (this._checkLine(this.points)) {
			
 
				+                        this.points.pop();
			
 
				+                    } else {
			
 
				+                        this.currentState = 'end';
			
 
				+                        this._drawLines(this.points);
			
 
				+                        this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
			
 
				+                    }
			
 
				+                }
			
 
				+                break;
			
 
				+            case 'end':
			
 
				+                break;
			
 
				+            default:
			
 
				+                console.log('unknown state: ', this.currentState);
			
 
				+                break;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    _onmousemove(e) {
			
 
				+        let pos = getMousePos(this.canvas, e);
			
 
				+        console.log(e);
			
 
				+        if (e.button === 0) {
			
 
				+            if (this.currentState === 'firstPoint') {
			
 
				+                this.currentState = 'move';
			
 
				+                this.points.push(pos);
			
 
				+            } else if (this.currentState === 'move') {
			
 
				+                this.points.pop();
			
 
				+                this.points.push(pos);
			
 
				+            }
			
 
				+            if (this.currentState !== 'end' && this.currentState !== 'begin') {
			
 
				+                this.points.push(pos);
			
 
				+                this._drawLines(this.points);
			
 
				+                this.points.pop();
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    _oncontextmenu(e) {
			
 
				+        e.preventDefault();
			
 
				+    }
			
 
				+    /**
			
 
				+     *
			
 
				+     * @param points [] x1,y1,x2,y2...
			
 
				+     * @private
			
 
				+     */
			
 
				+    _checkLine(points) {
			
 
				+        for (let i = 0; i < points.length - 3; i = i + 2) {
			
 
				+            for (let j = i + 2; j < points.length - 1; j = j + 2) {
			
 
				+                let result = segmentsIntr(points[i], points[i + 1], points[j], points[j + 1]);
			
 
				+                if (result) {
			
 
				+                    console.log('intersect:');
			
 
				+                    console.log(result)
			
 
				+                    return result;
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        return false;
			
 
				+    }
			
 
				+
			
 
				+    _drawLines(points) {
			
 
				+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			
 
				+        if (!points.length) {
			
 
				+            return;
			
 
				+        }
			
 
				+        const end = this.currentState === 'end';
			
 
				+        this.context.strokeStyle = end ? '#00ff00' : "#ffff00";
			
 
				+        this.context.beginPath();
			
 
				+        for (let i = 0; i < points.length - 1; i = i + 2) {
			
 
				+            this.context.moveTo(points[i].x, points[i].y);
			
 
				+            this.context.lineTo(points[i + 1].x, points[i + 1].y);
			
 
				+        }
			
 
				+        this.context.stroke();
			
 
				+        this.context.closePath();
			
 
				+    }
			
 
				+
			
 
				+    getROIData() {
			
 
				+        if(this.currentState !== 'end') { //非完成状态
			
 
				+            return null;
			
 
				+        }
			
 
				+        let data = this.points;
			
 
				+        data.map((point, k) => {
			
 
				+            data[k] = this._to8191Coordinate(point, this.canvas);
			
 
				+        });
			
 
				+        return data;
			
 
				+    }
			
 
				+
			
 
				+    setROI(data) {
			
 
				+        data.map((point, k) => {
			
 
				+            let result = this._toRealCoordinate(point.x, point.y);
			
 
				+            data[k] = {x: result[0], y: result[1]};
			
 
				+        });
			
 
				+
			
 
				+        this.currentState = 'end';
			
 
				+        this.points = data;
			
 
				+        this._drawLines(this.points);
			
 
				+    }
			
 
				+
			
 
				+    redrawROI() {
			
 
				+        this._drawLines(this.points);
			
 
				+    }
			
 
				+
			
 
				+    reset() {
			
 
				+        this.currentState = 'begin';
			
 
				+        this.points.length = 0;
			
 
				+        console.log(this.points)
			
 
				+        this._drawLines(this.points);
			
 
				+    }
			
 
				+
			
 
				+    setROIFinishedCallback(callback) {
			
 
				+        this.onDrawROIFinishedCallback = callback;
			
 
				+    }
			
 
				+
			
 
				+    setLineNum(num) {
			
 
				+        this.MAXLINE = num;
			
 
				+    }
			
 
				+
			
 
				+    terminate() {
			
 
				+        this.clearCanvas();
			
 
				+        this.canvas.width = 0;
			
 
				+        this.canvas.height = 0;
			
 
				+        this.currentState = 'end';
			
 
				+        this.points.length = 0;
			
 
				+        this.canvas.removeEventListener('click', this._onClick);
			
 
				+        this.canvas.removeEventListener('contextmenu', this._oncontextmenu);
			
 
				+        this.canvas.removeEventListener('mousemove', this._onmousemove);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class BlankROIDrawer extends Drawer {
			
 
				+    constructor(canvas) {
			
 
				+        super(canvas);
			
 
				+    }
			
 
				+    getROIData() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    setROI() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    redrawROI() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    reset() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    terminate() {
			
 
				+
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function getMousePos(canvas, event) {
			
 
				+    var rect = canvas.getBoundingClientRect();
			
 
				+    var x = event.clientX - rect.left * (canvas.width / rect.width);
			
 
				+    var y = event.clientY - rect.top * (canvas.height / rect.height);
			
 
				+    //console.log("x:"+x+",y:"+y);
			
 
				+    return {x: x, y: y};
			
 
				+}
			
 
				+
			
 
				+function checkPolygon(points) {
			
 
				+    for (let i = 0, length = points.length - 1; i < length; i++) {
			
 
				+        for (let j = i + 1, len = points.length - 1; j < len; j++) {
			
 
				+            let result = segmentsIntr(points[i], points[i + 1], points[j], points[j + 1]);
			
 
				+            if (result) {
			
 
				+                console.log('intersect:');
			
 
				+                console.log(result)
			
 
				+                return result;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+    return false;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+function segmentsIntr(a, b, c, d) {
			
 
				+
			
 
				+    // 三角形abc 面积的2倍
			
 
				+    var area_abc = (a.x - c.x) * (b.y - c.y) - (a.y - c.y) * (b.x - c.x);
			
 
				+
			
 
				+    // 三角形abd 面积的2倍
			
 
				+    var area_abd = (a.x - d.x) * (b.y - d.y) - (a.y - d.y) * (b.x - d.x);
			
 
				+
			
 
				+    // 面积符号相同则两点在线段同侧,不相交 (对点在线段上的情况,本例当作不相交处理);
			
 
				+    if (area_abc * area_abd >= 0) {
			
 
				+        return false;
			
 
				+    }
			
 
				+
			
 
				+    // 三角形cda 面积的2倍
			
 
				+    var area_cda = (c.x - a.x) * (d.y - a.y) - (c.y - a.y) * (d.x - a.x);
			
 
				+    // 三角形cdb 面积的2倍
			
 
				+    // 注意: 这里有一个小优化.不需要再用公式计算面积,而是通过已知的三个面积加减得出.
			
 
				+    var area_cdb = area_cda + area_abc - area_abd;
			
 
				+    if (area_cda * area_cdb >= 0) {
			
 
				+        return false;
			
 
				+    }
			
 
				+
			
 
				+    //计算交点坐标
			
 
				+    var t = area_cda / (area_abd - area_abc);
			
 
				+    var dx = t * (b.x - a.x),
			
 
				+        dy = t * (b.y - a.y);
			
 
				+    return {x: a.x + dx, y: a.y + dy};
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+export  {ROIDrawer, StandingDrawer, SpeedLine, BlankROIDrawer};
			
--- a/public/static/jinm/src/drawer.js
+++ b/public/static/jinm/src/drawer.js
@@ -0,0 +1,98 @@
 
				+class Drawer {
			
 
				+    constructor(canvas) {
			
 
				+        this.canvas = canvas;
			
 
				+        this.context = canvas.getContext('2d');
			
 
				+        this._init();
			
 
				+    }
			
 
				+
			
 
				+    _init() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    cover(video) {
			
 
				+        //console.log('cover')
			
 
				+        let offsetLeft = 0, //canvas和video同级时
			
 
				+            offsetTop = 0,
			
 
				+            //offsetLeft = getOffsetRect(video).left, //canvas为body的子元素时，根据DOM文档定位
			
 
				+            //offsetTop = getOffsetRect(video).top,
			
 
				+            videoHeight = video.videoHeight,
			
 
				+            videoWidth = video.videoWidth,
			
 
				+            width = video.getBoundingClientRect().width || videoWidth,
			
 
				+            height = video.getBoundingClientRect().height || videoHeight;
			
 
				+        this.canvas.style.position = 'absolute';
			
 
				+
			
 
				+        //this.canvas.style.top = offsetTop +'px';
			
 
				+
			
 
				+        //this.canvas.style.height = height +'px';
			
 
				+
			
 
				+        let tempHeight = width * videoHeight / videoWidth;
			
 
				+        if (tempHeight > height) { // 如果缩放后的高度大于标签宽度，则按照height缩放width
			
 
				+            this.canvas.height = height;
			
 
				+            this.canvas.width = videoWidth / videoHeight * height;
			
 
				+            this.canvas.style.height = height + 'px';
			
 
				+            this.canvas.style.width = videoWidth / videoHeight * height + 'px';
			
 
				+            this.canvas.style.top = offsetTop + 'px';
			
 
				+            this.canvas.style.left = offsetLeft + (width - videoWidth / videoHeight * height) / 2 + 'px';
			
 
				+        } else {
			
 
				+            this.canvas.width = width;
			
 
				+            this.canvas.height = width * videoHeight / videoWidth;
			
 
				+            this.canvas.style.width = width +'px';
			
 
				+            this.canvas.style.height = width * videoHeight / videoWidth +'px';
			
 
				+            this.canvas.style.left = offsetLeft + 'px';
			
 
				+            this.canvas.style.top = offsetTop + (height - width * videoHeight / videoWidth) / 2 + 'px';
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    clearCanvas() {
			
 
				+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			
 
				+    }
			
 
				+
			
 
				+    terminate() {
			
 
				+        this.clearCanvas();
			
 
				+        this.canvas.width = 0;
			
 
				+        this.canvas.height = 0;
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 8191坐标系转真实坐标
			
 
				+     * @param x 8191坐标系 x坐标
			
 
				+     * @param y 8191坐标系 y坐标
			
 
				+     * @returns {number[]} 数组
			
 
				+     * @private
			
 
				+     */
			
 
				+    _toRealCoordinate(x, y) {
			
 
				+        return [parseInt(x * this.canvas.width / 8191), parseInt(y * this.canvas.height / 8191)];
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 真实坐标系转8191坐标系
			
 
				+     * @param point {x: x, y: y}
			
 
				+     * @param canvas 坐标系所在的画布
			
 
				+     * return {x: x, y: y}
			
 
				+     */
			
 
				+     _to8191Coordinate(point, canvas) {
			
 
				+        return {x: parseInt(point.x * 8191 / canvas.width), y: parseInt(point.y * 8191 / canvas.height)}
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/**
			
 
				+ * 获取元素相对于dom文档的坐标
			
 
				+ * @param elem
			
 
				+ * @returns {{top: number, left: number}}
			
 
				+ */
			
 
				+function getOffsetRect(elem) {
			
 
				+    let box = elem.getBoundingClientRect();
			
 
				+    let body = document.body;
			
 
				+    let docElem = document.documentElement;
			
 
				+    let scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
			
 
				+    let scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
			
 
				+    let clientTop = docElem.clientTop || body.clientTop || 0;
			
 
				+    let clientLeft = docElem.clientLeft || body.clientLeft || 0;
			
 
				+    let top = box.top + scrollTop - clientTop;
			
 
				+    let left = box.left + scrollLeft - clientLeft;
			
 
				+    return {top: Math.round(top), left: Math.round(left)}
			
 
				+}
			
 
				+
			
 
				+
			
 
				+export default Drawer;
			
--- a/public/static/jinm/src/ivsDrawer.js
+++ b/public/static/jinm/src/ivsDrawer.js
@@ -0,0 +1,275 @@
 
				+import Drawer from './drawer.js';
			
 
				+class IvsDrawer extends Drawer {
			
 
				+    constructor(canvas) {
			
 
				+        super(canvas);
			
 
				+        this.confidence = 200; //关键点最低置信度
			
 
				+        this.displayNum = 7; //大于等于该值时才绘制姿态
			
 
				+    }
			
 
				+
			
 
				+    _init() {
			
 
				+        this.context.textAlign = 'left';
			
 
				+        this.context.textBaseline = 'bottom';
			
 
				+    }
			
 
				+
			
 
				+    draw(data, time) {
			
 
				+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			
 
				+        let rect = null,
			
 
				+            length = 0,
			
 
				+            undrawPoints = [],
			
 
				+            bodyLineWidth = 0,
			
 
				+            confidencePoint = [];
			
 
				+        let bodyCount = 0,
			
 
				+            speedBodyCount = 0;
			
 
				+        data.map((content, k) => {
			
 
				+            let {
			
 
				+                points,
			
 
				+                boundingBox,
			
 
				+                handsUp,
			
 
				+                boxConfidence,
			
 
				+                Loiter,
			
 
				+                Standing,
			
 
				+                Alone,
			
 
				+                guides,
			
 
				+                speed,
			
 
				+                overSpeed,
			
 
				+                id
			
 
				+            } = content;
			
 
				+            switch (content.type) {
			
 
				+                case 'rect':
			
 
				+                    this.context.beginPath();
			
 
				+                    this.context.strokeStyle = '#00ff00';
			
 
				+                    this.context.fillStyle = '#00ff00';
			
 
				+                    this.context.lineWidth = 1;//线条的宽度
			
 
				+                    this.context.font = 'bold 20px Arial';
			
 
				+                    if (!content.quality) {
			
 
				+                        this.context.strokeStyle = '#ff0000';
			
 
				+                    }
			
 
				+
			
 
				+                    rect = this._toRealCoordinate(content.rect[0], content.rect[1]);
			
 
				+                    rect.push.apply(rect, this._toRealCoordinate(content.rect[2], content.rect[3]));
			
 
				+                    this._drawRect(rect);
			
 
				+
			
 
				+                    //this.context.font = 'bold 20px Arial';
			
 
				+                    //this.context.fillStyle = '#00ff00';
			
 
				+                    // this._drawText(content.id, rect[0], rect[1]);
			
 
				+                    // this._drawText(content.id, rect[0], rect[1]);
			
 
				+                    // if (content.text) {
			
 
				+                    //     this._drawText(content.text, rect[0], rect[1] - 20);
			
 
				+                    // }
			
 
				+                    if (content.text !== undefined) {
			
 
				+                        this._drawText(content.text, rect[0], rect[1] - 5);
			
 
				+                    }
			
 
				+                    //console.log('绘制 ', time)
			
 
				+                    this.context.stroke();
			
 
				+                    this.context.closePath();
			
 
				+                    break;
			
 
				+                case 'text':
			
 
				+                    break;
			
 
				+                case 'coco-pose':
			
 
				+                    length = points.length;
			
 
				+                    undrawPoints = [];
			
 
				+                    bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
			
 
				+                    //过滤掉置信点不够的情况
			
 
				+                    confidencePoint = points.filter((point) => {
			
 
				+                        return point.confidence > this.confidence;
			
 
				+                    });
			
 
				+                    if (confidencePoint.length >= this.displayNum) {
			
 
				+                        this.context.lineWidth = bodyLineWidth;
			
 
				+                        //绘制实线
			
 
				+                        for (let i = 0; i < length; i++) {
			
 
				+                            if (undrawPoints.includes(i) || points[i].parent === -1) {
			
 
				+                                continue;
			
 
				+                            }
			
 
				+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
			
 
				+                            let parentNode = points[points[i].parent];
			
 
				+                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);
			
 
				+
			
 
				+                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
			
 
				+                            //confidence高于阈值时画实线，否则透明度降低
			
 
				+                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
			
 
				+                                this.context.globalAlpha = 0.3;
			
 
				+                            }
			
 
				+                            this.context.beginPath();
			
 
				+                            this.context.moveTo(point[0], point[1]);
			
 
				+                            this.context.lineTo(parentPoint[0], parentPoint[1]);
			
 
				+                            this.context.stroke();
			
 
				+                            this.context.globalAlpha = 1;
			
 
				+                            this.context.closePath();
			
 
				+                        }
			
 
				+                        //绘制圆
			
 
				+                        for (let i = 0; i < length; i++) {
			
 
				+                            if (undrawPoints.includes(i)) {
			
 
				+                                continue;
			
 
				+                            }
			
 
				+                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
			
 
				+                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
			
 
				+                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
			
 
				+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
			
 
				+                            this.context.beginPath();
			
 
				+                            this._drawArc(point[0], point[1], bodyLineWidth);
			
 
				+                            this.context.fill();
			
 
				+                            this.context.closePath();
			
 
				+                            //}
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        //console.log('only', confidencePoint.length, ' points');
			
 
				+                    }
			
 
				+                    //绘制人体框
			
 
				+                    if (boxConfidence >= 0) {
			
 
				+                        this.context.beginPath();
			
 
				+                        this.context.lineWidth = 1;//线条的宽度
			
 
				+                        this.context.strokeStyle = handsUp ? '#ff0000': '#0000ff';
			
 
				+                        this.context.fillStyle = '#ffff00';
			
 
				+                        this.context.font = 'bold 20px Arial';
			
 
				+                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
			
 
				+                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
			
 
				+                        this._drawRect(rect);
			
 
				+                        this._drawText(content.id, rect[0], rect[1] - 10);
			
 
				+                        this.context.stroke();
			
 
				+                        this.context.closePath();
			
 
				+                    }
			
 
				+                    break;
			
 
				+                case 'region-detect':
			
 
				+                    let {state, area} = content;
			
 
				+                    this.context.lineWidth = 2;
			
 
				+                    this.context.strokeStyle = (state === 1) ? '#ffff00' : '#ff0000';
			
 
				+
			
 
				+                    this.context.beginPath();
			
 
				+                    let beginPoint = this._toRealCoordinate(area[0].x, area[0].y);
			
 
				+                    this.context.moveTo(beginPoint[0], beginPoint[1]);
			
 
				+                    for (let i = 1; i < area.length; i++) {
			
 
				+                        let point = this._toRealCoordinate(area[i].x, area[i].y);
			
 
				+                        this.context.lineTo(point[0], point[1]);
			
 
				+                    }
			
 
				+                    this.context.lineTo(beginPoint[0], beginPoint[1]);
			
 
				+                    this.context.stroke();
			
 
				+                    this.context.closePath();
			
 
				+                    break;
			
 
				+                case 'coco-poseex':
			
 
				+                    length = points.length;
			
 
				+                    undrawPoints = [];
			
 
				+                    bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
			
 
				+                    //过滤掉置信点不够的情况
			
 
				+                    confidencePoint = points.filter((point) => {
			
 
				+                        return point.confidence > this.confidence;
			
 
				+                    });
			
 
				+                    if (confidencePoint.length >= this.displayNum) {
			
 
				+                        this.context.lineWidth = bodyLineWidth;
			
 
				+                        //绘制实线
			
 
				+                        for (let i = 0; i < length; i++) {
			
 
				+                            if (undrawPoints.includes(i) || points[i].parent === -1) {
			
 
				+                                continue;
			
 
				+                            }
			
 
				+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
			
 
				+                            let parentNode = points[points[i].parent];
			
 
				+                            let parentPoint = this._toRealCoordinate(parentNode.x, parentNode.y);
			
 
				+
			
 
				+                            this.context.strokeStyle = handsUp ? '#ff0000' : points[i].pointColor;
			
 
				+                            //confidence高于阈值时画实线，否则透明度降低
			
 
				+                            if ((points[i].confidence <= this.confidence) || (parentNode.confidence <= this.confidence)) {
			
 
				+                                this.context.globalAlpha = 0.3;
			
 
				+                            }
			
 
				+                            this.context.beginPath();
			
 
				+                            this.context.moveTo(point[0], point[1]);
			
 
				+                            this.context.lineTo(parentPoint[0], parentPoint[1]);
			
 
				+                            this.context.stroke();
			
 
				+                            this.context.globalAlpha = 1;
			
 
				+                            this.context.closePath();
			
 
				+                        }
			
 
				+                        //绘制圆
			
 
				+                        for (let i = 0; i < length; i++) {
			
 
				+                            if (undrawPoints.includes(i)) {
			
 
				+                                continue;
			
 
				+                            }
			
 
				+                            this.context.fillStyle = handsUp ? '#ffff00' : points[i].pointColor;
			
 
				+                            //if ((points[i].parent !== -1 && points[i].confidence > this.confidence && points[points[i].parent].confidence > this.confidence)
			
 
				+                            //    || (points[i].parent === -1 && points[i].confidence > this.confidence)) {
			
 
				+                            let point = this._toRealCoordinate(points[i].x, points[i].y);
			
 
				+                            this.context.beginPath();
			
 
				+                            this._drawArc(point[0], point[1], bodyLineWidth);
			
 
				+                            this.context.fill();
			
 
				+                            this.context.closePath();
			
 
				+                            //}
			
 
				+                        }
			
 
				+                    } else {
			
 
				+                        //console.log('only', confidencePoint.length, ' points');
			
 
				+                    }
			
 
				+                    //绘制人体框
			
 
				+                    if (boxConfidence >= 0) {
			
 
				+                        let strokeStyle = (Loiter === 2 || Standing || Alone) ? '#ff0000' : (Loiter ? '#EFB842' : '#0000ff');
			
 
				+                        this.context.beginPath();
			
 
				+                        this.context.lineWidth = 1;//线条的宽度
			
 
				+                        this.context.strokeStyle = strokeStyle;
			
 
				+                        this.context.fillStyle = '#ffff00';
			
 
				+                        this.context.font = 'bold 20px Arial';
			
 
				+                        rect = this._toRealCoordinate(boundingBox[0], boundingBox[1]);
			
 
				+                        rect.push.apply(rect, this._toRealCoordinate(boundingBox[2], boundingBox[3]));
			
 
				+                        this._drawRect(rect);
			
 
				+                        this._drawText(content.id, rect[0], rect[1] - 10);
			
 
				+                        this.context.stroke();
			
 
				+                        this.context.closePath();
			
 
				+                    }
			
 
				+
			
 
				+                    //绘制参考线
			
 
				+                    if(guides) {
			
 
				+                        this.context.strokeStyle = '#0000ff';
			
 
				+                        let point0 = this._toRealCoordinate(guides[0].x, guides[0].y);
			
 
				+                        let point1 = this._toRealCoordinate(guides[1].x, guides[1].y);
			
 
				+                        this.context.beginPath();
			
 
				+                        this.context.setLineDash([10]);
			
 
				+                        this.context.moveTo(point0[0], point0[1]);
			
 
				+                        this.context.lineTo(point1[0], point1[1]);
			
 
				+                        this._drawText(content.id, point1[0], point1[1] - 10);
			
 
				+                        this.context.stroke();
			
 
				+                        this.context.setLineDash([]);
			
 
				+                        this.context.closePath();
			
 
				+                    }
			
 
				+                    bodyCount++;
			
 
				+                    break;
			
 
				+                case 'over-speed':
			
 
				+                    this.context.beginPath();
			
 
				+                    this.context.fillStyle = overSpeed ? '#ff0000' : '#ffff00';
			
 
				+                    this.context.font = 'bold 16px Arial';
			
 
				+                    if(overSpeed) {
			
 
				+                        this._drawText(`ID: ${id}  speed: ${(speed / 100).toFixed(2)} m/s PMD`, 10, speedBodyCount * 20 + 30);
			
 
				+                    } else {
			
 
				+                        this._drawText(`ID: ${id}  speed: ${(speed / 100).toFixed(2)} m/s`, 10, speedBodyCount * 20 + 30);
			
 
				+                    }
			
 
				+                    this.context.stroke();
			
 
				+                    this.context.closePath();
			
 
				+                    speedBodyCount++;
			
 
				+                    break;
			
 
				+                default:
			
 
				+                    console.log('unknown ivs type: ', content.type);
			
 
				+                    break;
			
 
				+            }
			
 
				+        });
			
 
				+        //人数统计
			
 
				+        if(bodyCount) {
			
 
				+            this.context.beginPath();
			
 
				+            this.context.fillStyle = '#ffff00';
			
 
				+            this._drawText('人数:' + bodyCount, this.canvas.width - 100, 100);
			
 
				+            this.context.closePath();
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    _drawRect(rect) {
			
 
				+        //console.log(rect)
			
 
				+        this.context.rect(rect[0], rect[1], rect[2], rect[3]);
			
 
				+    }
			
 
				+
			
 
				+    _drawText(text, x, y) {
			
 
				+        this.context.fillText(text, x, y);
			
 
				+    }
			
 
				+
			
 
				+    _drawArc(x, y, r) {
			
 
				+        this.context.arc(x, y, r, 0, 360);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function f() {
			
 
				+
			
 
				+}
			
 
				+
			
 
				+export default IvsDrawer;
			
--- a/public/static/jinm/src/md5.js
+++ b/public/static/jinm/src/md5.js
@@ -0,0 +1,257 @@
 
				+/* eslint-disable */
			
 
				+/*
			
 
				+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
			
 
				+ * Digest Algorithm, as defined in RFC 1321.
			
 
				+ * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
			
 
				+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
			
 
				+ * Distributed under the BSD License
			
 
				+ * See http://pajhome.org.uk/crypt/md5 for more info.
			
 
				+ */
			
 
				+
			
 
				+/*
			
 
				+ * Configurable variables. You may need to tweak these to be compatible with
			
 
				+ * the server-side, but the defaults work in most cases.
			
 
				+ */
			
 
				+var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
			
 
				+var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
			
 
				+var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
			
 
				+
			
 
				+/*
			
 
				+ * These are the functions you'll usually want to call
			
 
				+ * They take string arguments and return either hex or base-64 encoded strings
			
 
				+ */
			
 
				+export function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
			
 
				+function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
			
 
				+function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
			
 
				+function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
			
 
				+function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
			
 
				+function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
			
 
				+
			
 
				+/*
			
 
				+ * Perform a simple self-test to see if the VM is working
			
 
				+ */
			
 
				+function md5_vm_test()
			
 
				+{
			
 
				+  return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Calculate the MD5 of an array of little-endian words, and a bit length
			
 
				+ */
			
 
				+function core_md5(x, len)
			
 
				+{
			
 
				+  /* append padding */
			
 
				+  x[len >> 5] |= 0x80 << ((len) % 32);
			
 
				+  x[(((len + 64) >>> 9) << 4) + 14] = len;
			
 
				+
			
 
				+  var a =  1732584193;
			
 
				+  var b = -271733879;
			
 
				+  var c = -1732584194;
			
 
				+  var d =  271733878;
			
 
				+
			
 
				+  for(var i = 0; i < x.length; i += 16)
			
 
				+  {
			
 
				+    var olda = a;
			
 
				+    var oldb = b;
			
 
				+    var oldc = c;
			
 
				+    var oldd = d;
			
 
				+
			
 
				+    a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
			
 
				+    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
			
 
				+    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
			
 
				+    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
			
 
				+    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
			
 
				+    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
			
 
				+    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
			
 
				+    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
			
 
				+    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
			
 
				+    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
			
 
				+    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
			
 
				+    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
			
 
				+    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
			
 
				+    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
			
 
				+    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
			
 
				+    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
			
 
				+
			
 
				+    a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
			
 
				+    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
			
 
				+    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
			
 
				+    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
			
 
				+    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
			
 
				+    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
			
 
				+    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
			
 
				+    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
			
 
				+    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
			
 
				+    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
			
 
				+    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
			
 
				+    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
			
 
				+    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
			
 
				+    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
			
 
				+    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
			
 
				+    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
			
 
				+
			
 
				+    a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
			
 
				+    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
			
 
				+    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
			
 
				+    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
			
 
				+    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
			
 
				+    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
			
 
				+    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
			
 
				+    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
			
 
				+    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
			
 
				+    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
			
 
				+    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
			
 
				+    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
			
 
				+    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
			
 
				+    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
			
 
				+    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
			
 
				+    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
			
 
				+
			
 
				+    a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
			
 
				+    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
			
 
				+    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
			
 
				+    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
			
 
				+    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
			
 
				+    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
			
 
				+    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
			
 
				+    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
			
 
				+    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
			
 
				+    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
			
 
				+    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
			
 
				+    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
			
 
				+    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
			
 
				+    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
			
 
				+    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
			
 
				+    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
			
 
				+
			
 
				+    a = safe_add(a, olda);
			
 
				+    b = safe_add(b, oldb);
			
 
				+    c = safe_add(c, oldc);
			
 
				+    d = safe_add(d, oldd);
			
 
				+  }
			
 
				+  return Array(a, b, c, d);
			
 
				+
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * These functions implement the four basic operations the algorithm uses.
			
 
				+ */
			
 
				+function md5_cmn(q, a, b, x, s, t)
			
 
				+{
			
 
				+  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
			
 
				+}
			
 
				+function md5_ff(a, b, c, d, x, s, t)
			
 
				+{
			
 
				+  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
			
 
				+}
			
 
				+function md5_gg(a, b, c, d, x, s, t)
			
 
				+{
			
 
				+  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
			
 
				+}
			
 
				+function md5_hh(a, b, c, d, x, s, t)
			
 
				+{
			
 
				+  return md5_cmn(b ^ c ^ d, a, b, x, s, t);
			
 
				+}
			
 
				+function md5_ii(a, b, c, d, x, s, t)
			
 
				+{
			
 
				+  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Calculate the HMAC-MD5, of a key and some data
			
 
				+ */
			
 
				+function core_hmac_md5(key, data)
			
 
				+{
			
 
				+  var bkey = str2binl(key);
			
 
				+  if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
			
 
				+
			
 
				+  var ipad = Array(16), opad = Array(16);
			
 
				+  for(var i = 0; i < 16; i++)
			
 
				+  {
			
 
				+    ipad[i] = bkey[i] ^ 0x36363636;
			
 
				+    opad[i] = bkey[i] ^ 0x5C5C5C5C;
			
 
				+  }
			
 
				+
			
 
				+  var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
			
 
				+  return core_md5(opad.concat(hash), 512 + 128);
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
			
 
				+ * to work around bugs in some JS interpreters.
			
 
				+ */
			
 
				+function safe_add(x, y)
			
 
				+{
			
 
				+  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
			
 
				+  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
			
 
				+  return (msw << 16) | (lsw & 0xFFFF);
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Bitwise rotate a 32-bit number to the left.
			
 
				+ */
			
 
				+function bit_rol(num, cnt)
			
 
				+{
			
 
				+  return (num << cnt) | (num >>> (32 - cnt));
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Convert a string to an array of little-endian words
			
 
				+ * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
			
 
				+ */
			
 
				+function str2binl(str)
			
 
				+{
			
 
				+  var bin = Array();
			
 
				+  var mask = (1 << chrsz) - 1;
			
 
				+  for(var i = 0; i < str.length * chrsz; i += chrsz)
			
 
				+    bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
			
 
				+  return bin;
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Convert an array of little-endian words to a string
			
 
				+ */
			
 
				+function binl2str(bin)
			
 
				+{
			
 
				+  var str = "";
			
 
				+  var mask = (1 << chrsz) - 1;
			
 
				+  for(var i = 0; i < bin.length * 32; i += chrsz)
			
 
				+    str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
			
 
				+  return str;
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Convert an array of little-endian words to a hex string.
			
 
				+ */
			
 
				+function binl2hex(binarray)
			
 
				+{
			
 
				+  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
			
 
				+  var str = "";
			
 
				+  for(var i = 0; i < binarray.length * 4; i++)
			
 
				+  {
			
 
				+    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
			
 
				+           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
			
 
				+  }
			
 
				+  return str;
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Convert an array of little-endian words to a base-64 string
			
 
				+ */
			
 
				+function binl2b64(binarray)
			
 
				+{
			
 
				+  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
			
 
				+  var str = "";
			
 
				+  for(var i = 0; i < binarray.length * 4; i += 3)
			
 
				+  {
			
 
				+    var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
			
 
				+                | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
			
 
				+                |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
			
 
				+    for(var j = 0; j < 4; j++)
			
 
				+    {
			
 
				+      if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
			
 
				+      else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
			
 
				+    }
			
 
				+  }
			
 
				+  return str;
			
 
				+}
			
--- a/public/static/jinm/src/ml5.min.js
+++ b/public/static/jinm/src/ml5.min.js
--- a/public/static/jinm/src/player.js
+++ b/public/static/jinm/src/player.js
@@ -0,0 +1,125 @@
 
				+import WebSocketServer from './websocketServer.js';
			
 
				+import {BlankROIDrawer, ROIDrawer, StandingDrawer, SpeedLine} from './ROIDrawer.js';
			
 
				+
			
 
				+let ROIdrawer = null;
			
 
				+class Player {
			
 
				+    constructor(option) {
			
 
				+        this.ws = null;
			
 
				+        this.options = option;
			
 
				+        this.events = {
			
 
				+            error: ()=>{}
			
 
				+        };
			
 
				+        this.ROI = {
			
 
				+            ROIDrawer,
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    init() {
			
 
				+        //console.log('init');
			
 
				+        ROIdrawer = new ROIDrawer(this.options.drawer);
			
 
				+        this.options.ROI = ROIdrawer;
			
 
				+        this.ws = new WebSocketServer(this.options);
			
 
				+        this.ws.init();
			
 
				+    }
			
 
				+
			
 
				+    connect() {
			
 
				+        for(let i in this.events) {
			
 
				+            this.ws.setCallBack(i, this.events[i]);
			
 
				+        }
			
 
				+        this.ws.connect();
			
 
				+    }
			
 
				+
			
 
				+    play() {
			
 
				+        //console.log('player')
			
 
				+    }
			
 
				+
			
 
				+    pause() {
			
 
				+        //console.log('pause')
			
 
				+    }
			
 
				+
			
 
				+    close() {
			
 
				+        this.ws.close();
			
 
				+        ROIdrawer.terminate();
			
 
				+        //console.log('close1')
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 绘制额外信息
			
 
				+     * @param obj
			
 
				+     */
			
 
				+    updateInfo(obj) {
			
 
				+        this.ws.updateInfo(obj);
			
 
				+    }
			
 
				+
			
 
				+    changeROIType(type) {
			
 
				+        ROIdrawer && ROIdrawer.terminate();
			
 
				+        switch (type) {
			
 
				+            case 'Polygon1':
			
 
				+                ROIdrawer = new ROIDrawer(this.options.drawer);
			
 
				+                ROIdrawer.setPolygonNum(1);
			
 
				+                ROIdrawer.cover(this.options.video);
			
 
				+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
			
 
				+                break;
			
 
				+            case 'Polygon2':
			
 
				+                ROIdrawer = new ROIDrawer(this.options.drawer);
			
 
				+                ROIdrawer.setPolygonNum(2);
			
 
				+                ROIdrawer.cover(this.options.video);
			
 
				+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
			
 
				+                break;
			
 
				+            case 'Polygon1Line1':
			
 
				+                ROIdrawer = new StandingDrawer(this.options.drawer);
			
 
				+                ROIdrawer.cover(this.options.video);
			
 
				+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
			
 
				+                break;
			
 
				+            case 'Line2':
			
 
				+                ROIdrawer = new SpeedLine(this.options.drawer);
			
 
				+                ROIdrawer.setLineNum(2);
			
 
				+                ROIdrawer.cover(this.options.video);
			
 
				+                ROIdrawer.setROIFinishedCallback(this.events['ROIFinished']);
			
 
				+                break;
			
 
				+            default:
			
 
				+                ROIdrawer = new BlankROIDrawer(this.options.drawer);
			
 
				+                break;
			
 
				+        }
			
 
				+        this.ws.setROIDrawer(ROIdrawer);
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    setROI(data) {
			
 
				+        ROIdrawer && ROIdrawer.setROI(data);
			
 
				+    }
			
 
				+
			
 
				+    resetROI() {
			
 
				+        ROIdrawer && ROIdrawer.reset();
			
 
				+    }
			
 
				+
			
 
				+    getROIData() {
			
 
				+        if(ROIdrawer) {
			
 
				+            return ROIdrawer.getROIData();
			
 
				+        }
			
 
				+        return null;
			
 
				+    }
			
 
				+
			
 
				+    setPolygonNum(num) {
			
 
				+        ROIdrawer && ROIdrawer.setPolygonNum(num);
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 自定义事件
			
 
				+     * 目前支持如下事件
			
 
				+     * [error] websocket连接失败
			
 
				+     * [noStream] 收不到码流
			
 
				+     * [canplay] 视频能够播放时触发
			
 
				+     * [initialCompleted] 视频初始化完成, 首次canplay
			
 
				+     * [ROIFinished] 手动绘制ROI完成时触发
			
 
				+     *
			
 
				+     * @param event 事件名
			
 
				+     * @param callback 事件响应函数
			
 
				+     */
			
 
				+    on(event, callback) {
			
 
				+        this.events[event] = callback;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+export default Player;
			
 
				+
			
--- a/public/static/jinm/src/videoWorker.js
+++ b/public/static/jinm/src/videoWorker.js
@@ -0,0 +1,108 @@
 
				+importScripts(
			
 
				+    './H264SPSParser.js',
			
 
				+    './H264Session.js',
			
 
				+);
			
 
				+
			
 
				+
			
 
				+addEventListener('message', receiveMessage);
			
 
				+
			
 
				+let sdpInfo = null;
			
 
				+let rtpSession = null;
			
 
				+let videoCHID = -1;
			
 
				+let videoRtpSessionsArray = [];
			
 
				+
			
 
				+function  receiveMessage(event) {
			
 
				+    //console.log(event.data)
			
 
				+    var message = event.data;
			
 
				+
			
 
				+    switch (message.type) {
			
 
				+        case 'sdpInfo':
			
 
				+            sdpInfo = message.data;
			
 
				+
			
 
				+            initRTPSession(sdpInfo.sdpInfo);
			
 
				+        case 'rtpDataArray':
			
 
				+            //console.log(message.data.length)
			
 
				+            for (let num = 0; num < message.data.length; num++) {
			
 
				+                receiveMessage({
			
 
				+                    'type': 'rtpData',
			
 
				+                    'data': message.data[num],
			
 
				+                });
			
 
				+            }
			
 
				+            break;
			
 
				+        case 'rtpData':
			
 
				+            videoCHID = message.data.rtspInterleave[1];
			
 
				+            if (typeof videoRtpSessionsArray[videoCHID] !== "undefined") {
			
 
				+                videoRtpSessionsArray[videoCHID].remuxRTPData(message.data.rtspInterleave,
			
 
				+                    message.data.header, message.data.payload);
			
 
				+            }else { // RTCP包
			
 
				+                //console.log('Interleave:  ' + videoCHID);
			
 
				+                //console.log(message.data.rtspInterleave, message.data.header);
			
 
				+                //return;
			
 
				+            }
			
 
				+            break;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function initRTPSession(sdpInfo) {
			
 
				+    for(let [i, len] = [0, sdpInfo.length]; i < len; i++) {
			
 
				+        if(sdpInfo[i].codecName === 'H264') {
			
 
				+            //console.log(sdpInfo)
			
 
				+            rtpSession = new H264Session();
			
 
				+            rtpSession.init();
			
 
				+            rtpSession.rtpSessionCallback = RtpReturnCallback;
			
 
				+            if(sdpInfo[i].Framerate) {
			
 
				+                rtpSession.setFrameRate(sdpInfo[i].Framerate);
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        if(rtpSession !== null) {
			
 
				+            videoCHID = sdpInfo[i].RtpInterlevedID;
			
 
				+            videoRtpSessionsArray[videoCHID] = rtpSession;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function RtpReturnCallback(dataInfo) {
			
 
				+
			
 
				+    if(dataInfo === null || dataInfo === undefined) {
			
 
				+        //console.log('数据为空')
			
 
				+        return;
			
 
				+    }
			
 
				+    let mediaData = dataInfo;
			
 
				+    if(mediaData.decodeMode === 'canvas') {
			
 
				+        sendMessage('YUVData', mediaData.frameData);
			
 
				+        return;
			
 
				+    }
			
 
				+    //console.log( mediaData.SEIInfo)
			
 
				+    if(mediaData.initSegmentData !== null && mediaData.initSegmentData !== undefined) {
			
 
				+        //sendMessage('codecInfo', mediaData.codecInfo)
			
 
				+        //sendMessage('initSegment', mediaData.initSegmentData);
			
 
				+        sendMessage('videoInit', mediaData);
			
 
				+        sendMessage('firstvideoTimeStamp', mediaData.timeStamp);
			
 
				+
			
 
				+    }
			
 
				+    if(mediaData.SEIInfo !== null && mediaData.SEIInfo !== undefined) {//SEI信息
			
 
				+        sendMessage('SEI', mediaData.SEIInfo);
			
 
				+    }
			
 
				+
			
 
				+    if (mediaData.frameData && mediaData.frameData.length > 0) {
			
 
				+        sendMessage('videoTimeStamp', mediaData.timeStamp);
			
 
				+        sendMessage('mediaSample', mediaData.mediaSample);
			
 
				+        //console.log(mediaData.frameData.length)
			
 
				+        sendMessage('videoRender', mediaData.frameData);
			
 
				+    }
			
 
				+    mediaData = null;
			
 
				+}
			
 
				+
			
 
				+function sendMessage(type, data) {
			
 
				+    let event = {
			
 
				+        type: type,
			
 
				+        data: data
			
 
				+    }
			
 
				+    if(type === 'videoRender') {
			
 
				+        postMessage(event, [data.buffer]);
			
 
				+    }else {
			
 
				+        postMessage(event);
			
 
				+    }
			
 
				+    event = null;
			
 
				+}
			
--- a/public/static/jinm/src/websocketServer.js
+++ b/public/static/jinm/src/websocketServer.js
@@ -0,0 +1,644 @@
 
				+import WorkerManager from './workerManager.js';
			
 
				+import {hex_md5}  from "./md5.js";
			
 
				+
			
 
				+function WebSocketServer(options) {
			
 
				+    let videoElement = null;
			
 
				+    let canvasElement = null;
			
 
				+    let ROIElement =null;
			
 
				+    let websocket = null;
			
 
				+    let wsURL = null;
			
 
				+    let rtspURL = null;
			
 
				+    let username = null;
			
 
				+    let password = null;
			
 
				+    let CSeq = 1;
			
 
				+    let IsDescribe = false; //RTSP响应报文中，describe时有两段，以'\r\n'分段
			
 
				+    let currentState = "Options";
			
 
				+    let describekey = false;
			
 
				+    let Authentication = '\r\n'; //认证，信令最后四个字节为'\r\n\r\n'，为补足，默认为'\r\n'
			
 
				+    let sessionID = '';
			
 
				+    let rtspSDPData = {};
			
 
				+    let SDPinfo = []; //SDP信息
			
 
				+    let setupSDPIndex = 0;
			
 
				+    let getParameterInterval = null; //保活
			
 
				+    let AACCodecInfo = null;
			
 
				+
			
 
				+//RTP包处理相关
			
 
				+    let rtspinterleave = null;
			
 
				+    let RTPPacketTotalSize = 0;
			
 
				+    let rtpheader = null;
			
 
				+    let rtpPacketArray = null;
			
 
				+
			
 
				+    let workerManager = null;
			
 
				+    let connectFailCallback = null;
			
 
				+
			
 
				+    let lastStreamTime = null; //记录收到码流的时间
			
 
				+    let getStreamInterval = null;
			
 
				+    let noStreamCallback = null;
			
 
				+
			
 
				+    const RTSP_INTERLEAVE_LENGTH = 4; //交织头占4个字节
			
 
				+    const RTSP_STATE = {
			
 
				+        OK: 200,
			
 
				+        UNAUTHORIZED: 401,
			
 
				+        NOTFOUND: 404,
			
 
				+        INVALID_RANGE: 457,
			
 
				+        NOTSERVICE: 503,
			
 
				+        DISCONNECT: 999
			
 
				+    };
			
 
				+    const SEND_GETPARM_INTERVAL = 20000; //保活时间
			
 
				+
			
 
				+    function constructor({video, canvas, ROI,wsUrl, rtspUrl, user, pwd} = {options}) {
			
 
				+        videoElement = video;
			
 
				+        canvasElement = canvas;
			
 
				+        ROIElement = ROI;
			
 
				+        wsURL = wsUrl;
			
 
				+        rtspURL = rtspUrl;
			
 
				+        username = user;
			
 
				+        password = pwd;
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    constructor.prototype = {
			
 
				+        init() {
			
 
				+            workerManager = new WorkerManager();
			
 
				+            workerManager.init(videoElement,canvasElement, ROIElement);
			
 
				+        },
			
 
				+        connect() {
			
 
				+            websocket = new WebSocket(wsURL);
			
 
				+            websocket.binaryType = 'arraybuffer';
			
 
				+            websocket.onmessage = ReceiveMessage;
			
 
				+            websocket.onopen = () => {
			
 
				+                let option = StringToU8Array("OPTIONS " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n\r\n");
			
 
				+                websocket.send(option);
			
 
				+                //console.log('websocket connect')
			
 
				+            };
			
 
				+            websocket.onerror = ()=> {
			
 
				+                if(connectFailCallback) {
			
 
				+                    connectFailCallback('websocket connect fail');
			
 
				+                }
			
 
				+            }
			
 
				+        },
			
 
				+        close() {
			
 
				+            clearInterval(getParameterInterval);
			
 
				+            clearInterval(getStreamInterval);
			
 
				+            SendRtspCommand(CommandConstructor("TEARDOWN", null));
			
 
				+            websocket.close();
			
 
				+            if(workerManager) {
			
 
				+                workerManager.terminate();
			
 
				+            }
			
 
				+        },
			
 
				+        setCallBack(event, callback) {
			
 
				+            switch (event) {
			
 
				+                case 'error':
			
 
				+                    connectFailCallback = ()=>{
			
 
				+                        callback();
			
 
				+                        this.close();
			
 
				+                    };
			
 
				+                    break;
			
 
				+                case 'noStream':
			
 
				+                    noStreamCallback = ()=>{
			
 
				+                        callback();
			
 
				+                        this.close();
			
 
				+                    };
			
 
				+                    break;
			
 
				+                case 'canplay':
			
 
				+                case 'initialCompleted':
			
 
				+                case 'ROIFinished':
			
 
				+                    workerManager.setEventCallBack(event, callback);
			
 
				+                    break;
			
 
				+                default:
			
 
				+                    console.log('unsupport event');
			
 
				+            }
			
 
				+        },
			
 
				+        updateInfo(obj) {
			
 
				+            workerManager.updateInfo(obj);
			
 
				+        },
			
 
				+        setROIDrawer(ROIElement) {
			
 
				+            workerManager.setROIDrawer(ROIElement);
			
 
				+        },
			
 
				+    };
			
 
				+
			
 
				+
			
 
				+
			
 
				+    return new constructor(options);
			
 
				+
			
 
				+    /**
			
 
				+     * websocket消息处理函数
			
 
				+     * @param event
			
 
				+     * @constructor
			
 
				+     */
			
 
				+    function ReceiveMessage(event) {
			
 
				+        let data = event.data;
			
 
				+        let receiveUint8 = new Uint8Array(data);
			
 
				+        let PreceiveUint8 = new Uint8Array(receiveUint8.length);
			
 
				+        PreceiveUint8.set(receiveUint8, 0);
			
 
				+        let dataLength = PreceiveUint8.length;
			
 
				+        // if(dataLength < 10) {
			
 
				+        //     //console.log(String.fromCharCode.apply(null, PreceiveUint8))
			
 
				+        // }
			
 
				+        while (dataLength > 0) {
			
 
				+            if (PreceiveUint8[0] != 36) {//非$符号表示RTSP
			
 
				+                //console.log(PreceiveUint8[0], PreceiveUint8[1], PreceiveUint8[2], PreceiveUint8[3], PreceiveUint8[4])
			
 
				+                //console.log(PreceiveUint8.length)
			
 
				+                let PreceiveMsg = String.fromCharCode.apply(null, PreceiveUint8);
			
 
				+                //console.log(PreceiveMsg)
			
 
				+                let rtspendpos = null;
			
 
				+                if (IsDescribe === true) {
			
 
				+                    rtspendpos = PreceiveMsg.lastIndexOf("\r\n");
			
 
				+                    IsDescribe = false
			
 
				+                } else {
			
 
				+                    rtspendpos = PreceiveMsg.search("\r\n\r\n");
			
 
				+
			
 
				+                }
			
 
				+                let rtspstartpos = PreceiveMsg.search("RTSP");
			
 
				+                if (rtspstartpos !== -1) {
			
 
				+                    if (rtspendpos !== -1) {
			
 
				+                        let RTSPResArray = PreceiveUint8.subarray(rtspstartpos, rtspendpos + RTSP_INTERLEAVE_LENGTH);
			
 
				+                        PreceiveUint8 = PreceiveUint8.subarray(rtspendpos + RTSP_INTERLEAVE_LENGTH);
			
 
				+                        let receiveMsg = String.fromCharCode.apply(null, RTSPResArray);
			
 
				+                        RTSPResHandler(receiveMsg);
			
 
				+                        dataLength = PreceiveUint8.length;
			
 
				+                    } else {
			
 
				+                        dataLength = PreceiveUint8.length;
			
 
				+                        return
			
 
				+                    }
			
 
				+                } else {
			
 
				+                    PreceiveUint8 = new Uint8Array;
			
 
				+                    return
			
 
				+                }
			
 
				+            } else { //$表示RTP和RTCP
			
 
				+                //console.log('RTP开始');
			
 
				+                //console.log(PreceiveUint8.length)
			
 
				+                // if(PreceiveUint8.length == 4) {
			
 
				+                //    console.log(PreceiveUint8)
			
 
				+                // }
			
 
				+                lastStreamTime = Date.now();
			
 
				+                rtspinterleave = PreceiveUint8.subarray(0, RTSP_INTERLEAVE_LENGTH);
			
 
				+                //console.log(rtspinterleave)
			
 
				+                RTPPacketTotalSize = rtspinterleave[2] * 256 + rtspinterleave[3];
			
 
				+                if (RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH <= PreceiveUint8.length) {
			
 
				+                    rtpheader = PreceiveUint8.subarray(RTSP_INTERLEAVE_LENGTH, 16);
			
 
				+                    rtpPacketArray = PreceiveUint8.subarray(16, RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH);
			
 
				+                    //rtpCallback(rtspinterleave, rtpheader, rtpPacketArray);
			
 
				+                    workerManager.parseRtpData(rtspinterleave, rtpheader, rtpPacketArray);
			
 
				+                    PreceiveUint8 = PreceiveUint8.subarray(RTPPacketTotalSize + RTSP_INTERLEAVE_LENGTH);
			
 
				+                    //console.log('PreceiveUint8.length:  ' + PreceiveUint8.length)
			
 
				+                    dataLength = PreceiveUint8.length;
			
 
				+                } else {
			
 
				+                    dataLength = PreceiveUint8.length;
			
 
				+                    //console.count('11111111111')
			
 
				+                    //console.log(PreceiveUint8)
			
 
				+                    return
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 将字符串转为arrayBuffer
			
 
				+     * @param string
			
 
				+     */
			
 
				+    function StringToU8Array(string) {
			
 
				+        CSeq++;
			
 
				+        //console.log(string)
			
 
				+        let stringLength = string.length;
			
 
				+        let outputUint8Array = new Uint8Array(new ArrayBuffer(stringLength));
			
 
				+        for (let i = 0; i < stringLength; i++) {
			
 
				+            outputUint8Array[i] = string.charCodeAt(i);
			
 
				+        }
			
 
				+        //console.log(outputUint8Array)
			
 
				+        return outputUint8Array;
			
 
				+        //return string;
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 处理收到的RTSP信令，解析后发送下一条
			
 
				+     * @param stringMessage
			
 
				+     * @constructor
			
 
				+     */
			
 
				+    function RTSPResHandler(stringMessage) {
			
 
				+        //console.log(stringMessage)
			
 
				+        //let seekPoint = stringMessage.search("CSeq: ") + 5;
			
 
				+        let rtspResponseMsg = parseRtsp(stringMessage);
			
 
				+//console.log(rtspResponseMsg)
			
 
				+        if (rtspResponseMsg.ResponseCode === RTSP_STATE.UNAUTHORIZED && Authentication === "\r\n") { //需要鉴权
			
 
				+            if(currentState === "Describe") {
			
 
				+                IsDescribe = false;
			
 
				+                describekey = false;
			
 
				+            }
			
 
				+            username= getUser(rtspURL).username;
			
 
				+            password = getUser(rtspURL).password;
			
 
				+            //console.log(rtspResponseMsg)
			
 
				+            SendRtspCommand(formDigest(rtspResponseMsg));
			
 
				+            Authentication = "\r\n";
			
 
				+
			
 
				+        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.OK) { //服务器端返回成功
			
 
				+            switch (currentState) {
			
 
				+                case 'Options':
			
 
				+                    currentState = "Describe";
			
 
				+                    SendRtspCommand(CommandConstructor("DESCRIBE", null));
			
 
				+                    break;
			
 
				+                case "Describe":
			
 
				+                    rtspSDPData = parseDescribeResponse(stringMessage);
			
 
				+                    if (typeof rtspResponseMsg.ContentBase !== "undefined") {
			
 
				+                        rtspSDPData.ContentBase = rtspResponseMsg.ContentBase
			
 
				+                    }
			
 
				+                    //console.log(rtspSDPData.Sessions)
			
 
				+                    for (let idx = 0; idx < rtspSDPData.Sessions.length; idx++) {
			
 
				+                        let sdpInfoObj = {};
			
 
				+                        if (rtspSDPData.Sessions[idx].CodecMime === "H264" ) { //暂时只支持H264
			
 
				+                            sdpInfoObj.codecName = rtspSDPData.Sessions[idx].CodecMime;
			
 
				+                            //sdpInfoObj.trackID = rtspSDPData.Sessions[idx].ControlURL;
			
 
				+                            sdpInfoObj.trackID = rtspSDPData.Sessions[idx].trackID;
			
 
				+                            sdpInfoObj.ClockFreq = rtspSDPData.Sessions[idx].ClockFreq;
			
 
				+                            sdpInfoObj.Port = parseInt(rtspSDPData.Sessions[idx].Port);
			
 
				+                            if (typeof rtspSDPData.Sessions[idx].Framerate !== "undefined") {
			
 
				+                                sdpInfoObj.Framerate = parseInt(rtspSDPData.Sessions[idx].Framerate)
			
 
				+                            }
			
 
				+                            if(typeof rtspSDPData.Sessions[idx].SPS !== "undefined") {
			
 
				+                                sdpInfoObj.SPS = rtspSDPData.Sessions[idx].SPS;
			
 
				+                            }
			
 
				+                            SDPinfo.push(sdpInfoObj)
			
 
				+                        } else {
			
 
				+                            console.log("Unknown codec type:", rtspSDPData.Sessions[idx].CodecMime, rtspSDPData.Sessions[idx].ControlURL)
			
 
				+                        }
			
 
				+                    }
			
 
				+                    setupSDPIndex = 0;
			
 
				+                    currentState = "Setup";
			
 
				+                    //console.log(SDPinfo[setupSDPIndex])
			
 
				+                    SendRtspCommand(CommandConstructor("SETUP", SDPinfo[setupSDPIndex].trackID, setupSDPIndex));
			
 
				+                    //SendRtspCommand(CommandConstructor("SETUP", 'track1'));
			
 
				+                    break;
			
 
				+                case "Setup":
			
 
				+                    sessionID = rtspResponseMsg.SessionID;
			
 
				+                    //多路流(如音频流)
			
 
				+                    //在Describe中暂时只解析H264视频流，因此SDPinfo.length始终为1
			
 
				+                    if (setupSDPIndex < SDPinfo.length) {
			
 
				+                        SDPinfo[setupSDPIndex].RtpInterlevedID = rtspResponseMsg.RtpInterlevedID;
			
 
				+                        SDPinfo[setupSDPIndex].RtcpInterlevedID = rtspResponseMsg.RtcpInterlevedID;
			
 
				+                        setupSDPIndex += 1;
			
 
				+                        if (setupSDPIndex !== SDPinfo.length) {
			
 
				+                            SendRtspCommand(CommandConstructor("SETUP", SDPinfo[setupSDPIndex].trackID, setupSDPIndex));
			
 
				+                        } else {
			
 
				+                            workerManager.sendSdpInfo(SDPinfo);
			
 
				+                            currentState = "Play";
			
 
				+                            SendRtspCommand(CommandConstructor("PLAY"));
			
 
				+                        }
			
 
				+                    }
			
 
				+
			
 
				+                    sessionID = rtspResponseMsg.SessionID;
			
 
				+                    //开始播放后，发送GET_PARAMETER进行保活
			
 
				+                    clearInterval(getParameterInterval);
			
 
				+                    getParameterInterval = setInterval(function () {
			
 
				+                        SendRtspCommand(CommandConstructor("GET_PARAMETER", null))
			
 
				+                    }, SEND_GETPARM_INTERVAL);
			
 
				+
			
 
				+                    getStreamInterval = setInterval(()=>{
			
 
				+                        if(!getBitStream()) {
			
 
				+                            console.log('超时！');
			
 
				+                            noStreamCallback && noStreamCallback();
			
 
				+                        }
			
 
				+                    }, 5000);
			
 
				+                    break;
			
 
				+                case "Play":
			
 
				+
			
 
				+                    break;
			
 
				+                default:
			
 
				+                    console.log('暂不支持的信令');
			
 
				+                    break;
			
 
				+            }
			
 
				+        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.NOTSERVICE) { //服务不可用
			
 
				+
			
 
				+        } else if (rtspResponseMsg.ResponseCode === RTSP_STATE.NOTFOUND) { //Not Found
			
 
				+
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 发送rtsp信令
			
 
				+     * @param sendMessage
			
 
				+     * @constructor
			
 
				+     */
			
 
				+    function SendRtspCommand(sendMessage) {
			
 
				+        //console.log(sendMessage)
			
 
				+        if (websocket !== null && websocket.readyState === WebSocket.OPEN) {
			
 
				+            if (describekey === false) {
			
 
				+                let describeCmd = sendMessage.search("DESCRIBE");
			
 
				+                if (describeCmd !== -1) {
			
 
				+                    IsDescribe = true;
			
 
				+                    describekey = true;
			
 
				+                }
			
 
				+            }
			
 
				+            //console.log(sendMessage)
			
 
				+            websocket.send(StringToU8Array(sendMessage))
			
 
				+        } else {
			
 
				+            console.log('websocket未连接')
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 组装RTSP信令
			
 
				+     * @param method
			
 
				+     * @param trackID
			
 
				+     * @returns {*}
			
 
				+     * @constructor
			
 
				+     */
			
 
				+    function CommandConstructor(method, trackID, interleaved) {
			
 
				+        let sendMessage;
			
 
				+        switch (method) {
			
 
				+            case"OPTIONS":
			
 
				+            case"TEARDOWN":
			
 
				+            case"SET_PARAMETERS":
			
 
				+            case"DESCRIBE":
			
 
				+                //TODO: 保活
			
 
				+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n" + Authentication;
			
 
				+                break;
			
 
				+            case"SETUP":
			
 
				+                //console.log(trackID)
			
 
				+                //TODO 多trackID的时候测试一下
			
 
				+                sendMessage = method + " " + rtspURL + "/" + trackID + " RTSP/1.0\r\nCSeq: " + CSeq + Authentication + "Transport:RTP/AVP/TCP;unicast;interleaved=" + 2 * interleaved + "-" + (2 * interleaved + 1) + "\r\n";
			
 
				+                if(sessionID == 0) {
			
 
				+                    sendMessage += "\r\n";
			
 
				+                } else {
			
 
				+                    sendMessage += "Session: " + sessionID + "\r\n\r\n";
			
 
				+                }
			
 
				+                break;
			
 
				+            case"PLAY":
			
 
				+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n" + "Range: npt=0.000-\r\n" + Authentication;
			
 
				+                break;
			
 
				+            case"PAUSE":
			
 
				+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n\r\n";
			
 
				+                break;
			
 
				+            case"GET_PARAMETER":
			
 
				+                sendMessage = method + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\nSession: " + sessionID + "\r\n"  + Authentication;
			
 
				+                break;
			
 
				+            default:
			
 
				+                console.log('暂不支持的RTSP信令');
			
 
				+        }
			
 
				+        //console.log(sendMessage);
			
 
				+        return sendMessage;
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 解析RTSP信令
			
 
				+     * @param message1
			
 
				+     */
			
 
				+    function parseRtsp(message1) {
			
 
				+        let RtspResponseData = {};
			
 
				+        let cnt = 0, cnt1 = 0, ttt = null, LineTokens = null;
			
 
				+        let message = null;
			
 
				+        if (message1.search("Content-Type: application/sdp") !== -1) {
			
 
				+            let messageTok = message1.split("\r\n\r\n");
			
 
				+            message = messageTok[0]
			
 
				+        } else {
			
 
				+            message = message1
			
 
				+        }
			
 
				+        let TokenziedResponseLines = message.split("\r\n");
			
 
				+        let ResponseCodeTokens = TokenziedResponseLines[0].split(" ");
			
 
				+        if (ResponseCodeTokens.length > 2) {
			
 
				+            RtspResponseData.ResponseCode = parseInt(ResponseCodeTokens[1]);
			
 
				+            RtspResponseData.ResponseMessage = ResponseCodeTokens[2]
			
 
				+        }
			
 
				+        if (RtspResponseData.ResponseCode === RTSP_STATE.OK) {
			
 
				+            for (cnt = 1; cnt < TokenziedResponseLines.length; cnt++) {
			
 
				+                LineTokens = TokenziedResponseLines[cnt].split(":");
			
 
				+                if (LineTokens[0] === "Public") {
			
 
				+                    RtspResponseData.MethodsSupported = LineTokens[1].split(",")
			
 
				+                } else if (LineTokens[0] === "CSeq") {
			
 
				+                    RtspResponseData.CSeq = parseInt(LineTokens[1])
			
 
				+                } else if (LineTokens[0] === "Content-Type") {
			
 
				+                    RtspResponseData.ContentType = LineTokens[1];
			
 
				+                    if (RtspResponseData.ContentType.search("application/sdp") !== -1) {
			
 
				+                        RtspResponseData.SDPData = parseDescribeResponse(message1)
			
 
				+                    }
			
 
				+                } else if (LineTokens[0] === "Content-Length") {
			
 
				+                    RtspResponseData.ContentLength = parseInt(LineTokens[1])
			
 
				+                } else if (LineTokens[0] === "Content-Base") {
			
 
				+                    let ppos = TokenziedResponseLines[cnt].search("Content-Base:");
			
 
				+                    if (ppos !== -1) {
			
 
				+                        RtspResponseData.ContentBase = TokenziedResponseLines[cnt].substr(ppos + 13)
			
 
				+                    }
			
 
				+                } else if (LineTokens[0] === "Session") {
			
 
				+                    let SessionTokens = LineTokens[1].split(";");
			
 
				+                    //RtspResponseData.SessionID = parseInt(SessionTokens[0])
			
 
				+                    //console.log(SessionTokens[0])
			
 
				+                    RtspResponseData.SessionID = SessionTokens[0].trim();
			
 
				+                } else if (LineTokens[0] === "Transport") {
			
 
				+                    let TransportTokens = LineTokens[1].split(";");
			
 
				+                    for (cnt1 = 0; cnt1 < TransportTokens.length; cnt1++) {
			
 
				+                        let tpos = TransportTokens[cnt1].search("interleaved=");
			
 
				+                        if (tpos !== -1) {
			
 
				+                            let interleaved = TransportTokens[cnt1].substr(tpos + 12);
			
 
				+                            let interleavedTokens = interleaved.split("-");
			
 
				+                            if (interleavedTokens.length > 1) {
			
 
				+                                RtspResponseData.RtpInterlevedID = parseInt(interleavedTokens[0]);
			
 
				+                                RtspResponseData.RtcpInterlevedID = parseInt(interleavedTokens[1])
			
 
				+                            }
			
 
				+                        }
			
 
				+                    }
			
 
				+                } else if (LineTokens[0] === "RTP-Info") {
			
 
				+                    LineTokens[1] = TokenziedResponseLines[cnt].substr(9);
			
 
				+                    let RTPInfoTokens = LineTokens[1].split(",");
			
 
				+                    RtspResponseData.RTPInfoList = [];
			
 
				+                    for (cnt1 = 0; cnt1 < RTPInfoTokens.length; cnt1++) {
			
 
				+                        let RtpTokens = RTPInfoTokens[cnt1].split(";");
			
 
				+                        let RtpInfo = {};
			
 
				+                        for (let cnt2 = 0; cnt2 < RtpTokens.length; cnt2++) {
			
 
				+                            let poss = RtpTokens[cnt2].search("url=");
			
 
				+                            if (poss !== -1) {
			
 
				+                                RtpInfo.URL = RtpTokens[cnt2].substr(poss + 4)
			
 
				+                            }
			
 
				+                            poss = RtpTokens[cnt2].search("seq=");
			
 
				+                            if (poss !== -1) {
			
 
				+                                RtpInfo.Seq = parseInt(RtpTokens[cnt2].substr(poss + 4))
			
 
				+                            }
			
 
				+                        }
			
 
				+                        RtspResponseData.RTPInfoList.push(RtpInfo)
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        } else if (RtspResponseData.ResponseCode === RTSP_STATE.UNAUTHORIZED) {
			
 
				+            for (cnt = 1; cnt < TokenziedResponseLines.length; cnt++) {
			
 
				+                LineTokens = TokenziedResponseLines[cnt].split(":");
			
 
				+                if (LineTokens[0] === "CSeq") {
			
 
				+                    RtspResponseData.CSeq = parseInt(LineTokens[1])
			
 
				+                } else if (LineTokens[0] === "WWW-Authenticate") {
			
 
				+                    let AuthTokens = LineTokens[1].split(",");
			
 
				+                    for (cnt1 = 0; cnt1 < AuthTokens.length; cnt1++) {
			
 
				+                        let pos = AuthTokens[cnt1].search("Digest realm=");
			
 
				+                        if (pos !== -1) {
			
 
				+                            ttt = AuthTokens[cnt1].substr(pos + 13);
			
 
				+                            let realmtok = ttt.split('"');
			
 
				+                            RtspResponseData.Realm = realmtok[1]
			
 
				+                        }
			
 
				+                        pos = AuthTokens[cnt1].search("nonce=");
			
 
				+                        if (pos !== -1) {
			
 
				+                            ttt = AuthTokens[cnt1].substr(pos + 6);
			
 
				+                            let noncetok = ttt.split('"');
			
 
				+                            RtspResponseData.Nonce = noncetok[1]
			
 
				+                        }
			
 
				+                    }
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        return RtspResponseData
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 解析Describe信令
			
 
				+     * @param message1
			
 
				+     */
			
 
				+    function parseDescribeResponse(message1) {
			
 
				+        //console.log(message1)
			
 
				+        let SDPData = {};
			
 
				+        let Sessions = [];
			
 
				+        SDPData.Sessions = Sessions;
			
 
				+        let message = null;
			
 
				+        if (message1.search("Content-Type: application/sdp") !== -1) {
			
 
				+            let messageTok = message1.split("\r\n\r\n");
			
 
				+            message = messageTok[1]
			
 
				+        } else {
			
 
				+            message = message1
			
 
				+        }
			
 
				+        let TokenziedDescribe = message.split("\r\n");
			
 
				+        let mediaFound = false;
			
 
				+        for (let cnt = 0; cnt < TokenziedDescribe.length; cnt++) {
			
 
				+            let SDPLineTokens = TokenziedDescribe[cnt].split("=");
			
 
				+            if (SDPLineTokens.length > 0) {
			
 
				+                switch (SDPLineTokens[0]) {
			
 
				+                    case"a":
			
 
				+                        let aLineToken = SDPLineTokens[1].split(":");
			
 
				+                        if (aLineToken.length > 1) {
			
 
				+                            if (aLineToken[0] === "control") {
			
 
				+                                let pos = TokenziedDescribe[cnt].search("control:");
			
 
				+                                if (mediaFound === true) {
			
 
				+                                    if (pos !== -1) {
			
 
				+                                        SDPData.Sessions[SDPData.Sessions.length - 1].ControlURL = TokenziedDescribe[cnt].substr(pos + 8);
			
 
				+                                        let trackPos = TokenziedDescribe[cnt].search("track");
			
 
				+                                        SDPData.Sessions[SDPData.Sessions.length - 1].trackID = TokenziedDescribe[cnt].substr(trackPos);
			
 
				+                                    }
			
 
				+                                } else {
			
 
				+                                    if (pos !== -1) {
			
 
				+                                        SDPData.BaseURL = TokenziedDescribe[cnt].substr(pos + 8)
			
 
				+                                    }
			
 
				+                                }
			
 
				+                            } else if (aLineToken[0] === "rtpmap") {
			
 
				+                                //console.log(aLineToken)
			
 
				+                                let rtpmapLine = aLineToken[1].split(" ");
			
 
				+                                //console.log(rtpmapLine)
			
 
				+                                SDPData.Sessions[SDPData.Sessions.length - 1].PayloadType = rtpmapLine[0];
			
 
				+                                let MimeLine = rtpmapLine[1].split("/");
			
 
				+                                SDPData.Sessions[SDPData.Sessions.length - 1].CodecMime = MimeLine[0];
			
 
				+                                if (MimeLine.length > 1) {
			
 
				+                                    SDPData.Sessions[SDPData.Sessions.length - 1].ClockFreq = MimeLine[1]
			
 
				+                                }
			
 
				+                            } else if (aLineToken[0] === "framesize") {
			
 
				+                                let framesizeLine = aLineToken[1].split(" ");
			
 
				+                                if (framesizeLine.length > 1) {
			
 
				+                                    let framesizeinf = framesizeLine[1].split("-");
			
 
				+                                    SDPData.Sessions[SDPData.Sessions.length - 1].Width = framesizeinf[0];
			
 
				+                                    SDPData.Sessions[SDPData.Sessions.length - 1].Height = framesizeinf[1]
			
 
				+                                }
			
 
				+                            } else if (aLineToken[0] === "framerate") {
			
 
				+                                SDPData.Sessions[SDPData.Sessions.length - 1].Framerate = aLineToken[1]
			
 
				+                            } else if (aLineToken[0] === "fmtp") {
			
 
				+                                let sessLine = TokenziedDescribe[cnt].split(" ");
			
 
				+                                if (sessLine.length < 2) {
			
 
				+                                    continue
			
 
				+                                }
			
 
				+                                for (let ii = 1; ii < sessLine.length; ii++) {
			
 
				+                                    let sessToken = sessLine[ii].split(";");
			
 
				+                                    let sessprmcnt = 0;
			
 
				+                                    for (sessprmcnt = 0; sessprmcnt < sessToken.length; sessprmcnt++) {
			
 
				+                                        let ppos = sessToken[sessprmcnt].search("mode=");
			
 
				+                                        if (ppos !== -1) {
			
 
				+                                            SDPData.Sessions[SDPData.Sessions.length - 1].mode = sessToken[sessprmcnt].substr(ppos + 5)
			
 
				+                                        }
			
 
				+                                        ppos = sessToken[sessprmcnt].search("config=");
			
 
				+                                        if (ppos !== -1) {
			
 
				+                                            SDPData.Sessions[SDPData.Sessions.length - 1].config = sessToken[sessprmcnt].substr(ppos + 7);
			
 
				+                                            AACCodecInfo.config = SDPData.Sessions[SDPData.Sessions.length - 1].config;
			
 
				+                                            AACCodecInfo.clockFreq = SDPData.Sessions[SDPData.Sessions.length - 1].ClockFreq;
			
 
				+                                            AACCodecInfo.bitrate = SDPData.Sessions[SDPData.Sessions.length - 1].Bitrate
			
 
				+                                        }
			
 
				+                                        ppos = sessToken[sessprmcnt].search("sprop-vps=");
			
 
				+                                        if (ppos !== -1) {
			
 
				+                                            SDPData.Sessions[SDPData.Sessions.length - 1].VPS = sessToken[sessprmcnt].substr(ppos + 10)
			
 
				+                                        }
			
 
				+                                        ppos = sessToken[sessprmcnt].search("sprop-sps=");
			
 
				+                                        if (ppos !== -1) {
			
 
				+                                            SDPData.Sessions[SDPData.Sessions.length - 1].SPS = sessToken[sessprmcnt].substr(ppos + 10)
			
 
				+                                        }
			
 
				+                                        ppos = sessToken[sessprmcnt].search("sprop-pps=");
			
 
				+                                        if (ppos !== -1) {
			
 
				+                                            SDPData.Sessions[SDPData.Sessions.length - 1].PPS = sessToken[sessprmcnt].substr(ppos + 10)
			
 
				+                                        }
			
 
				+                                        ppos = sessToken[sessprmcnt].search("sprop-parameter-sets=");
			
 
				+                                        if (ppos !== -1) {
			
 
				+                                            let SPSPPS = sessToken[sessprmcnt].substr(ppos + 21);
			
 
				+                                            let SPSPPSTokenized = SPSPPS.split(",");
			
 
				+                                            if (SPSPPSTokenized.length > 1) {
			
 
				+                                                SDPData.Sessions[SDPData.Sessions.length - 1].SPS = SPSPPSTokenized[0];
			
 
				+                                                SDPData.Sessions[SDPData.Sessions.length - 1].PPS = SPSPPSTokenized[1]
			
 
				+                                            }
			
 
				+                                        }
			
 
				+                                    }
			
 
				+                                }
			
 
				+                            }
			
 
				+                        }
			
 
				+                        break;
			
 
				+                    case"m":
			
 
				+                        let mLineToken = SDPLineTokens[1].split(" ");
			
 
				+                        let Session = {};
			
 
				+                        Session.Type = mLineToken[0];
			
 
				+                        Session.Port = mLineToken[1];
			
 
				+                        Session.Payload = mLineToken[3];
			
 
				+                        SDPData.Sessions.push(Session);
			
 
				+                        mediaFound = true;
			
 
				+                        break;
			
 
				+                    case"b":
			
 
				+                        if (mediaFound === true) {
			
 
				+                            let bLineToken = SDPLineTokens[1].split(":");
			
 
				+                            SDPData.Sessions[SDPData.Sessions.length - 1].Bitrate = bLineToken[1]
			
 
				+                        }
			
 
				+                        break
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        return SDPData
			
 
				+    };
			
 
				+
			
 
				+    function formDigest(message) {
			
 
				+        let {Nonce, Realm} = message;
			
 
				+        //Realm = '54c415830ec4';
			
 
				+        //Nonce = 'fb01c51948704e59eb5a474b33caff8b';
			
 
				+        let user = {
			
 
				+            username: username,
			
 
				+            password: password,
			
 
				+        };
			
 
				+
			
 
				+        let hex1 = hex_md5(user.username + ":" + Realm + ":" + user.password);
			
 
				+        let hex2 = hex_md5(currentState.toUpperCase() + ":" + rtspURL);
			
 
				+        let responce = hex_md5(hex1 + ":" + Nonce + ":" + hex2);
			
 
				+        Authentication = 'Authorization: Digest username="' + user.username + '", realm="' + Realm + '", nonce="' + Nonce + '",uri="' + rtspURL + '", response="' + responce + '"\r\n' + "Accept: application/sdp\r\n" + '\r\n';
			
 
				+
			
 
				+        return  currentState.toUpperCase() + " " + rtspURL + " RTSP/1.0\r\nCSeq: " + CSeq + "\r\n" + Authentication;
			
 
				+    }
			
 
				+
			
 
				+    function getUser(rtspUrl) {
			
 
				+        let user = rtspUrl.split('rtsp://')[1].split('@')[0];
			
 
				+        let username = user.split(':')[0],
			
 
				+            password = user.split(':')[1];
			
 
				+        return {username, password};
			
 
				+    }
			
 
				+
			
 
				+    function getBitStream() {
			
 
				+        if(lastStreamTime === null) {
			
 
				+            lastStreamTime = Date.now();
			
 
				+        } else {
			
 
				+            //console.log(Date.now() - lastStreamTime)
			
 
				+            return Date.now() - lastStreamTime < 5000;
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+export default WebSocketServer;
			
--- a/public/static/jinm/src/workerManager.js
+++ b/public/static/jinm/src/workerManager.js
@@ -0,0 +1,523 @@
 
				+import VideoMediaSource from './MediaSource.js';
			
 
				+import MP4Remux from './MP4Remux.js';
			
 
				+import IvsDrawer from './ivsDrawer.js';
			
 
				+
			
 
				+function WorkerManager() {
			
 
				+    let videoWorker;
			
 
				+    let SDPInfo;
			
 
				+    let messageArray = [];
			
 
				+    let rtpStackCount = 0;
			
 
				+    let videoElement = null;
			
 
				+    let canvasElement = null;
			
 
				+    let videoMS = null;
			
 
				+
			
 
				+    const rtpStackCheckNum = 10;
			
 
				+
			
 
				+    let codecInfo = null;
			
 
				+    let initSegmentData = null;
			
 
				+    let mediaInfo = {
			
 
				+        id: 1,
			
 
				+        samples: null,
			
 
				+        baseMediaDecodeTime: 0
			
 
				+    };
			
 
				+    let numBox = 1;
			
 
				+    let mediaSegNum = 0; //用于记录缓存的box个数
			
 
				+    let mediaFrameData = null; //用于缓存未喂入mse的box
			
 
				+    let mediaFrameSize = 0; //mediaFrameData的大小
			
 
				+    let preBaseDecodeTime = 0; //上一个解码时间
			
 
				+    let curBaseDecodeTime = 0; //从第一帧到当前帧的持续时间
			
 
				+    let mediaSegmentData = null; //MP4化的数据
			
 
				+    let sequenseNum = 1;
			
 
				+
			
 
				+    let mp4Remux;
			
 
				+
			
 
				+    let firstTimeStamp = null; //第一个视频帧的时间戳
			
 
				+    let SEIinfo = null;
			
 
				+    let ivsDrawer = null;
			
 
				+    let info = null;
			
 
				+    let MAX_INFO = 25; // 限制info最大长度
			
 
				+    let startDrawIVS = false;
			
 
				+    let onCanplayCallback = null;
			
 
				+    let ROIdrawer = null;
			
 
				+
			
 
				+    let initialCompleted = false;
			
 
				+    let onInitialCompletedCallback = null;
			
 
				+    let frameRate = 25; //默认25
			
 
				+    let resizeObserver = null;
			
 
				+    function constructor() {
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    constructor.prototype = {
			
 
				+        init(video,canvas,ROIElement) {
			
 
				+            videoWorker = new Worker('./src/videoWorker.js');
			
 
				+            videoWorker.onmessage = videoWorkerMessage;
			
 
				+            videoElement = video;
			
 
				+            canvasElement = canvas;
			
 
				+
			
 
				+            mp4Remux = new MP4Remux();
			
 
				+            mp4Remux.init();
			
 
				+
			
 
				+            SEIinfo = new IVSQueue();
			
 
				+            info = new LruCache(MAX_INFO);
			
 
				+            ivsDrawer = new IvsDrawer(canvasElement);
			
 
				+            ROIdrawer = ROIElement;
			
 
				+
			
 
				+            resizeObserver = new ResizeObserver( entries => {
			
 
				+                ivsDrawer.cover(videoElement);
			
 
				+                ROIdrawer.cover(videoElement);
			
 
				+                ROIdrawer.redrawROI();
			
 
				+            });
			
 
				+            resizeObserver.observe(videoElement);
			
 
				+        },
			
 
				+
			
 
				+        sendSdpInfo(SDPinfo) {
			
 
				+            SDPInfo = SDPinfo;
			
 
				+            console.log(SDPinfo)
			
 
				+            let message = {
			
 
				+                type: "sdpInfo",
			
 
				+                data: {
			
 
				+                    sdpInfo: SDPInfo
			
 
				+                }
			
 
				+            };
			
 
				+            videoWorker.postMessage(message);
			
 
				+            //Todo:暂时采用第一路视频的帧率
			
 
				+            if(SDPInfo.length && SDPInfo[0].Framerate) {
			
 
				+                frameRate = SDPinfo[0].Framerate;
			
 
				+            }
			
 
				+        },
			
 
				+
			
 
				+        parseRtpData(rtspinterleave, rtpheader, rtpPacketArray) {
			
 
				+            // console.log(rtspinterleave)
			
 
				+            // console.log( rtpheader)
			
 
				+            // //console.log(rtpPacketArray)
			
 
				+            // console.log(rtpheader[3])
			
 
				+
			
 
				+            let mediaType = rtspinterleave[1];
			
 
				+            let idx = parseInt(mediaType / 2, 10);
			
 
				+            let markerBitHex = 128;
			
 
				+            let message = {
			
 
				+                type: "rtpData",
			
 
				+                data: {rtspInterleave: rtspinterleave, header: rtpheader, payload: rtpPacketArray}
			
 
				+            };
			
 
				+            //console.log(rtspinterleave)
			
 
				+            //console.log('idx: ',idx)
			
 
				+
			
 
				+            if(idx !== 0) {
			
 
				+                console.log('idx: ',rtspinterleave);
			
 
				+                //console.log(SDPInfo)
			
 
				+                return;
			
 
				+            }
			
 
				+            switch (SDPInfo[idx].codecName) {
			
 
				+                case"H264":
			
 
				+                    messageArray.push(message);
			
 
				+                    if (rtpStackCount >= rtpStackCheckNum || (rtpheader[1] & markerBitHex) === markerBitHex) {
			
 
				+                        if((rtpheader[1] & markerBitHex) === markerBitHex) {
			
 
				+                            //onsole.log('遇到终止位: ' + rtpheader[1])
			
 
				+                        }
			
 
				+                        let sendMessage = {type: "rtpDataArray", data: messageArray};
			
 
				+                        if (videoWorker) {
			
 
				+                            videoWorker.postMessage(sendMessage)
			
 
				+                        }
			
 
				+                        sendMessage = null;
			
 
				+                        messageArray = [];
			
 
				+                        rtpStackCount = 0
			
 
				+                        //console.log('1111111111')
			
 
				+                    } else {
			
 
				+                        rtpStackCount++
			
 
				+                    }
			
 
				+                    break;
			
 
				+                default:
			
 
				+            }
			
 
				+        },
			
 
				+
			
 
				+        /**
			
 
				+         * 更新需要绘制的其它信息
			
 
				+         * @param obj
			
 
				+         */
			
 
				+        updateInfo(obj) {
			
 
				+            //if((obj.name !== '') && (obj.name !== undefined) && (obj.name !== null)) {
			
 
				+            info.set(obj.id, obj.name);
			
 
				+            //}
			
 
				+        },
			
 
				+
			
 
				+        setEventCallBack(event, callback) {
			
 
				+            switch (event) {
			
 
				+                case 'canplay':
			
 
				+                    onCanplayCallback = callback;
			
 
				+                    break;
			
 
				+                case 'initialCompleted':
			
 
				+                    onInitialCompletedCallback = callback;
			
 
				+                    break;
			
 
				+                case 'ROIFinished':
			
 
				+                    ROIdrawer.setROIFinishedCallback(callback);
			
 
				+                    break;
			
 
				+                default:
			
 
				+                    break;
			
 
				+            }
			
 
				+        },
			
 
				+
			
 
				+        setROIDrawer(ROIElement) {
			
 
				+            ROIdrawer = ROIElement;
			
 
				+        },
			
 
				+
			
 
				+        terminate() {
			
 
				+            videoWorker.terminate();
			
 
				+            ivsDrawer.terminate();
			
 
				+            resizeObserver && resizeObserver.unobserve(videoElement);
			
 
				+            resizeObserver = null;
			
 
				+            info.clear();
			
 
				+            startDrawIVS = false;
			
 
				+            window.onresize = null;
			
 
				+            if(videoMS) {
			
 
				+                videoMS.close();
			
 
				+                videoMS = null;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    return new constructor();
			
 
				+
			
 
				+    function videoWorkerMessage(event) {
			
 
				+        let videoMessage = event.data;
			
 
				+        let type = videoMessage.type;
			
 
				+        //console.log(videoMessage.data)
			
 
				+        switch (type) {
			
 
				+            // case 'codecInfo': //设置codecType
			
 
				+            //     break;
			
 
				+            // case 'initSegment': //第一个buffer，设置SPS等
			
 
				+            case 'videoInit'://合并codecInfo和initSegment
			
 
				+                console.log(videoMessage)
			
 
				+                codecInfo = videoMessage.data.codecInfo;
			
 
				+                //console.log(videoMessage.data)
			
 
				+                initSegmentData = mp4Remux.initSegment(videoMessage.data.initSegmentData);
			
 
				+//console.log(initSegmentData)
			
 
				+                videoMS = new VideoMediaSource(videoElement);
			
 
				+                videoMS.CodecInfo = codecInfo;
			
 
				+                videoMS.InitSegment = initSegmentData;
			
 
				+                //console.log(videoMS.CodecInfo, videoMS.InitSegment)
			
 
				+                videoMS.init();
			
 
				+                videoMS.onCanplayCallback(()=>{
			
 
				+                    ivsDrawer.cover(videoElement);
			
 
				+                    onCanplayCallback && onCanplayCallback();
			
 
				+                    if(!initialCompleted) {
			
 
				+                        ROIdrawer.cover(videoElement);
			
 
				+                        onInitialCompletedCallback && onInitialCompletedCallback();
			
 
				+                        initialCompleted = true;
			
 
				+                    }
			
 
				+                });
			
 
				+                break;
			
 
				+            case 'firstvideoTimeStamp':
			
 
				+                firstTimeStamp = videoMessage.data;
			
 
				+
			
 
				+                videoMS.setFirstTimeStamp(firstTimeStamp);
			
 
				+                //videoMS.setDurationChangeCallBack(drawIVS);
			
 
				+
			
 
				+                console.log('first frame timestamp: ', firstTimeStamp);
			
 
				+                startDrawIVS = true;
			
 
				+                window.requestAnimationFrame(draw);
			
 
				+                break;
			
 
				+            case 'videoTimeStamp'://时间戳，用于智能同步
			
 
				+                //videoMS.setFirstTimeStamp(videoMessage.data);
			
 
				+                //console.log('frame timestamp: ', videoMessage.data);
			
 
				+                //console.log('npt: ', ( videoMessage.data - firstTimeStamp)/90000)
			
 
				+                break;
			
 
				+            case 'mediaSample': //用于设置baseMediaDecodeTime
			
 
				+                if(mediaInfo.samples == null) {
			
 
				+                    mediaInfo.samples = new Array(numBox);
			
 
				+                }
			
 
				+                //console.log('frameDuration: ' + videoMessage.data.frameDuration)
			
 
				+                curBaseDecodeTime += videoMessage.data.frameDuration;
			
 
				+
			
 
				+                mediaInfo.samples[mediaSegNum++] = videoMessage.data;
			
 
				+                break;
			
 
				+            case 'videoRender': //视频数据
			
 
				+                //缓存该segment数据
			
 
				+                let tempBuffer = new Uint8Array(videoMessage.data.length + mediaFrameSize);
			
 
				+                if(mediaFrameSize !== 0) {
			
 
				+                    tempBuffer.set(mediaFrameData);
			
 
				+                }
			
 
				+                //console.log(videoMessage)
			
 
				+                tempBuffer.set(videoMessage.data, mediaFrameSize);
			
 
				+                mediaFrameData = tempBuffer;
			
 
				+                mediaFrameSize = mediaFrameData.length;
			
 
				+
			
 
				+                if(mediaSegNum % numBox === 0 && mediaSegNum !== 0) {
			
 
				+                    if (sequenseNum === 1) {
			
 
				+                        mediaInfo.baseMediaDecodeTime = 0
			
 
				+                    } else {
			
 
				+                        mediaInfo.baseMediaDecodeTime = preBaseDecodeTime;
			
 
				+                    }
			
 
				+                    preBaseDecodeTime = curBaseDecodeTime;
			
 
				+                    mediaSegmentData = mp4Remux.mediaSegment(sequenseNum, mediaInfo, mediaFrameData);
			
 
				+                    sequenseNum++;
			
 
				+                    mediaSegNum = 0;
			
 
				+                    mediaFrameData = null;
			
 
				+                    mediaFrameSize = 0;
			
 
				+
			
 
				+                    if (videoMS !== null) {
			
 
				+                        videoMS.setMediaSegment(mediaSegmentData)
			
 
				+                    } else {
			
 
				+
			
 
				+                    }
			
 
				+                }
			
 
				+                break;
			
 
				+            case 'YUVData'://FFMPEG解码的数据
			
 
				+                //console.log(videoMessage.data)
			
 
				+                //draw(videoMessage.data);
			
 
				+                //yuv2canvas(videoMessage.data.data, videoMessage.data.width, videoMessage.data.height,canvasElement)
			
 
				+
			
 
				+                break;
			
 
				+            case 'SEI': //处理SEI信息
			
 
				+                //console.log('SEI timestamp: ', videoMessage.data.timestamp);
			
 
				+                //console.log('SEI-npt: ', (videoMessage.data.timestamp - firstTimeStamp)/90000)
			
 
				+                if(videoMessage.data.ivs !== null) {
			
 
				+                    let ivs = [];
			
 
				+                    videoMessage.data.ivs.map((content, k) => {
			
 
				+                        if(content.state) { //state=1, 绘制该信息
			
 
				+                            ivs.push(content);
			
 
				+                        }else { //state=0, 清除info中对应的id:name
			
 
				+                            // let id = content.id;
			
 
				+                            // console.log('删除', id, info[id]);
			
 
				+                            // delete info[id];
			
 
				+                            // console.log(info)
			
 
				+                        }
			
 
				+                    });
			
 
				+
			
 
				+                    //console.log('PUSH SEI: ', videoMessage.data.timestamp)
			
 
				+                    SEIinfo.push(videoMessage.data.timestamp, ivs);
			
 
				+
			
 
				+                    //console.log(videoMessage.data.timestamp - lastTime)
			
 
				+                    //lastTime = videoMessage.data.timestamp;
			
 
				+                }
			
 
				+                //console.log('timestamp: ', videoMessage.data.timestamp)
			
 
				+                //console.log(SEIinfo)
			
 
				+                break;
			
 
				+            default:
			
 
				+                console.log('暂不支持其他类型');
			
 
				+                break;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    function draw() {
			
 
				+        let timestamp = parseInt((videoElement.currentTime.toFixed(2) * 90000).toFixed(0)) + firstTimeStamp + 90000/frameRate;//
			
 
				+        drawIVS(timestamp);
			
 
				+        if(startDrawIVS) {
			
 
				+            window.requestAnimationFrame(draw);
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 根据时间戳获取相应的ivs信息
			
 
				+     * @param timestamp 当前帧的时间戳
			
 
				+     * @returns {*} ivs信息
			
 
				+     */
			
 
				+    function getIVS(timestamp) {
			
 
				+        let preNode = null;
			
 
				+        let nextNode = null;
			
 
				+
			
 
				+        preNode = SEIinfo.shift();
			
 
				+        nextNode = SEIinfo.top();
			
 
				+        while((preNode !== undefined) && (preNode !== null)) {
			
 
				+            if(preNode[0] > timestamp) {
			
 
				+                SEIinfo.unshift(preNode);
			
 
				+                //console.log('SEI时间大于video: ', preNode[0], timestamp);
			
 
				+                return null;
			
 
				+            } else if(preNode[0] === timestamp) {
			
 
				+                return preNode;
			
 
				+            } else {
			
 
				+
			
 
				+                if(nextNode === undefined || nextNode === null) {
			
 
				+                    console.log('last ivs info: ', timestamp, preNode[0], SEIinfo);
			
 
				+                    //console.log(preNode[0] - lastTime);
			
 
				+                    //lastTime = preNode[0];
			
 
				+                    if(timestamp - preNode[0] < 90000/frameRate) {
			
 
				+                        return preNode;//最后一个node
			
 
				+                    }
			
 
				+                    return null;
			
 
				+                }
			
 
				+                if(nextNode[0] > timestamp) {
			
 
				+                    // console.log('video time: ', timestamp, preNode[0], SEIinfo.length());
			
 
				+                    // if(SEIinfo.length()) {
			
 
				+                    //     SEIinfo.map((v, k)=>{
			
 
				+                    //         console.log(v);
			
 
				+                    //     });
			
 
				+                    // }
			
 
				+                    //console.log(preNode[0] - lastTime);
			
 
				+                    //lastTime = preNode[0];
			
 
				+                    return preNode;
			
 
				+                } else if(nextNode[0] === timestamp){
			
 
				+
			
 
				+                    nextNode = SEIinfo.shift();
			
 
				+                    //console.log('video time: ', timestamp, nextNode[0], SEIinfo);
			
 
				+                    //console.log(nextNode[0] - lastTime);
			
 
				+                    //lastTime = nextNode[0];
			
 
				+                    return nextNode;
			
 
				+                } else {
			
 
				+                    preNode = SEIinfo.shift();
			
 
				+                    nextNode = SEIinfo.top();
			
 
				+                }
			
 
				+            }
			
 
				+        }
			
 
				+        return null;
			
 
				+    }
			
 
				+
			
 
				+    /**
			
 
				+     * 绘制智能信息
			
 
				+     * @param timestamp
			
 
				+     */
			
 
				+    function drawIVS(timestamp) {
			
 
				+        let data = getIVS(timestamp);
			
 
				+        if(data === undefined || data === null) {
			
 
				+            //清空画布
			
 
				+            //ivsDrawer.clearCanvas();
			
 
				+            if(!SEIinfo.length() || (SEIinfo.length() && (SEIinfo.list[0][0] - timestamp) > 90000/frameRate)) {
			
 
				+                ivsDrawer.clearCanvas();
			
 
				+            }
			
 
				+        }else {
			
 
				+            //console.log('GET SEI: ', data[0], ' videoTimestamp', timestamp);
			
 
				+            data = data[1];
			
 
				+            //console.log(info.map.length)
			
 
				+            if(info.map.length > MAX_INFO) {
			
 
				+                console.log('info length: ', info.map.length);
			
 
				+            }
			
 
				+            //获取鹰眼信息
			
 
				+            data.map((content, k) =>{
			
 
				+                let result = info.get(content.id);
			
 
				+                if(result !== undefined && result !== null) {
			
 
				+                    data[k].text = result.value;
			
 
				+                }
			
 
				+            });
			
 
				+            ivsDrawer.draw(data, timestamp);
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+function ElementResizeCallback(someElement, callback) {
			
 
				+    const ro = new ResizeObserver( entries => {
			
 
				+        // for (let entry of entries) {
			
 
				+        //     const cr = entry.contentRect;
			
 
				+        //     console.log('Element:', entry.target);
			
 
				+        //     console.log(`Element size: ${cr.width}px x ${cr.height}px`);
			
 
				+        // }
			
 
				+        callback();
			
 
				+    });
			
 
				+    ro.observe(someElement);
			
 
				+}
			
 
				+
			
 
				+function yuv2canvas(yuv, width, height, canvas) {
			
 
				+
			
 
				+    canvas.width = width;
			
 
				+    canvas.height = height;
			
 
				+
			
 
				+    var context    = canvas.getContext("2d");
			
 
				+    var output     = context.createImageData(width, height);
			
 
				+    var outputData = output.data;
			
 
				+
			
 
				+    var yOffset = 0;
			
 
				+    var uOffset = width * height;
			
 
				+    var vOffset = width * height + (width*height)/4;
			
 
				+    for (var h=0; h<height; h++) {
			
 
				+        for (var w=0; w<width; w++) {
			
 
				+            var ypos = w + h * width + yOffset;
			
 
				+
			
 
				+            var upos = (w>>1) + (h>>1) * width/2 + uOffset;
			
 
				+            var vpos = (w>>1) + (h>>1) * width/2 + vOffset;
			
 
				+
			
 
				+            var Y = yuv[ypos];
			
 
				+            var U = yuv[upos] - 128;
			
 
				+            var V = yuv[vpos] - 128;
			
 
				+
			
 
				+            var R =  (Y + 1.371*V);
			
 
				+            var G =  (Y - 0.698*V - 0.336*U);
			
 
				+            var B =  (Y + 1.732*U);
			
 
				+
			
 
				+            var outputData_pos = w*4 + width*h*4;
			
 
				+            outputData[0+outputData_pos] = R;
			
 
				+            outputData[1+outputData_pos] = G;
			
 
				+            outputData[2+outputData_pos] = B;
			
 
				+            outputData[3+outputData_pos] = 255;
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    context.putImageData(output, 0, 0);
			
 
				+}
			
 
				+
			
 
				+class IVSQueue {
			
 
				+    constructor() {
			
 
				+        this.list = [];
			
 
				+    }
			
 
				+
			
 
				+    push(timestamp, ivs) {
			
 
				+        for (let i = 0, len = this.list.length; i < len; i++) {
			
 
				+            if(this.list[i][0] === timestamp) {
			
 
				+                let oldIvs = this.list[i][1];
			
 
				+                Array.prototype.push.apply(oldIvs, ivs);
			
 
				+                this.list[i][1] = oldIvs;
			
 
				+                return;
			
 
				+            }
			
 
				+        }
			
 
				+        this.list.push([timestamp, ivs]);
			
 
				+    }
			
 
				+
			
 
				+    shift() {
			
 
				+        let tmp = this.list.shift();
			
 
				+        return tmp;
			
 
				+    }
			
 
				+
			
 
				+    unshift(node) {
			
 
				+        this.list.unshift(node);
			
 
				+    }
			
 
				+
			
 
				+    top() {
			
 
				+        let tmp = this.list[0];
			
 
				+        return tmp;
			
 
				+    }
			
 
				+
			
 
				+    length() {
			
 
				+        return this.list.length;
			
 
				+    }
			
 
				+
			
 
				+    map(v,k) {
			
 
				+        return this.list.map(v,k);
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+class LruCache {
			
 
				+    constructor(limit) {
			
 
				+        this.limit = limit || 20;
			
 
				+        this.map = [];
			
 
				+    }
			
 
				+    get(key) {
			
 
				+        return this._search(key);
			
 
				+    }
			
 
				+    set(key, value) {
			
 
				+        let result  = this._search(key);
			
 
				+        if(!result) {
			
 
				+            this.map.unshift({
			
 
				+                key: key,
			
 
				+                value: value
			
 
				+            });
			
 
				+            if(this.map.length > this.limit) {
			
 
				+                this.map.pop();
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    //每次查找将该元素置于队首
			
 
				+    _search(key) {
			
 
				+        for(let i = 0, length = this.map.length; i < length; i++) {
			
 
				+            if(this.map[i].key === key) {
			
 
				+                let head = this.map.splice(i, 1);
			
 
				+                this.map.unshift(head[0]);
			
 
				+                return head[0];
			
 
				+            }
			
 
				+        }
			
 
				+        return null;
			
 
				+    }
			
 
				+
			
 
				+    clear() {
			
 
				+        this.map = [];
			
 
				+    }
			
 
				+}
			
 
				+export default WorkerManager;
			
--- a/public/vite.svg
+++ b/public/vite.svg
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,12 @@
 
				+<script setup>
			
 
				+  import ScaleBox from "./components/ScaleBox.vue";
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+  <scale-box :width="1920" :height="1080">
			
 
				+    <router-view></router-view>
			
 
				+  </scale-box>
			
 
				+</template>
			
 
				+
			
 
				+<style >
			
 
				+</style>
			
--- a/src/assets/Login/banner.png
+++ b/src/assets/Login/banner.png
--- a/src/assets/Login/form.png
+++ b/src/assets/Login/form.png
--- a/src/assets/Login/login_button.png
+++ b/src/assets/Login/login_button.png
--- a/src/assets/images/ai.png
+++ b/src/assets/images/ai.png
--- a/src/assets/images/banner.png
+++ b/src/assets/images/banner.png
--- a/src/assets/images/box.png
+++ b/src/assets/images/box.png
--- a/src/assets/images/dian.png
+++ b/src/assets/images/dian.png
--- a/src/assets/images/down.png
+++ b/src/assets/images/down.png
--- a/src/assets/images/huankong.png
+++ b/src/assets/images/huankong.png
--- a/src/assets/images/jiantou.png
+++ b/src/assets/images/jiantou.png
--- a/src/assets/images/kuang.png
+++ b/src/assets/images/kuang.png
--- a/src/assets/images/nenghao.png
+++ b/src/assets/images/nenghao.png
--- a/src/assets/images/shengchan.png
+++ b/src/assets/images/shengchan.png
--- a/src/assets/images/siwei.png
+++ b/src/assets/images/siwei.png
--- a/src/assets/images/up.png
+++ b/src/assets/images/up.png
--- a/src/assets/images/warnOrgin.png
+++ b/src/assets/images/warnOrgin.png
--- a/src/assets/images/xixiao.png
+++ b/src/assets/images/xixiao.png
--- a/src/assets/json/area.json
+++ b/src/assets/json/area.json
--- a/src/assets/tabs/1.png
+++ b/src/assets/tabs/1.png
--- a/src/assets/tabs/1a.png
+++ b/src/assets/tabs/1a.png
--- a/src/assets/tabs/2.png
+++ b/src/assets/tabs/2.png
--- a/src/assets/tabs/2a.png
+++ b/src/assets/tabs/2a.png
--- a/src/assets/tabs/3.png
+++ b/src/assets/tabs/3.png
--- a/src/assets/tabs/3a.png
+++ b/src/assets/tabs/3a.png
--- a/src/assets/tabs/4.png
+++ b/src/assets/tabs/4.png
--- a/src/assets/tabs/4a.png
+++ b/src/assets/tabs/4a.png
--- a/src/assets/tabs/5.png
+++ b/src/assets/tabs/5.png
--- a/src/assets/tabs/5a.png
+++ b/src/assets/tabs/5a.png
--- a/src/assets/tabs/6.png
+++ b/src/assets/tabs/6.png
--- a/src/assets/tabs/6a.png
+++ b/src/assets/tabs/6a.png
--- a/src/assets/tabs/pro1.png
+++ b/src/assets/tabs/pro1.png
--- a/src/assets/tabs/pro10.png
+++ b/src/assets/tabs/pro10.png
--- a/src/assets/tabs/pro11.png
+++ b/src/assets/tabs/pro11.png
--- a/src/assets/tabs/pro2.png
+++ b/src/assets/tabs/pro2.png
--- a/src/assets/tabs/pro3.png
+++ b/src/assets/tabs/pro3.png
--- a/src/assets/tabs/pro4.png
+++ b/src/assets/tabs/pro4.png
--- a/src/assets/tabs/pro5.png
+++ b/src/assets/tabs/pro5.png
--- a/src/assets/tabs/pro6.png
+++ b/src/assets/tabs/pro6.png
--- a/src/assets/tabs/pro7.png
+++ b/src/assets/tabs/pro7.png
--- a/src/assets/tabs/pro9.png
+++ b/src/assets/tabs/pro9.png
--- a/src/assets/tabs/top1.png
+++ b/src/assets/tabs/top1.png
--- a/src/assets/tabs/top2.png
+++ b/src/assets/tabs/top2.png
--- a/src/assets/tabs/top3.png
+++ b/src/assets/tabs/top3.png
--- a/src/assets/tabs/top4.png
+++ b/src/assets/tabs/top4.png
--- a/src/assets/tabs/top5.png
+++ b/src/assets/tabs/top5.png
--- a/src/assets/tabs/wash.png
+++ b/src/assets/tabs/wash.png
--- a/src/assets/ttf/Furore_2.otf
+++ b/src/assets/ttf/Furore_2.otf
--- a/src/assets/ttf/biaoti.ttf
+++ b/src/assets/ttf/biaoti.ttf
--- a/src/assets/ttf/font.css
+++ b/src/assets/ttf/font.css
@@ -0,0 +1,8 @@
 
				+@font-face {
			
 
				+  font-family: 'Biao-ti';
			
 
				+  src: url('./biaoti.ttf');
			
 
				+}
			
 
				+@font-face {
			
 
				+  font-family: 'Furore';
			
 
				+  src: url('./Furore_2.otf');
			
 
				+}
			
--- a/src/components/CountTo.vue
+++ b/src/components/CountTo.vue
@@ -0,0 +1,214 @@
 
				+<template>
			
 
				+  {{state.displayValue}}
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "CountTo"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import { onMounted, onUnmounted, reactive, watch, computed } from "vue";
			
 
				+  import { requestAnimationFrame, cancelAnimationFrame } from "../utils/requestAnimationFrame";
			
 
				+
			
 
				+  // 定义父组件传递的参数
			
 
				+  const props = defineProps({
			
 
				+    start: {
			
 
				+      type: Number,
			
 
				+      required: false,
			
 
				+      default: 0
			
 
				+    },
			
 
				+    end: {
			
 
				+      type: Number,
			
 
				+      required: false,
			
 
				+      default: 2021
			
 
				+    },
			
 
				+    duration: {
			
 
				+      type: Number,
			
 
				+      required: false,
			
 
				+      default: 5000
			
 
				+    },
			
 
				+    autoPlay: {
			
 
				+      type: Boolean,
			
 
				+      required: false,
			
 
				+      default: true
			
 
				+    },
			
 
				+    decimals: {
			
 
				+      type: Number,
			
 
				+      required: false,
			
 
				+      default: 0,
			
 
				+      validator (value) {
			
 
				+        return value >= 0
			
 
				+      }
			
 
				+    },
			
 
				+    decimal: {
			
 
				+      type: String,
			
 
				+      required: false,
			
 
				+      default: '.'
			
 
				+    },
			
 
				+    separator: {
			
 
				+      type: String,
			
 
				+      required: false,
			
 
				+      default: ','
			
 
				+    },
			
 
				+    prefix: {
			
 
				+      type: String,
			
 
				+      required: false,
			
 
				+      default: ''
			
 
				+    },
			
 
				+    suffix: {
			
 
				+      type: String,
			
 
				+      required: false,
			
 
				+      default: ''
			
 
				+    },
			
 
				+    useEasing: {
			
 
				+      type: Boolean,
			
 
				+      required: false,
			
 
				+      default: true
			
 
				+    },
			
 
				+    easingFn: {
			
 
				+      type: Function,
			
 
				+      default(t, b, c, d) {
			
 
				+        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
			
 
				+      }
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  const isNumber = (val) => {
			
 
				+    return !isNaN(parseFloat(val))
			
 
				+  }
			
 
				+
			
 
				+  // 格式化数据，返回想要展示的数据格式
			
 
				+  const formatNumber = (val) => {
			
 
				+    Number(val)
			
 
				+    // val = val.toFixed(props.default)
			
 
				+    val = val.toFixed(0)
			
 
				+    val += ''
			
 
				+    const x = val.split('.')
			
 
				+    let x1 = x[0]
			
 
				+    const x2 = x.length > 1 ? props.decimal + x[1] : ''
			
 
				+    const rgx = /(\d+)(\d{3})/
			
 
				+    if (props.separator && !isNumber(props.separator)) {
			
 
				+      while (rgx.test(x1)) {
			
 
				+        x1 = x1.replace(rgx, '$1' + props.separator + '$2')
			
 
				+      }
			
 
				+    }
			
 
				+    return props.prefix + x1 + x2 + props.suffix
			
 
				+  }
			
 
				+
			
 
				+  // 相当于vue2中的data中所定义的变量部分
			
 
				+  const state = reactive({
			
 
				+    localStart: props.start,
			
 
				+    displayValue: formatNumber(props.start),
			
 
				+    printVal: null,
			
 
				+    paused: false,
			
 
				+    localDuration: props.duration,
			
 
				+    startTime: null,
			
 
				+    timestamp: null,
			
 
				+    remaining: null,
			
 
				+    rAF: null
			
 
				+  })
			
 
				+
			
 
				+  // 定义一个计算属性，当开始数字大于结束数字时返回true
			
 
				+  const stopCount = computed(() => {
			
 
				+    return props.start > props.end
			
 
				+  })
			
 
				+  // 定义父组件的自定义事件，子组件以触发父组件的自定义事件
			
 
				+  const emits = defineEmits(['onMountedcallback', 'callback'])
			
 
				+
			
 
				+  const startCount = () => {
			
 
				+    state.localStart = props.start
			
 
				+    state.startTime = null
			
 
				+    state.localDuration = props.duration
			
 
				+    state.paused = false
			
 
				+    state.rAF = requestAnimationFrame(count)
			
 
				+  }
			
 
				+
			
 
				+  watch(() => props.start, () => {
			
 
				+    if (props.autoPlay) {
			
 
				+      startCount()
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  watch(() => props.end, () => {
			
 
				+    if (props.autoPlay) {
			
 
				+      startCount()
			
 
				+    }
			
 
				+  })
			
 
				+  // dom挂在完成后执行一些操作
			
 
				+  onMounted(() => {
			
 
				+    if (props.autoPlay) {
			
 
				+      startCount()
			
 
				+    }
			
 
				+    emits('onMountedcallback')
			
 
				+  })
			
 
				+  // 暂停计数
			
 
				+  const pause = () => {
			
 
				+    cancelAnimationFrame(state.rAF)
			
 
				+  }
			
 
				+  // 恢复计数
			
 
				+  const resume = () => {
			
 
				+    state.startTime = null
			
 
				+    state.localDuration = +state.remaining
			
 
				+    state.localStart = +state.printVal
			
 
				+    requestAnimationFrame(count)
			
 
				+  }
			
 
				+
			
 
				+  const pauseResume = () => {
			
 
				+    if (state.paused) {
			
 
				+      resume()
			
 
				+      state.paused = false
			
 
				+    } else {
			
 
				+      pause()
			
 
				+      state.paused = true
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  const reset = () => {
			
 
				+    state.startTime = null
			
 
				+    cancelAnimationFrame(state.rAF)
			
 
				+    state.displayValue = formatNumber(props.start)
			
 
				+  }
			
 
				+
			
 
				+  const count = (timestamp) => {
			
 
				+    if (!state.startTime) state.startTime = timestamp
			
 
				+    state.timestamp = timestamp
			
 
				+    const progress = timestamp - state.startTime
			
 
				+    state.remaining = state.localDuration - progress
			
 
				+    // 是否使用速度变化曲线
			
 
				+    if (props.useEasing) {
			
 
				+      if (stopCount.value) {
			
 
				+        state.printVal = state.localStart - props.easingFn(progress, 0, state.localStart - props.end, state.localDuration)
			
 
				+      } else {
			
 
				+        state.printVal = props.easingFn(progress, state.localStart, props.end - state.localStart, state.localDuration)
			
 
				+      }
			
 
				+    } else {
			
 
				+      if (stopCount.value) {
			
 
				+        state.printVal = state.localStart - ((state.localStart - props.end) * (progress / state.localDuration))
			
 
				+      } else {
			
 
				+        state.printVal = state.localStart + (props.end - state.localStart) * (progress / state.localDuration)
			
 
				+      }
			
 
				+    }
			
 
				+    if (stopCount.value) {
			
 
				+      state.printVal = state.printVal < props.end ? props.end : state.printVal
			
 
				+    } else {
			
 
				+      state.printVal = state.printVal > props.end ? props.end : state.printVal
			
 
				+    }
			
 
				+
			
 
				+    state.displayValue = formatNumber(state.printVal)
			
 
				+    if (progress < state.localDuration) {
			
 
				+      state.rAF = requestAnimationFrame(count)
			
 
				+    } else {
			
 
				+      emits('callback')
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 组件销毁时取消动画
			
 
				+  onUnmounted(() => {
			
 
				+    cancelAnimationFrame(state.rAF)
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/components/MVideo.vue
+++ b/src/components/MVideo.vue
@@ -0,0 +1,63 @@
 
				+<template>
			
 
				+  <vue3-video-play
			
 
				+    ref="myVideo"
			
 
				+    :width="width"
			
 
				+    :height="height"
			
 
				+    :autoPlay="true"
			
 
				+    :muted="true"
			
 
				+    :src="url"
			
 
				+    :type="options.type">
			
 
				+  </vue3-video-play>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "MVideo"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import { ref, onBeforeUnmount, watch, onMounted, getCurrentInstance } from 'vue';
			
 
				+
			
 
				+  const { proxy } = getCurrentInstance();
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    url: {
			
 
				+      type: String,
			
 
				+      default: ''
			
 
				+    },
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: '800px'
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: '450px'
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  watch(()=> props.url, () => {
			
 
				+    // proxy.$refs['myVideo'].ended();
			
 
				+  })
			
 
				+
			
 
				+  const options = ref({
			
 
				+    src: 'http://61.153.248.106:6713/mag/hls/6bf5d2cf30bb440cad3fc126512f5188/1/live.m3u8',
			
 
				+    type: 'm3u8'
			
 
				+  })
			
 
				+
			
 
				+  onMounted(() => {
			
 
				+    console.log( proxy.$refs['myVideo']);
			
 
				+  })
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+  onBeforeUnmount(() => {
			
 
				+    console.log(1111)
			
 
				+    proxy.$refs['myVideo'].pause();
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/components/RVideo.vue
+++ b/src/components/RVideo.vue
@@ -0,0 +1,119 @@
 
				+<template>
			
 
				+  <div :id="'player'+id" :style="{ width: width+'px', height: height+'px' }"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "RVideo"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import { ref,  onMounted, onBeforeUnmount , watch} from 'vue';
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    id: {
			
 
				+      type: Number,
			
 
				+      default: 0
			
 
				+    },
			
 
				+    url: {
			
 
				+      type: String,
			
 
				+      default: ''
			
 
				+    },
			
 
				+    width: {
			
 
				+      type: Number,
			
 
				+      default: 800
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: Number,
			
 
				+      default: 450
			
 
				+    },
			
 
				+  })
			
 
				+
			
 
				+  let player = null;
			
 
				+
			
 
				+  const createPlayer = async () => {
			
 
				+    if(!player) {
			
 
				+      player = new window.JSPlugin({
			
 
				+        szId: 'player'+props.id,
			
 
				+        szBasePath: "./dist",
			
 
				+        iWidth: props.width,
			
 
				+        iHeight: props.height,
			
 
				+        // iMaxSplit: 1,
			
 
				+        // iCurrentSplit: 1,
			
 
				+        openDebug: true,
			
 
				+        oStyle: {
			
 
				+          borderSelect: '#FFCC00',
			
 
				+        }
			
 
				+      })
			
 
				+      await player.JS_SetWindowControlCallback({
			
 
				+        windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
			
 
				+          console.log('windowSelect callback: ', iWndIndex);
			
 
				+        },
			
 
				+        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
			
 
				+          console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
			
 
				+        },
			
 
				+        windowEventOver: function (iWndIndex) {  //鼠标移过回调
			
 
				+          //console.log(iWndIndex);
			
 
				+        },
			
 
				+        windowEventOut: function (iWndIndex) {  //鼠标移出回调
			
 
				+          //console.log(iWndIndex);
			
 
				+        },
			
 
				+        windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
			
 
				+          //console.log(iWndIndex);
			
 
				+        },
			
 
				+        windowFullCcreenChange: function (bFull) {  //全屏切换回调
			
 
				+          console.log('fullScreen callback: ', bFull);
			
 
				+        },
			
 
				+        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
			
 
				+          console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
			
 
				+        },
			
 
				+        performanceLack: function () {  //性能不足回调
			
 
				+          console.log('performanceLack callback: ');
			
 
				+        }
			
 
				+      });
			
 
				+      let splitNum = 1;
			
 
				+      await player.JS_ArrangeWindow(splitNum).then(
			
 
				+        () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
			
 
				+        e => { console.error(e) }
			
 
				+      )
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  const play = async () => {
			
 
				+    let playUrl = props.url;
			
 
				+    let index = player.currentWindowIndex;
			
 
				+    await player.JS_Play(playUrl, { playURL: playUrl, mode: 1 }, index).then(
			
 
				+      () => { console.log('realplay success') },
			
 
				+      e => { console.error(e) }
			
 
				+    )
			
 
				+  }
			
 
				+
			
 
				+  onMounted(async () => {
			
 
				+    await createPlayer()
			
 
				+    await play()
			
 
				+  })
			
 
				+
			
 
				+  onBeforeUnmount(() => {
			
 
				+    player.JS_StopRealPlayAll().then(
			
 
				+      () => {
			
 
				+        console.info('JS_StopRealPlayAll success');
			
 
				+        // do you want...
			
 
				+      },
			
 
				+      (err) => {
			
 
				+        console.info('JS_StopRealPlayAll failed');
			
 
				+        // do you want...
			
 
				+      }
			
 
				+    );
			
 
				+    player = null;
			
 
				+  })
			
 
				+
			
 
				+  watch(() => props.url, () => {
			
 
				+    play()
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/components/ScaleBox.vue
+++ b/src/components/ScaleBox.vue
@@ -0,0 +1,56 @@
 
				+<template>
			
 
				+  <div class="scale-box" id="scale-box">
			
 
				+    <slot></slot>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ScaleBox"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import { ref, onMounted } from "vue";
			
 
				+
			
 
				+  const scale = ref(null);
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    width: {
			
 
				+      type: Number,
			
 
				+      default: 1920
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: Number,
			
 
				+      default: 1080
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  const init = () => {
			
 
				+    let ww = window.innerWidth / props.width;
			
 
				+    let wh = window.innerHeight / props.height;
			
 
				+    scale.value = ww < wh ? ww : wh
			
 
				+  }
			
 
				+
			
 
				+  onMounted(() => {
			
 
				+    init()
			
 
				+    window.addEventListener('resize', init)
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+  #scale-box {
			
 
				+    width: 1920px;
			
 
				+    height: 1080px;
			
 
				+  }
			
 
				+  .scale-box {
			
 
				+    width: 1920px;
			
 
				+    height: 1080px;
			
 
				+    transform: scale( v-bind(scale) ) translate(-50%, -50%);
			
 
				+    transform-origin: 0 0;
			
 
				+    position: absolute;
			
 
				+    left: 50%;
			
 
				+    top: 50%;
			
 
				+    transition: 0.3s;
			
 
				+    overflow: hidden;
			
 
				+  }
			
 
				+</style>
			
--- a/src/components/TVideo.vue
+++ b/src/components/TVideo.vue
@@ -0,0 +1,89 @@
 
				+<template>
			
 
				+  <div :style="{width: width, height: height}">
			
 
				+    <video
			
 
				+           :id="'mmiid' + id"
			
 
				+           class="video-js vjs-default-skin vjs-fluid"
			
 
				+           controls
			
 
				+           preload="auto"
			
 
				+           width="100%"
			
 
				+           height="100%">
			
 
				+    </video>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "TVideo"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import Videojs from 'video.js'
			
 
				+  import 'video.js/dist/video-js.min.css';
			
 
				+  import { ref, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    id: {
			
 
				+      type: Number,
			
 
				+      default: 0
			
 
				+    },
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: '800px'
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: '450px'
			
 
				+    },
			
 
				+    url: {
			
 
				+      type: String,
			
 
				+      default: '',
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  const showVideo = ref(false);
			
 
				+  let videoPlayer = null;
			
 
				+
			
 
				+  const init = () => {
			
 
				+    showVideo.value = true;
			
 
				+    nextTick(() => {
			
 
				+        videoPlayer = null;
			
 
				+        videoPlayer = Videojs(document.querySelector('#mmiid' + props.id), {
			
 
				+          autoplay: 'muted',//自动播放
			
 
				+          controls: true,//用户可以与之交互的控件
			
 
				+          loop: false,//视频一结束就重新开始
			
 
				+          muted: true,//默认情况下将使所有音频静音
			
 
				+          aspectRatio:"16:9",//显示比率
			
 
				+          fullscreen:{
			
 
				+            options: { navigationUI: 'hide' }
			
 
				+          },
			
 
				+          techOrder: ["html5"],// 兼容顺序
			
 
				+          html5:{hls: {
			
 
				+              withCredentials: false
			
 
				+            }},
			
 
				+          sources: [{ src: props.url, type: "application/x-mpegURL" }]
			
 
				+        })
			
 
				+      })
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  onMounted(() => {
			
 
				+    init()
			
 
				+  })
			
 
				+
			
 
				+  onBeforeUnmount(() => {
			
 
				+    if(videoPlayer) {
			
 
				+      videoPlayer.dispose()
			
 
				+      videoPlayer = null;
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  watch(() => props.url, () => {
			
 
				+    videoPlayer.src({src: props.url, type: "application/x-mpegURL"  })
			
 
				+  })
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/components/XBox.vue
+++ b/src/components/XBox.vue
@@ -0,0 +1,62 @@
 
				+<template>
			
 
				+  <div class="home_box" :style="{ height: height + 'px' }">
			
 
				+    <div class="box_title">
			
 
				+      <div class="title_icon"></div>
			
 
				+      <div class="title_text">{{ name }}</div>
			
 
				+      <slot name="header"></slot>
			
 
				+    </div>
			
 
				+    <div class="box_content">
			
 
				+      <slot></slot>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "XBox"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  const props = defineProps({
			
 
				+    name: {
			
 
				+      type: String,
			
 
				+      default: ''
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: Number,
			
 
				+      default: 285
			
 
				+    }
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.home_box {
			
 
				+  width: 100%;
			
 
				+  /*height: 285px;*/
			
 
				+  background: url("../assets/images/kuang.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+.box_title {
			
 
				+  width: 100%;
			
 
				+  height: 45px;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  padding: 0 10px;
			
 
				+  background: linear-gradient(to bottom, rgba(0, 50, 97, .3), #00305B);
			
 
				+}
			
 
				+.title_icon {
			
 
				+  width: 35px;
			
 
				+  height: 31px;
			
 
				+  background: url("../assets/images/jiantou.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+  margin-right: 20px;
			
 
				+}
			
 
				+.title_text {
			
 
				+  font-size: 20px;
			
 
				+  color: #fff;
			
 
				+}
			
 
				+.box_content {
			
 
				+  width: 100%;
			
 
				+  height: calc(100% - 45px);
			
 
				+}
			
 
				+</style>
			
--- a/src/components/XTabs.vue
+++ b/src/components/XTabs.vue
@@ -0,0 +1,162 @@
 
				+<template>
			
 
				+  <div class="tabs">
			
 
				+    <div v-for="item in list" :class="['tab_item', active === item.id ? 'icon_select'+item.id : 'icon'+item.id ]" @click="jump(item)"></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script setup>
			
 
				+  import { ref, onMounted } from 'vue';
			
 
				+  import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
			
 
				+
			
 
				+  const active = ref(1);
			
 
				+
			
 
				+  const list = ref([
			
 
				+    {
			
 
				+      id: 1,
			
 
				+      name: '智能环控',
			
 
				+      url: '/env'
			
 
				+    },
			
 
				+    {
			
 
				+      id: 2,
			
 
				+      name: '智能能耗',
			
 
				+      url: '/energy'
			
 
				+    },
			
 
				+    {
			
 
				+      id: 3,
			
 
				+      name: '生产管理',
			
 
				+      url: '/pro'
			
 
				+    },
			
 
				+    {
			
 
				+      id: 4,
			
 
				+      name: '精准饲喂',
			
 
				+      url: '/feed'
			
 
				+    },
			
 
				+    {
			
 
				+      id: 5,
			
 
				+      name: '智能洗消',
			
 
				+      url: '/wash'
			
 
				+    },
			
 
				+    {
			
 
				+      id: 6,
			
 
				+      name: 'AI巡检预警',
			
 
				+      url: '/ai'
			
 
				+    },
			
 
				+  ]);
			
 
				+  const selectList = ref([]);
			
 
				+  const show = ref(true);
			
 
				+
			
 
				+  const myCarousel = ref(null);
			
 
				+
			
 
				+  const route = useRoute()
			
 
				+  const router = useRouter();
			
 
				+
			
 
				+  const jump = (item) => {
			
 
				+    if(item.url) {
			
 
				+      active.value = item.id;
			
 
				+      router.push(item.url);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  onMounted(async () => {
			
 
				+    let url = route.path;
			
 
				+    let item = list.value.find(item => item.url === url);
			
 
				+    active.value = item.id
			
 
				+  })
			
 
				+
			
 
				+  onBeforeRouteUpdate((to, from, next) => {
			
 
				+    let url = to.path;
			
 
				+    let item = list.value.find(item => item.url === url);
			
 
				+    active.value = item.id;
			
 
				+    next()
			
 
				+  })
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+   .tabs {
			
 
				+    width: 800px;
			
 
				+    height: 179px;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: end;
			
 
				+     margin: 0 auto;
			
 
				+  }
			
 
				+  .tab_item {
			
 
				+    width: 115px;
			
 
				+    height: 100%;
			
 
				+    cursor: pointer;
			
 
				+  }
			
 
				+  .icon1 {
			
 
				+    background: url("../assets/tabs/1.png") no-repeat;
			
 
				+    background-size: 100% 100%;
			
 
				+  }
			
 
				+  .icon1:hover {
			
 
				+    background: url("../assets/tabs/1a.png") no-repeat;
			
 
				+    background-size: 100% 100%;
			
 
				+  }
			
 
				+  .icon_select1 {
			
 
				+    background: url("../assets/tabs/1a.png") no-repeat;
			
 
				+    background-size: 100% 100%;
			
 
				+  }
			
 
				+   .icon2 {
			
 
				+     background: url("../assets/tabs/2.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon2:hover {
			
 
				+     background: url("../assets/tabs/2a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon_select2 {
			
 
				+     background: url("../assets/tabs/2a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon3 {
			
 
				+     background: url("../assets/tabs/3.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon3:hover {
			
 
				+     background: url("../assets/tabs/3a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon_select3 {
			
 
				+     background: url("../assets/tabs/3a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon4 {
			
 
				+     background: url("../assets/tabs/4.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon4:hover {
			
 
				+     background: url("../assets/tabs/4a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon_select4 {
			
 
				+     background: url("../assets/tabs/4a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon5 {
			
 
				+     background: url("../assets/tabs/5.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon5:hover {
			
 
				+     background: url("../assets/tabs/5a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon_select5 {
			
 
				+     background: url("../assets/tabs/5a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon6 {
			
 
				+     background: url("../assets/tabs/6.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon6:hover {
			
 
				+     background: url("../assets/tabs/6a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .icon_select6 {
			
 
				+     background: url("../assets/tabs/6a.png") no-repeat;
			
 
				+     background-size: 100% 100%;
			
 
				+   }
			
 
				+   .tab_item:hover {
			
 
				+     transform: scale(1.1);
			
 
				+   }
			
 
				+</style>
			
--- a/src/components/XVideo.vue
+++ b/src/components/XVideo.vue
@@ -0,0 +1,72 @@
 
				+<template>
			
 
				+  <div class="video_box" :style="{ width:width, height: height }">
			
 
				+    <vue3-video-player ref="myVideo" class="my-video" @pause="pauseFunc" :core="HLSCore" :src="videoUrl" muted autoplay></vue3-video-player>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script >
			
 
				+  import HLSCore from '@cloudgeek/playcore-hls';
			
 
				+  export default {
			
 
				+    data() {
			
 
				+      return {
			
 
				+        HLSCore
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+</script>
			
 
				+
			
 
				+<script setup>
			
 
				+
			
 
				+  import { nextTick, onMounted, watch, getCurrentInstance } from 'vue';
			
 
				+
			
 
				+  const { proxy } = getCurrentInstance()
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    videoUrl: {
			
 
				+      type: String,
			
 
				+      default: '',
			
 
				+    },
			
 
				+    width: {
			
 
				+      type: String,
			
 
				+      default: '800px'
			
 
				+    },
			
 
				+    height: {
			
 
				+      type: String,
			
 
				+      default: '450px'
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  const pauseFunc = () => {
			
 
				+    console.log('触发了')
			
 
				+  }
			
 
				+
			
 
				+  onMounted(() => {
			
 
				+    nextTick(() => {
			
 
				+      var videos = document.getElementsByTagName('video');
			
 
				+      videos.forEach(item => {
			
 
				+        item.muted = true;
			
 
				+        item.autoplay = true;
			
 
				+      })
			
 
				+    })
			
 
				+  })
			
 
				+
			
 
				+  watch(() => props.videoUrl, () => {
			
 
				+    console.log(111);
			
 
				+    proxy.$refs['myVideo'].exit();
			
 
				+  })
			
 
				+
			
 
				+
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+  .video_box {
			
 
				+    position: relative;
			
 
				+  }
			
 
				+  .my-video {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    left:0;
			
 
				+    top:0;
			
 
				+  }
			
 
				+</style>
			
--- a/src/components/headerElement.vue
+++ b/src/components/headerElement.vue
@@ -0,0 +1,109 @@
 
				+<template>
			
 
				+  <div class="header_element">
			
 
				+    <div class="header_title">{{title}}</div>
			
 
				+    <div class="header_logout back_home" v-if="routerName !== 'Home'" @click="goHome">返回首页</div>
			
 
				+    <div class="header_logout" @click="logout">退出登录</div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script setup>
			
 
				+  import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
			
 
				+  import { onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router';
			
 
				+  import { getYMDHMS } from '@/utils/index.js';
			
 
				+  import { PoweroffOutlined, SettingFilled, HomeFilled } from "@ant-design/icons-vue";
			
 
				+  import tool from "../utils/tool";
			
 
				+
			
 
				+  const date = ref('');
			
 
				+  const initTime = () => {
			
 
				+    date.value = getYMDHMS(new Date().getTime());
			
 
				+  }
			
 
				+
			
 
				+  const props = defineProps({
			
 
				+    list: {
			
 
				+      type: Array,
			
 
				+      default: () => []
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+  const city = ref('杭州');
			
 
				+  const title = ref('');
			
 
				+  const routerName = ref('')
			
 
				+
			
 
				+  const router = useRouter();
			
 
				+  const route = useRoute();
			
 
				+
			
 
				+  let timer = null;
			
 
				+
			
 
				+  const goHome = () => {
			
 
				+    router.replace('/home');
			
 
				+  }
			
 
				+
			
 
				+  const logout = () => {
			
 
				+    tool.data.clear()
			
 
				+    router.replace('/login')
			
 
				+  }
			
 
				+
			
 
				+  onBeforeRouteUpdate((to, form, next) => {
			
 
				+    title.value = to.meta.title;
			
 
				+    routerName.value = to.name
			
 
				+    next();
			
 
				+  })
			
 
				+
			
 
				+  onMounted(() => {
			
 
				+    // init()
			
 
				+    title.value = route.meta.title;
			
 
				+    routerName.value = route.name
			
 
				+    // initTime()
			
 
				+    // timer = setInterval(() => {
			
 
				+    //   initTime()
			
 
				+    // },1000)
			
 
				+  })
			
 
				+
			
 
				+  onBeforeUnmount(() => {
			
 
				+    if(timer) {
			
 
				+      clearInterval(timer)
			
 
				+    }
			
 
				+  })
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+.header_element {
			
 
				+  width: 100%;
			
 
				+  /*background: url('../assets/images/header/top.png');*/
			
 
				+  height: 105px;
			
 
				+  box-sizing: border-box;
			
 
				+  position: relative;
			
 
				+}
			
 
				+
			
 
				+.header_title {
			
 
				+  position: absolute;
			
 
				+  top: 10px;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%, 0);
			
 
				+  font-family: 'Biao-ti';
			
 
				+  font-size: 38px;
			
 
				+  height: 48px;
			
 
				+  line-height: 48px;
			
 
				+  letter-spacing: 2px;
			
 
				+  color: #fff;
			
 
				+  text-shadow: 0px 0px 10px #0080FF;
			
 
				+}
			
 
				+.header_logout {
			
 
				+  text-align: center;
			
 
				+  width: 90px;
			
 
				+  height: 25px;
			
 
				+  line-height: 25px;
			
 
				+  border: 1px solid #fff;
			
 
				+  border-radius: 10px;
			
 
				+  position: absolute;
			
 
				+  bottom: 20px;
			
 
				+  right: 20px;
			
 
				+  cursor: pointer;
			
 
				+  box-shadow: inset 0 0 20px #00477B;
			
 
				+  color: #fff;
			
 
				+  text-shadow: 0px 0px 10px #0080FF;
			
 
				+}
			
 
				+.back_home {
			
 
				+  bottom: 20px;
			
 
				+  right: 130px;
			
 
				+}
			
 
				+</style>
			
--- a/src/custom.less
+++ b/src/custom.less
@@ -0,0 +1 @@
 
				+@import "./node_modules/ant-design-vue/lib/style/themes/dark.less";
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,28 @@
 
				+import { createApp } from 'vue'
			
 
				+import router from "./router"
			
 
				+import store from "./store"
			
 
				+import * as echarts from 'echarts'
			
 
				+import 'echarts-liquidfill'
			
 
				+import 'echarts-gl'
			
 
				+import './style.css'
			
 
				+import 'animate.css'
			
 
				+import vue3SeamlessScroll from "vue3-seamless-scroll";
			
 
				+import App from './App.vue';
			
 
				+import './assets/ttf/font.css';
			
 
				+import moment from 'moment';
			
 
				+moment.locale('zh-CN');
			
 
				+import Antd from 'ant-design-vue';
			
 
				+import 'ant-design-vue/dist/antd.dark.less';
			
 
				+import VueViewer from 'v-viewer'
			
 
				+import 'viewerjs/dist/viewer.css';
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+const app = createApp(App)
			
 
				+
			
 
				+app.config.globalProperties.$echarts = echarts;
			
 
				+app.config.globalProperties.$moment = moment;
			
 
				+
			
 
				+app.use(store).use(router).use(Antd).use(VueViewer).use(vue3SeamlessScroll).mount('#app')
			
--- a/src/router/childrenRouters.js
+++ b/src/router/childrenRouters.js
@@ -0,0 +1,60 @@
 
				+const childrenRouter = [
			
 
				+  {
			
 
				+    path: '/home',
			
 
				+    name: 'Home',
			
 
				+    component: () => import('@/views/Home/Home.vue'),
			
 
				+    meta: {
			
 
				+      title: '两头乌繁育中心综合管理平台'
			
 
				+    }
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/env',
			
 
				+    name: 'Env',
			
 
				+    component: () => import('@/views/Env/Env.vue'),
			
 
				+    meta: {
			
 
				+      title: '智能环控'
			
 
				+    }
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/energy',
			
 
				+    name: 'Energy',
			
 
				+    component: () => import('@/views/Energy/Energy.vue'),
			
 
				+    meta: {
			
 
				+      title: '智能能耗'
			
 
				+    }
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/pro',
			
 
				+    name: 'Pro',
			
 
				+    component: () => import('@/views/Pro/Pro.vue'),
			
 
				+    meta: {
			
 
				+      title: '生产管理'
			
 
				+    }
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/feed',
			
 
				+    name: 'Feed',
			
 
				+    component: () => import('@/views/Feed/Feed.vue'),
			
 
				+    meta: {
			
 
				+      title: '精准饲喂'
			
 
				+    }
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/wash',
			
 
				+    name: 'Wash',
			
 
				+    component: () => import('@/views/Wash/Wash.vue'),
			
 
				+    meta: {
			
 
				+      title: '智能洗消'
			
 
				+    }
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/ai',
			
 
				+    name: 'Ai',
			
 
				+    component: () => import('@/views/Ai/Ai.vue'),
			
 
				+    meta: {
			
 
				+      title: 'AI巡检预警'
			
 
				+    }
			
 
				+  },
			
 
				+]
			
 
				+
			
 
				+export default childrenRouter
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,30 @@
 
				+import { createRouter, createWebHashHistory } from "vue-router";
			
 
				+import childrenRouter from "./childrenRouters";
			
 
				+
			
 
				+let mainRouters = [];
			
 
				+mainRouters = mainRouters.concat(childrenRouter)
			
 
				+
			
 
				+const routers = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'MainLayout',
			
 
				+    redirect: '/home',
			
 
				+    component: () => import('../views/MainLayout.vue'),
			
 
				+    children: mainRouters
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/login',
			
 
				+    name: 'Login',
			
 
				+    component: () => import('../views/Login/Login.vue'),
			
 
				+    meta: {
			
 
				+      title: '登录'
			
 
				+    }
			
 
				+  }
			
 
				+];
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHashHistory(),
			
 
				+  routes: routers
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,29 @@
 
				+import { createStore } from "vuex";
			
 
				+
			
 
				+const state = {
			
 
				+  componentList: [],
			
 
				+}
			
 
				+
			
 
				+const actions = {
			
 
				+  set_component(context, data) {
			
 
				+    context.commit('SET_COMPONENT', data)
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const mutations = {
			
 
				+  SET_COMPONENT(state, data) {
			
 
				+    state.componentList = data;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const getters = {
			
 
				+}
			
 
				+
			
 
				+const store = createStore({
			
 
				+  state,
			
 
				+  actions,
			
 
				+  mutations,
			
 
				+  getters
			
 
				+})
			
 
				+
			
 
				+export default store
			
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,41 @@
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  overflow: hidden;
			
 
				+  user-select: none;
			
 
				+}
			
 
				+
			
 
				+#app {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: relative;
			
 
				+    background-color: #05142D;
			
 
				+    background-size: cover;
			
 
				+    overflow: hidden;
			
 
				+    /*width: 100vw;*/
			
 
				+    /*height: 100vh;*/
			
 
				+    /*position: relative;*/
			
 
				+    font-family: 'Biao-ti';
			
 
				+}
			
 
				+p {
			
 
				+    margin: 0;
			
 
				+}
			
 
				+
			
 
				+/* css 处理节流 */
			
 
				+.btn {
			
 
				+    animation: throttle 1s step-end forwards;
			
 
				+}
			
 
				+.btn:active{
			
 
				+    animation: none;
			
 
				+}
			
 
				+@keyframes throttle {
			
 
				+    from {
			
 
				+        pointer-events: none;
			
 
				+    }
			
 
				+    to {
			
 
				+        pointer-events: all;
			
 
				+    }
			
 
				+}
			
 
				+
			
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -0,0 +1,235 @@
 
				+import http from './http';
			
 
				+
			
 
				+export function goLogin(data) {
			
 
				+  return http({
			
 
				+    url: '/auth/b/doLogin',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getLoginUser(data) {
			
 
				+  return http({
			
 
				+    url: '/auth/b/getLoginUser',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 环境监测
			
 
				+export function getSwiperPage(data) {
			
 
				+  return http({
			
 
				+    url: '/env/envData/listData',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 能耗管理
			
 
				+export function getEnergyHomeChart(data) {
			
 
				+  return http({
			
 
				+    url: '/energy/energyElectricity/listScreenEnergy',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 预警类别
			
 
				+export function getWarnHomePie(data) {
			
 
				+  return http({
			
 
				+    url: '/warning/warningInfo/getProportion',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 预警列表
			
 
				+export function getWarnList(data) {
			
 
				+  return http({
			
 
				+    url: '/warning/warningInfo/listWarningByType',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 根据id拿到温湿度曲线
			
 
				+export function getTempAndHumChart(data) {
			
 
				+  return http({
			
 
				+    url: '/env/envData/listDataByPigpenId',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 近7天设备在线情况
			
 
				+export function getDeviceChartEnv(data) {
			
 
				+  return http({
			
 
				+    url: '/env/envDeviceOnline/listSevenDay',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 近7天水
			
 
				+export function getSevenWater(data) {
			
 
				+  return http({
			
 
				+    url: '/energy/energyWater/listTrend',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 近7天电
			
 
				+export function getSevenEle(data) {
			
 
				+  return http({
			
 
				+    url: '/energy/energyElectricity/listTrend',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 近7天料
			
 
				+// export function getSeven
			
 
				+
			
 
				+
			
 
				+// 水排名
			
 
				+export function getWaterRank(data) {
			
 
				+  return http({
			
 
				+    url: '/energy/energyWater/listTop',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 电排名
			
 
				+export function getEleRank(data) {
			
 
				+  return http({
			
 
				+    url: '/energy/energyElectricity/listTop',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 拿到料塔
			
 
				+export function getFeedPage(data) {
			
 
				+  return http({
			
 
				+    url: '/feed/feedingenv/page',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 料塔余量
			
 
				+export function getFeedChart(data) {
			
 
				+  return http({
			
 
				+    url: '/modular/feedinglist/feedList',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 母猪采食、膘体、料肉比
			
 
				+export function getFeedPigChart(data) {
			
 
				+  return http({
			
 
				+    url: '/feed/feedinglist/listDetail',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getPigChart(data) {
			
 
				+  return http({
			
 
				+    url: '/feed/feedinglist/feedScreen',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+export function getFatChart(data) {
			
 
				+  return http({
			
 
				+    url: '/feed/feedinglist/feedFat',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 拿到7天饲料
			
 
				+export function getFeedSeven(data) {
			
 
				+  return http({
			
 
				+    url: '/feed/feedinglist/listFatSeven',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 拿到所有牧场
			
 
				+export function getFarmList(data) {
			
 
				+  return http({
			
 
				+    url: '/biz/org/orgSelector',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+// 切换牧场
			
 
				+export function updateFarm(data) {
			
 
				+  return http({
			
 
				+    url: '/biz/user/updateLastLoginOrgId',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 人员行为分析
			
 
				+export function getAiPerson(data) {
			
 
				+  return http({
			
 
				+    url: '/ai/personCapture/page',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+// 车辆行为分析
			
 
				+export function getAiCar(data) {
			
 
				+  return http({
			
 
				+    url: '/ai/carCapture/page',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 外来生物
			
 
				+export function getAiSpecies(data) {
			
 
				+  return http({
			
 
				+    url: '/ai/speciesCapture/page',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 镜头脏污
			
 
				+export function getAiDirty(data) {
			
 
				+  return http({
			
 
				+    url: '/ai/dirtyCapture/page',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 获取当天猪价
			
 
				+export function getPigPrice(data) {
			
 
				+  return http({
			
 
				+    url: '/base/baseConfig/getTodayPigPrice',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 历史猪价曲线
			
 
				+export function getPigHomeChart(data) {
			
 
				+  return http({
			
 
				+    url: '/base/baseConfig/listPigPrice',
			
 
				+    method: 'get',
			
 
				+    params: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+
			
--- a/src/utils/drawMixin.js
+++ b/src/utils/drawMixin.js
@@ -0,0 +1,57 @@
 
				+// 屏幕适配 mixin 函数
			
 
				+
			
 
				+// * 默认缩放值
			
 
				+const scale = {
			
 
				+  width: '1',
			
 
				+  height: '1',
			
 
				+}
			
 
				+
			
 
				+// * 设计稿尺寸（px）
			
 
				+const baseWidth = 1920
			
 
				+const baseHeight = 1080
			
 
				+
			
 
				+// * 需保持的比例（默认1.77778）
			
 
				+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
			
 
				+
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      // * 定时函数
			
 
				+      drawTiming: null
			
 
				+    }
			
 
				+  },
			
 
				+  mounted () {
			
 
				+    this.calcRate()
			
 
				+    window.addEventListener('resize', this.resize)
			
 
				+  },
			
 
				+  beforeDestroy () {
			
 
				+    window.removeEventListener('resize', this.resize)
			
 
				+  },
			
 
				+  methods: {
			
 
				+    calcRate () {
			
 
				+      const appRef = this.$refs["appRef"]
			
 
				+      if (!appRef) return
			
 
				+      // 当前宽高比
			
 
				+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
			
 
				+      if (appRef) {
			
 
				+        if (currentRate > baseProportion) {
			
 
				+          // 表示更宽
			
 
				+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
			
 
				+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
			
 
				+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
			
 
				+        } else {
			
 
				+          // 表示更高
			
 
				+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
			
 
				+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
			
 
				+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+    resize () {
			
 
				+      clearTimeout(this.drawTiming)
			
 
				+      this.drawTiming = setTimeout(() => {
			
 
				+        this.calcRate()
			
 
				+      }, 200)
			
 
				+    }
			
 
				+  },
			
 
				+}
			
--- a/src/utils/htApi.js
+++ b/src/utils/htApi.js
@@ -0,0 +1,73 @@
 
				+import http from './htHttp';
			
 
				+
			
 
				+// 通行统计
			
 
				+export function getScreenCount(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-personnel-admission/screenCount',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 非瘟监测
			
 
				+export function getPcrList(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-pcr/pcrList',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 应急入场申请
			
 
				+export function getJingJiAdmission(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-personnel-admission/jingJiAdmission',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 大屏总计
			
 
				+export function getAllcount(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-personnel-admission/allCount',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 物资管理
			
 
				+export function getGoods(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-goods-inventory/listAll',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 人员洗消 车辆洗消
			
 
				+export function getPersonAndCar(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-clean/listScreen',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 生物防控 人员管理、 车辆管理
			
 
				+export function getListDoor(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-personnel-admission/listDoor',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+// 洗消预警
			
 
				+export function getWarnList(data) {
			
 
				+  return http({
			
 
				+    url: '/bill-personnel-admission/screenWarning',
			
 
				+    method: 'post',
			
 
				+    data: data
			
 
				+  })
			
 
				+}
			
--- a/src/utils/htHttp.js
+++ b/src/utils/htHttp.js
@@ -0,0 +1,71 @@
 
				+import axios from "axios";
			
 
				+import tool from "./tool";
			
 
				+
			
 
				+let axiosPromiseCancel = [];
			
 
				+const CancelToken = axios.CancelToken;
			
 
				+
			
 
				+let instance = axios.create({
			
 
				+  timeout: 1000 * 12,
			
 
				+  // baseURL: 'http://123.60.134.84/huatongApi/',
			
 
				+  baseURL: 'https://nk.ifarmcloud.com/secureApi/',
			
 
				+})
			
 
				+
			
 
				+// 请求拦截器
			
 
				+instance.interceptors.request.use(
			
 
				+  config => {
			
 
				+
			
 
				+    const token = tool.data.get('snowy_token')
			
 
				+    const orgId = tool.data.get('snowy_org_id')
			
 
				+    const account =tool.data.get('snowy_user_info')?.account
			
 
				+
			
 
				+    token && (config.headers.token = '' + token)
			
 
				+
			
 
				+    config.cancelToken = new CancelToken((cancel) => {
			
 
				+      axiosPromiseCancel.push(cancel);
			
 
				+    });
			
 
				+    let data = config.data || config.params || {}
			
 
				+
			
 
				+    if(account !== 'superAdmin') {
			
 
				+      orgId && ( data.farmId = orgId)
			
 
				+    }
			
 
				+    return config
			
 
				+  },
			
 
				+  error => Promise.error(error)
			
 
				+)
			
 
				+
			
 
				+// 相应拦截器
			
 
				+instance.interceptors.response.use(
			
 
				+  response => {
			
 
				+    return response.data
			
 
				+  },
			
 
				+  error => {
			
 
				+    errorHandle(error.response.status)
			
 
				+    return Promise.reject(error);
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+const cancel = () => {
			
 
				+  axiosPromiseCancel.forEach(e=>{
			
 
				+    e && e()
			
 
				+  });
			
 
				+  axiosPromiseCancel = [];
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 请求失败后的错误统一处理
			
 
				+ * @param {Number} status 请求失败的状态码
			
 
				+ */
			
 
				+
			
 
				+const errorHandle = (status, message) => {
			
 
				+  switch (status) {
			
 
				+    case 500:
			
 
				+      cancel()
			
 
				+      message.error('服务器连接失败，请联系管理员');
			
 
				+      break;
			
 
				+    default:
			
 
				+      return;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export default instance
			
 
				+
			
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -0,0 +1,114 @@
 
				+import axios from "axios";
			
 
				+import router from "../router";
			
 
				+import { message } from "ant-design-vue";
			
 
				+import tool from './tool';
			
 
				+
			
 
				+let axiosPromiseCancel = [];
			
 
				+const CancelToken = axios.CancelToken;
			
 
				+
			
 
				+let toast = null
			
 
				+
			
 
				+let instance = axios.create({
			
 
				+  timeout: 1000 * 60,
			
 
				+  // baseURL: 'http://192.168.1.15:82'
			
 
				+  baseURL: 'https://nk.ifarmcloud.com/api'
			
 
				+})
			
 
				+
			
 
				+// 请求拦截器
			
 
				+instance.interceptors.request.use(
			
 
				+  config => {
			
 
				+
			
 
				+    const token = tool.data.get('snowy_token')
			
 
				+    const orgId = tool.data.get('snowy_org_id')
			
 
				+    const account =tool.data.get('snowy_user_info')?.account
			
 
				+
			
 
				+    token && (config.headers.token = '' + token)
			
 
				+
			
 
				+    config.cancelToken = new CancelToken((cancel) => {
			
 
				+      axiosPromiseCancel.push(cancel);
			
 
				+    });
			
 
				+    let data = config.data || config.params || {}
			
 
				+
			
 
				+    if(account !== 'superAdmin') {
			
 
				+      orgId && ( data.orgId = orgId)
			
 
				+    }
			
 
				+
			
 
				+    return config
			
 
				+  },
			
 
				+  error => Promise.error(error)
			
 
				+)
			
 
				+
			
 
				+// 相应拦截器
			
 
				+instance.interceptors.response.use(
			
 
				+  response => {
			
 
				+    if(toast) {
			
 
				+      toast.hide();
			
 
				+    }
			
 
				+    toast = null;
			
 
				+    if(response.data.code === 200) {
			
 
				+      return response.data
			
 
				+    } else {
			
 
				+      errorHandle(response.data.code, response.data.msg)
			
 
				+    }
			
 
				+    // const code = response.data.code;
			
 
				+    // if(code === 10000) {
			
 
				+    //   return response.data
			
 
				+    // } else {
			
 
				+    //   errorHandle(code, response.data.message)
			
 
				+    // }
			
 
				+  },
			
 
				+  error => {
			
 
				+    errorHandle(error.response.status, err.response.msg)
			
 
				+    return Promise.reject(error);
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+/**
			
 
				+ *
			
 
				+ * 登录
			
 
				+ *
			
 
				+ * **/
			
 
				+const cancel = () => {
			
 
				+  axiosPromiseCancel.forEach(e=>{
			
 
				+    e && e()
			
 
				+  });
			
 
				+  axiosPromiseCancel = [];
			
 
				+}
			
 
				+
			
 
				+const toLogin = () => {
			
 
				+  router.replace({
			
 
				+    path: '/login',
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 请求失败后的错误统一处理
			
 
				+ * @param {Number} status 请求失败的状态码
			
 
				+ */
			
 
				+
			
 
				+const errorHandle = (status, age) => {
			
 
				+  switch (status) {
			
 
				+    case 401:
			
 
				+      toLogin();
			
 
				+      cancel()
			
 
				+      message.error('登录令牌不存在，请登录');
			
 
				+      break;
			
 
				+    case 403:
			
 
				+      toLogin();
			
 
				+      cancel()
			
 
				+      message.error('登录令牌到期，即将重新登录');
			
 
				+      tool.data.remove('snowy_token')
			
 
				+      tool.data.remove('snowy_org_id')
			
 
				+      tool.data.remove('snowy_user_info')
			
 
				+      break;
			
 
				+    case 500:
			
 
				+      message.error(age);
			
 
				+      break;
			
 
				+    default:
			
 
				+      return;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export default instance
			
 
				+
			
 
				+
			
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -0,0 +1,118 @@
 
				+/**
			
 
				+ * 获取环形坐标
			
 
				+ * 根据圆心计算圆形布局坐标点
			
 
				+ * 已知圆的标准方程 (x - a) ² + (y - b) ² = r ²
			
 
				+ * 通过相关公式可知当前圆的坐标 x , y为当前圆圆心，α为当前点角度，r为半径
			
 
				+ * 圆弧坐标公式： x1 = x + r * Math.cos( α * Math.PI / 180 )， y1 = y + r * Math.sin( α * Math.PI / 180)
			
 
				+ * @param {Number} x 圆心x坐标
			
 
				+ * @param {Number} y 圆心y坐标
			
 
				+ * @param {Number} r 圆半径
			
 
				+ * @param {Number} nodeNum 节点总的数量
			
 
				+ * @param {Number} nodeIndex 当前节点下标
			
 
				+ * @param {Number} changeAngle 改变初始角度，初始角度：x轴正方向为圆的起始角度0°，以顺时针旋转计算
			
 
				+ * @return {Object} {x_,y_} 目标点的坐标x_,y_
			
 
				+ */
			
 
				+
			
 
				+export function getCirclePosition({ x, y, r,  nodeNum, nodeIndex, changeAngle}){
			
 
				+  // 获取平分的角度
			
 
				+  let angle = 360 / nodeNum;
			
 
				+  // 获取当前角度值
			
 
				+  let currentAngle = angle * nodeIndex;
			
 
				+  // 调整这个角度，即可变换初始角度
			
 
				+  if(changeAngle){
			
 
				+    currentAngle = currentAngle + changeAngle;
			
 
				+  }
			
 
				+  // 圆上点的x_
			
 
				+  let x_ = x + r * Math.cos((currentAngle * Math.PI) / 180);
			
 
				+  // 圆上点的y_
			
 
				+  let y_ = y + r * Math.sin((currentAngle * Math.PI) / 180);
			
 
				+
			
 
				+  return { x_, y_ }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+// 拿到月份加日期
			
 
				+export function MonthDate (timestamp) {
			
 
				+  var date = new Date(timestamp)
			
 
				+  var M = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) + '-' : (date.getMonth() + 1) + '-'
			
 
				+  var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
			
 
				+  return  M + D
			
 
				+}
			
 
				+
			
 
				+// 使用es6的padStart()方法来补0
			
 
				+export function getYMDHMS (timestamp) {
			
 
				+  let time = new Date(timestamp)
			
 
				+  let year = time.getFullYear()
			
 
				+  const month = (time.getMonth() + 1).toString().padStart(2, '0')
			
 
				+  const date = (time.getDate()).toString().padStart(2, '0')
			
 
				+  const hours = (time.getHours()).toString().padStart(2, '0')
			
 
				+  const minute = (time.getMinutes()).toString().padStart(2, '0')
			
 
				+  const second = (time.getSeconds()).toString().padStart(2, '0')
			
 
				+
			
 
				+  return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			
 
				+}
			
 
				+
			
 
				+export function getHoursAndMinute(timestamp) {
			
 
				+  let time = new Date(timestamp);
			
 
				+  const hours = (time.getHours()).toString().padStart(2, '0')
			
 
				+  const minute = (time.getMinutes()).toString().padStart(2, '0')
			
 
				+  return hours + ':' + minute
			
 
				+}
			
 
				+
			
 
				+export function getHours (timestamp) {
			
 
				+  let time = new Date(timestamp)
			
 
				+  const hours = (time.getHours()).toString().padStart(2, '0')
			
 
				+  return hours
			
 
				+}
			
 
				+
			
 
				+// 时间格式化
			
 
				+export function timeDate(timestamp) {
			
 
				+  var date = new Date(timestamp)
			
 
				+  var Y = date.getFullYear() + '-'
			
 
				+  var M = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) + '-' : (date.getMonth() + 1) + '-'
			
 
				+  var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
			
 
				+  return Y + M + D
			
 
				+}
			
 
				+
			
 
				+
			
 
				+export function formattingData(arr, group_key) {
			
 
				+// 先定义一个空对象和空数组；
			
 
				+  let map = {};
			
 
				+  let res = [];
			
 
				+// 循环需要筛选的数组
			
 
				+  for (let i = 0; i < arr.length; i++) {
			
 
				+    let ai = arr[i];
			
 
				+// 将需要筛选的属性的值作为新对象的键，并且判断是否已经存在
			
 
				+    if (!map[ai[group_key]]) {
			
 
				+// 不存在的话就在map对象中创建一个属性的值作为键名，键值为空数组的新对象，并且把arr[i]放入
			
 
				+      map[ai[group_key]] = [ai];
			
 
				+    } else {
			
 
				+// 如果已经存在就直接把arr[i]放入
			
 
				+      map[ai[group_key]].push(ai);
			
 
				+    }
			
 
				+  }
			
 
				+// 循环后对map进行处理生成分组的数组
			
 
				+  Object.keys(map).forEach((key) => {
			
 
				+    res.push({
			
 
				+      [group_key]: key,
			
 
				+      list: map[key],
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  return res;
			
 
				+}
			
 
				+
			
 
				+export function throttle(fn,wait) {
			
 
				+  var timer = null;
			
 
				+  return function () {
			
 
				+    var context = this;
			
 
				+    var args = arguments;
			
 
				+    if (!timer) {
			
 
				+      timer = setTimeout(function () {
			
 
				+        fn.apply(context, args);
			
 
				+        timer = null;
			
 
				+      }, wait)
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
--- a/src/utils/smCrypto.js
+++ b/src/utils/smCrypto.js
@@ -0,0 +1,36 @@
 
				+/**
			
 
				+ *  Copyright [2022] [https://www.xiaonuo.vip]
			
 
				+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
			
 
				+ *	1.请不要删除和修改根目录下的LICENSE文件。
			
 
				+ *	2.请不要删除和修改Snowy源码头部的版权声明。
			
 
				+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
			
 
				+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
			
 
				+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
			
 
				+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
			
 
				+ */
			
 
				+/**
			
 
				+ * 加解密的工具类
			
 
				+ * 使用：https://github.com/JuneAndGreen/sm-crypto
			
 
				+ *
			
 
				+ * @author yubaoshan
			
 
				+ */
			
 
				+import smCrypto from 'sm-crypto'
			
 
				+
			
 
				+const sm2 = smCrypto.sm2
			
 
				+const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
			
 
				+const publicKey =
			
 
				+	'04298364ec840088475eae92a591e01284d1abefcda348b47eb324bb521bb03b0b2a5bc393f6b71dabb8f15c99a0050818b56b23f31743b93df9cf8948f15ddb54'
			
 
				+
			
 
				+/**
			
 
				+ * 国密加解密工具类
			
 
				+ */
			
 
				+export default {
			
 
				+	// SM2加密
			
 
				+	doSm2Encrypt(msgString) {
			
 
				+		return sm2.doEncrypt(msgString, publicKey, cipherMode)
			
 
				+	},
			
 
				+	// SM2数组加密
			
 
				+	doSm2ArrayEncrypt(msgString) {
			
 
				+		return sm2.doEncrypt(msgString, publicKey, cipherMode)
			
 
				+	}
			
 
				+}
			
--- a/src/utils/tool.js
+++ b/src/utils/tool.js
@@ -0,0 +1,161 @@
 
				+/**
			
 
				+ *  Copyright [2022] [https://www.xiaonuo.vip]
			
 
				+ *	Snowy采用APACHE LICENSE 2.0开源协议，您在使用过程中，需要注意以下几点：
			
 
				+ *	1.请不要删除和修改根目录下的LICENSE文件。
			
 
				+ *	2.请不要删除和修改Snowy源码头部的版权声明。
			
 
				+ *	3.本项目代码可免费商业使用，商业使用请保留源码和相关描述文件的项目出处，作者声明等。
			
 
				+ *	4.分发源码时候，请注明软件出处 https://www.xiaonuo.vip
			
 
				+ *	5.不可二次分发开源参与同类竞品，如有想法可联系团队xiaonuobase@qq.com商议合作。
			
 
				+ *	6.若您的项目无法满足以上几点，需要更多功能代码，获取Snowy商业授权许可，请在官网购买授权，地址为 https://www.xiaonuo.vip
			
 
				+ */
			
 
				+/*
			
 
				+ * @Descripttion: 工具集
			
 
				+ * @version: 1.1
			
 
				+ * @LastEditors: yubaoshan
			
 
				+ * @LastEditTime: 2022年4月19日10:58:41
			
 
				+ */
			
 
				+const tool = {}
			
 
				+
			
 
				+// localStorage
			
 
				+tool.data = {
			
 
				+  set(table, settings) {
			
 
				+    const _set = JSON.stringify(settings)
			
 
				+    return localStorage.setItem(table, _set)
			
 
				+  },
			
 
				+  get(table) {
			
 
				+    let data = localStorage.getItem(table)
			
 
				+    try {
			
 
				+      data = JSON.parse(data)
			
 
				+    } catch (err) {
			
 
				+      return null
			
 
				+    }
			
 
				+    return data
			
 
				+  },
			
 
				+  remove(table) {
			
 
				+    return localStorage.removeItem(table)
			
 
				+  },
			
 
				+
			
 
				+  clear() {
			
 
				+    return localStorage.clear()
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// sessionStorage
			
 
				+tool.session = {
			
 
				+  set(table, settings) {
			
 
				+    const _set = JSON.stringify(settings)
			
 
				+    return sessionStorage.setItem(table, _set)
			
 
				+  },
			
 
				+  get(table) {
			
 
				+    let data = sessionStorage.getItem(table)
			
 
				+    try {
			
 
				+      data = JSON.parse(data)
			
 
				+    } catch (err) {
			
 
				+      return null
			
 
				+    }
			
 
				+    return data
			
 
				+  },
			
 
				+  remove(table) {
			
 
				+    return sessionStorage.removeItem(table)
			
 
				+  },
			
 
				+  clear() {
			
 
				+    return sessionStorage.clear()
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// 千分符
			
 
				+tool.groupSeparator = (num) => {
			
 
				+  num = `${num}`
			
 
				+  if (!num.includes('.')) num += '.'
			
 
				+
			
 
				+  return num
			
 
				+    .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
			
 
				+      return `${$1},`
			
 
				+    })
			
 
				+    .replace(/\.$/, '')
			
 
				+}
			
 
				+
			
 
				+// 获取所有字典数组
			
 
				+tool.dictDataAll = () => {
			
 
				+  return tool.data.get('DICT_TYPE_TREE_DATA')
			
 
				+}
			
 
				+
			
 
				+// 字典翻译方法，界面插槽使用方法 {{ $TOOL.dictType('sex', record.sex) }}
			
 
				+tool.dictTypeData = (dictValue, value) => {
			
 
				+  const dictTypeTree = tool.dictDataAll()
			
 
				+  if (!dictTypeTree) {
			
 
				+    return '需重新登录'
			
 
				+  }
			
 
				+  const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
			
 
				+  if (!tree) {
			
 
				+    return '无此字典'
			
 
				+  }
			
 
				+  const children = tree.children
			
 
				+  const dict = children.find((item) => item.dictValue === value)
			
 
				+  return dict ? dict.dictLabel : '无此字典项'
			
 
				+}
			
 
				+
			
 
				+// 获取某个code下字典的列表，多用于字典下拉框
			
 
				+tool.dictTypeList = (dictValue) => {
			
 
				+  const dictTypeTree = tool.dictDataAll()
			
 
				+  if (!dictTypeTree) {
			
 
				+    return []
			
 
				+  }
			
 
				+  const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
			
 
				+  if (tree && tree.children) {
			
 
				+    return tree.children
			
 
				+  }
			
 
				+  return []
			
 
				+}
			
 
				+
			
 
				+// 获取某个code下字典的列表，基于dictTypeList 改进，保留老的，逐步替换
			
 
				+tool.dictList = (dictValue) => {
			
 
				+  const dictTypeTree = tool.dictDataAll()
			
 
				+  if (!dictTypeTree) {
			
 
				+    return []
			
 
				+  }
			
 
				+  const tree = dictTypeTree.find((item) => item.dictValue === dictValue)
			
 
				+  if (tree) {
			
 
				+    return tree.children.map((item) => {
			
 
				+      return {
			
 
				+        value: item['dictValue'],
			
 
				+        label: item['name']
			
 
				+      }
			
 
				+    })
			
 
				+  }
			
 
				+  return []
			
 
				+}
			
 
				+
			
 
				+// 树形翻译 需要指定最顶级的 parentValue  和当级的value
			
 
				+tool.translateTree = (parentValue, value) => {
			
 
				+  const tree = tool.dictDataAll().find((item) => item.dictValue === parentValue)
			
 
				+  const targetNode = findNodeByValue(tree, value)
			
 
				+  return targetNode ? targetNode.dictLabel : ''
			
 
				+}
			
 
				+const findNodeByValue = (node, value) => {
			
 
				+  if (node.dictValue === value) {
			
 
				+    return node
			
 
				+  }
			
 
				+  if (node.children) {
			
 
				+    for (let i = 0; i < node.children.length; i++) {
			
 
				+      const result = findNodeByValue(node.children[i], value)
			
 
				+      if (result) {
			
 
				+        return result
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  return null
			
 
				+}
			
 
				+
			
 
				+// 生成UUID
			
 
				+tool.snowyUuid = () => {
			
 
				+  let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
			
 
				+    let r = (Math.random() * 16) | 0,
			
 
				+      v = c === 'x' ? r : (r & 0x3) | 0x8
			
 
				+    return v.toString(16)
			
 
				+  })
			
 
				+  // 首字符转换成字母
			
 
				+  return 'xn' + uuid.slice(2)
			
 
				+}
			
 
				+
			
 
				+export default tool
			
--- a/src/views/Ai/Ai.vue
+++ b/src/views/Ai/Ai.vue
@@ -0,0 +1,481 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <div class="home_flex">
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInLeft"
			
 
				+        leave-active-class="animate__animated animate__fadeOutLeft"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="人员行为分析">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_scroll">
			
 
				+            <vue3-seamless-scroll
			
 
				+              v-if="personList.length > 0"
			
 
				+              :hover="true"
			
 
				+              :step="0.2"
			
 
				+              :hover-stop="true"
			
 
				+              :list="personList"
			
 
				+              class="warn_scroll">
			
 
				+              <div class="chart_flex" v-for="(item, i) in personList">
			
 
				+                <div class="chart_icon" v-viewer>
			
 
				+                  <img class="img_url" :src="item.carImgUrl" alt="">
			
 
				+                </div>
			
 
				+                <div class="chart_text">
			
 
				+                  <div>巡检时间：{{item.capTime}}</div>
			
 
				+                  <div class="flex_text">
			
 
				+                    <div>姓名：{{item.name}}</div>
			
 
				+                    <div>人员行为：{{item.personType}}</div>
			
 
				+                  </div>
			
 
				+                  <div class="flex_text">
			
 
				+                    <div>巡检位置：{{item.devName}}</div>
			
 
				+                    <div>巡检结果：{{item.capResult}}</div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </vue3-seamless-scroll>
			
 
				+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInLeft"
			
 
				+        leave-active-class="animate__animated animate__fadeOutLeft"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="车辆识别">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_scroll">
			
 
				+            <vue3-seamless-scroll
			
 
				+              v-if="carList.length > 0"
			
 
				+              :hover="true"
			
 
				+              :step="0.2"
			
 
				+              :hover-stop="true"
			
 
				+              :list="carList"
			
 
				+              class="warn_scroll">
			
 
				+              <div class="chart_flex" v-for="item in carList">
			
 
				+                <div class="chart_icon" v-viewer>
			
 
				+                  <img v-if="item.carImgUrl" class="img_url" :src="item.carImgUrl" alt="">
			
 
				+                </div>
			
 
				+                <div class="chart_text">
			
 
				+                  <div>巡检时间：{{item.capTime}}</div>
			
 
				+                  <div class="flex_text">
			
 
				+                    <div>车牌号：{{item.carNum}}</div>
			
 
				+                    <div>车牌颜色：黑色</div>
			
 
				+                  </div>
			
 
				+                  <div class="flex_text">
			
 
				+                    <div>巡检位置：{{item.devName}}</div>
			
 
				+                    <div>巡检结果：{{item.capResult}}</div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </vue3-seamless-scroll>
			
 
				+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInLeft"
			
 
				+        leave-active-class="animate__animated animate__fadeOutLeft"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="镜头脏污">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_scroll">
			
 
				+            <vue3-seamless-scroll
			
 
				+              v-if="dirtyList.length > 0"
			
 
				+              :hover="true"
			
 
				+              :step="0.2"
			
 
				+              :hover-stop="true"
			
 
				+              :list="dirtyList"
			
 
				+              class="warn_scroll">
			
 
				+              <div class="chart_flex" v-for="(item, i) in dirtyList" :key="i">
			
 
				+                <div class="chart_icon" v-viewer>
			
 
				+                  <img v-if="item.imgUrl" class="img_url" :src="item.imgUrl" alt="">
			
 
				+                </div>
			
 
				+              <div class="chart_text">
			
 
				+                <div>巡检时间：{{item.capTime}}</div>
			
 
				+                <div>巡检位置：{{item.devName}}</div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            </vue3-seamless-scroll>
			
 
				+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+    </div>
			
 
				+    <div class="home_center">
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInDown"
			
 
				+        leave-active-class="animate__animated animate__fadeOutUp"
			
 
				+      >
			
 
				+        <x-tabs v-if="show"></x-tabs>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__zoomIn"
			
 
				+        leave-active-class="animate__animated animate__zoomOut"
			
 
				+      >
			
 
				+        <div v-if="url" class="video">
			
 
				+          <video v-if="url" autoplay muted :src="url"></video>
			
 
				+        </div>
			
 
				+      </transition>
			
 
				+      <div class="picture"></div>
			
 
				+    </div>
			
 
				+    <div class="home_flex">
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInRight"
			
 
				+        leave-active-class="animate__animated animate__fadeOutRight"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="周界巡检">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_scroll">
			
 
				+            <vue3-seamless-scroll
			
 
				+              v-if="speciesList.length > 0"
			
 
				+              :hover="true"
			
 
				+              :step="0.2"
			
 
				+              :hover-stop="true"
			
 
				+              :list="speciesList"
			
 
				+              class="warn_scroll">
			
 
				+              <div class="chart_flex" v-for="item in speciesList">
			
 
				+                <div class="chart_icon" v-viewer>
			
 
				+                  <img v-if="item.imgUrl" class="img_url" :src="item.imgUrl" alt="">
			
 
				+                </div>
			
 
				+              <div class="chart_text">
			
 
				+                <div>巡检时间：{{item.capTime}}</div>
			
 
				+                <div>巡检位置：{{item.devName}}</div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            </vue3-seamless-scroll>
			
 
				+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" v-else />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInRight"
			
 
				+        leave-active-class="animate__animated animate__fadeOutRight"
			
 
				+      >
			
 
				+       <x-box v-if="show" name="视频监控" :height="600">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_scroll">
			
 
				+            <div class="monit" v-for="(items, i) in list" :key="items.id">
			
 
				+              <div class="monit_parent" @click="clickParent(i)">
			
 
				+                <div v-if="items.isShow">
			
 
				+                  <caret-down-outlined style="color: #00F3FF" />
			
 
				+                </div>
			
 
				+                <div v-else>
			
 
				+                  <caret-right-outlined style="color: #00F3FF" />
			
 
				+                </div>
			
 
				+                <div class="monit_name">{{items.name}}</div>
			
 
				+              </div>
			
 
				+              <div v-if="items.isShow" class="monit_children">
			
 
				+                <div v-for="item in items.children" :class="['monit_children_item', item.isShow ? 'monit_children_select' : '']" @click.stop="clickChild(item)">
			
 
				+                  <div>{{item.name}}</div>
			
 
				+                  <div v-if="item.isShow" class="look">查看中</div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "Ai"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import { CaretRightOutlined, CaretDownOutlined } from "@ant-design/icons-vue";
			
 
				+  import { getAiPerson, getAiCar, getAiSpecies, getAiDirty } from "../../utils/api";
			
 
				+  import {onMounted, ref} from 'vue';
			
 
				+  import XBox from "../../components/XBox.vue";
			
 
				+  import XTabs from '../../components/XTabs.vue';
			
 
				+  import { Empty } from 'ant-design-vue';
			
 
				+
			
 
				+  const personList = ref([]);
			
 
				+  const initPerson = () => {
			
 
				+    let params = {
			
 
				+      current: 1,
			
 
				+      pageSize: 10
			
 
				+    }
			
 
				+    getAiPerson(params).then(res => {
			
 
				+      personList.value = res.data.records
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const carList = ref([])
			
 
				+  const initCar = () => {
			
 
				+    let params = {
			
 
				+      current: 1,
			
 
				+      pageSize: 10
			
 
				+    }
			
 
				+    getAiCar(params).then(res => {
			
 
				+      carList.value = res.data.records
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const speciesList = ref([])
			
 
				+  const initSpecies = () => {
			
 
				+    let params = {
			
 
				+      current: 1,
			
 
				+      pageSize: 10
			
 
				+    }
			
 
				+    getAiSpecies(params).then(res => {
			
 
				+      speciesList.value = res.data.records
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const dirtyList = ref([])
			
 
				+  const initDirty = () => {
			
 
				+    let params = {
			
 
				+      current: 1,
			
 
				+      size: 10
			
 
				+    }
			
 
				+    getAiDirty(params).then(res => {
			
 
				+      dirtyList.value = res.data.records
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const list = ref([
			
 
				+    {
			
 
				+      name: '育肥一舍',
			
 
				+      id: 1,
			
 
				+      isShow: false,
			
 
				+      children: [
			
 
				+        {
			
 
				+          name: '育肥一舍一单元',
			
 
				+          id: 11,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+        {
			
 
				+          name: '育肥一舍二单元',
			
 
				+          id: 12,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+        {
			
 
				+          name: '育肥一舍三单元',
			
 
				+          id: 13,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+        {
			
 
				+          name: '育肥一舍四单元',
			
 
				+          id: 14,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+      ]
			
 
				+    },
			
 
				+    {
			
 
				+      name: '育肥二舍',
			
 
				+      id: 2,
			
 
				+      isShow: false,
			
 
				+      children: [
			
 
				+        {
			
 
				+          name: '育肥一舍一单元',
			
 
				+          id: 21,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+        {
			
 
				+          name: '育肥一舍二单元',
			
 
				+          id: 22,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+        {
			
 
				+          name: '育肥一舍三单元',
			
 
				+          id: 23,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+        {
			
 
				+          name: '育肥一舍四单元',
			
 
				+          id: 24,
			
 
				+          isShow: false
			
 
				+        },
			
 
				+      ]
			
 
				+    },
			
 
				+  ])
			
 
				+
			
 
				+  const clickParent = (i) => {
			
 
				+    list.value[i].isShow = !list.value[i].isShow;
			
 
				+  }
			
 
				+
			
 
				+  const url = ref('')
			
 
				+  const clickChild = (n) => {
			
 
				+    url.value = 'http://119.3.93.18/video/qingshan/sample.mp4'
			
 
				+    list.value.forEach(items => {
			
 
				+      items.children.forEach(item => {
			
 
				+        if(item.id === n.id) {
			
 
				+          item.isShow = true
			
 
				+        } else {
			
 
				+          item.isShow = false
			
 
				+        }
			
 
				+      })
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const show = ref(false)
			
 
				+  onMounted(() => {
			
 
				+    initPerson()
			
 
				+    initCar()
			
 
				+    initSpecies()
			
 
				+    initDirty()
			
 
				+    show.value = true
			
 
				+  })
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.home {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 0 25px;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.home_flex {
			
 
				+  width: 480px;
			
 
				+  height: 100%;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.home_center {
			
 
				+  width: 840px;
			
 
				+  height: 100%;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.chart_content {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 14px;
			
 
				+}
			
 
				+.chart_scroll {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+.chart_scroll::-webkit-scrollbar {
			
 
				+  display: none;
			
 
				+}
			
 
				+.chart_flex {
			
 
				+  width: 100%;
			
 
				+  height: 100px;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  margin-bottom: 6px;
			
 
				+}
			
 
				+.chart_icon {
			
 
				+  width: 100px;
			
 
				+  height: 100px;
			
 
				+  box-sizing: border-box;
			
 
				+  border: 1px solid #018AFE;
			
 
				+  background: #00325B;
			
 
				+  overflow: hidden;
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+.chart_text {
			
 
				+  margin-left: 6px;
			
 
				+  flex: 1;
			
 
				+  height: 100%;
			
 
				+  box-sizing: border-box;
			
 
				+  background: #002F50;
			
 
				+  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
			
 
				+  padding: 5px 10px;
			
 
				+  color: #BBD6FF;
			
 
				+  cursor: pointer;
			
 
				+  border: 1px solid #00668D;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.flex_text {
			
 
				+  width: 100%;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+.monit {
			
 
				+  margin-bottom: 2px;
			
 
				+}
			
 
				+.monit_parent {
			
 
				+  width: 100%;
			
 
				+  height: 40px;
			
 
				+  background: #002F50;
			
 
				+  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
			
 
				+  padding: 5px 10px;
			
 
				+  color: #BBD6FF;
			
 
				+  cursor: pointer;
			
 
				+  border: 1px solid #00668D;
			
 
				+  display: flex;
			
 
				+  /*justify-content: space-between;*/
			
 
				+  align-items: center;
			
 
				+}
			
 
				+.monit_name {
			
 
				+  margin-left: 20px;
			
 
				+}
			
 
				+.monit_children {
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 10px 0;
			
 
				+  background: #001836;
			
 
				+}
			
 
				+.monit_children_item {
			
 
				+  width: 100%;
			
 
				+  height: 40px;
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 0 45px;
			
 
				+  cursor: pointer;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+.monit_children_select {
			
 
				+  background: #00325B;
			
 
				+}
			
 
				+.look {
			
 
				+  position: relative;
			
 
				+  color: #00F3FF
			
 
				+}
			
 
				+.look:before {
			
 
				+  content: '';
			
 
				+  width: 5px;
			
 
				+  height: 5px;
			
 
				+  background: #00F3FF;
			
 
				+  border-radius: 50%;
			
 
				+  position: absolute;
			
 
				+  top: 8px;
			
 
				+  left: -12px
			
 
				+}
			
 
				+.warn_scroll {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+.warn_scroll::-webkit-scrollbar {
			
 
				+  display: none;
			
 
				+}
			
 
				+.img_url {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  object-fit: cover;
			
 
				+}
			
 
				+.video {
			
 
				+  width: 100%;
			
 
				+  height: 500px;
			
 
				+}
			
 
				+.picture {
			
 
				+  width: 100%;
			
 
				+  height: 200px;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/Energy/Energy.vue
+++ b/src/views/Energy/Energy.vue
@@ -0,0 +1,375 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <div class="home_flex">
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInLeft"
			
 
				+        leave-active-class="animate__animated animate__fadeOutLeft"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="近七天用水监测(全场)">
			
 
				+          <div class="chart_content">
			
 
				+            <chart-water v-if="waterList.length > 0" :id="0" :list="waterList"></chart-water>
			
 
				+            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
			
 
				+          </div>
			
 
				+        </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInLeft"
			
 
				+        leave-active-class="animate__animated animate__fadeOutLeft"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="近七天用电监测(全场)">
			
 
				+          <div class="chart_content">
			
 
				+            <chart-ele v-if="eleList.length > 0" :id="0" :list="eleList"></chart-ele>
			
 
				+            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
			
 
				+          </div>
			
 
				+        </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInLeft"
			
 
				+        leave-active-class="animate__animated animate__fadeOutLeft"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="近七天用料监测(全场)">
			
 
				+          <div class="chart_content">
			
 
				+            <chart-feed v-if="feedList.length > 0" :id="0" :list="feedList"></chart-feed>
			
 
				+            <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
			
 
				+          </div>
			
 
				+        </x-box>
			
 
				+      </transition>
			
 
				+    </div>
			
 
				+    <div class="home_center">
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInDown"
			
 
				+        leave-active-class="animate__animated animate__fadeOutUp"
			
 
				+      >
			
 
				+        <x-tabs v-if="show"></x-tabs>
			
 
				+      </transition>
			
 
				+    </div>
			
 
				+    <div class="home_flex">
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInRight"
			
 
				+        leave-active-class="animate__animated animate__fadeOutRight"
			
 
				+      >
			
 
				+       <x-box v-if="show" name="本月用水TOP5">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_flex">
			
 
				+            <div class="chart_box" v-for="(item, i) in waterRank" :key="i">
			
 
				+              <div :class="['icon_box', 'rank' + (i+1)]"></div>
			
 
				+              <div class="num_box">
			
 
				+                <div class="num_name">{{item.name}}</div>
			
 
				+                <div class="num_text">{{item.value}}吨</div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInRight"
			
 
				+        leave-active-class="animate__animated animate__fadeOutRight"
			
 
				+      >
			
 
				+        <x-box v-if="show" name="本月用电TOP5">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="chart_flex">
			
 
				+            <div class="chart_box" v-for="(item, i) in eleRank" :key="i">
			
 
				+              <div :class="['icon_box', 'rank' + (i+1)]"></div>
			
 
				+              <div class="num_box">
			
 
				+                <div class="num_name">{{item.name}}</div>
			
 
				+                <div class="num_text">{{item.value}}kw·h</div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+      <transition
			
 
				+        name="custom-up"
			
 
				+        enter-active-class="animate__animated animate__fadeInRight"
			
 
				+        leave-active-class="animate__animated animate__fadeOutRight"
			
 
				+      >
			
 
				+        <x-box v-show="show" name="能耗预警">
			
 
				+        <div class="chart_content">
			
 
				+          <div class="warn_scroll" ref="scroll">
			
 
				+            <template v-if="warnList.length > 0">
			
 
				+              <div class="warn_item" v-for="(item, i) in warnList" :key="i">
			
 
				+                <div class="warn_icon"></div>
			
 
				+                <div class="warn_text">{{item.warningTime}} {{item.buildName}} {{item.warningContent}}</div>
			
 
				+              </div>
			
 
				+            </template>
			
 
				+            <template v-else>
			
 
				+              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据" />
			
 
				+            </template>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </x-box>
			
 
				+      </transition>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "Energy"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+  import { Empty } from "ant-design-vue";
			
 
				+  import {ref, onMounted, getCurrentInstance, onBeforeUnmount} from 'vue'
			
 
				+  import {getWaterRank, getSevenWater, getSevenEle, getEleRank, getWarnList, getFeedSeven} from "../../utils/api";
			
 
				+  import XBox from "../../components/XBox.vue";
			
 
				+  import XTabs from '../../components/XTabs.vue';
			
 
				+  import ChartWater from "./charts/ChartWater.vue";
			
 
				+  import ChartEle from "./charts/ChartEle.vue";
			
 
				+  import ChartFeed from "./charts/ChartFeed.vue";
			
 
				+  import { throttle } from "../../utils";
			
 
				+
			
 
				+  const { proxy } = getCurrentInstance()
			
 
				+
			
 
				+  const waterList = ref([
			
 
				+  ])
			
 
				+
			
 
				+  const eleList = ref([
			
 
				+  ])
			
 
				+
			
 
				+  const initList = () => {
			
 
				+    let params = {
			
 
				+      type: 4
			
 
				+    }
			
 
				+    getSevenWater(params).then(res => {
			
 
				+      let arr = []
			
 
				+      if(res.data.list.length > 0) {
			
 
				+        res.data.list.forEach(item => {
			
 
				+          arr.push({ date: proxy.$moment(item.createTime).format('MM-DD'), value: item.waterValue })
			
 
				+        })
			
 
				+      }
			
 
				+      waterList.value = arr;
			
 
				+    })
			
 
				+    getSevenEle(params).then(res => {
			
 
				+      let arr = []
			
 
				+      if(res.data.list.length > 0) {
			
 
				+        res.data.list.forEach(item => {
			
 
				+          arr.push({ date: proxy.$moment(item.createTime).format('MM-DD'), value: item.electricityValue })
			
 
				+        })
			
 
				+      }
			
 
				+      eleList.value = arr;
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  const waterRank = ref([])
			
 
				+  const eleRank = ref([])
			
 
				+
			
 
				+  const initRank = () => {
			
 
				+    let params = {
			
 
				+      type: 2
			
 
				+    }
			
 
				+    getWaterRank(params).then(res => {
			
 
				+      let arr = [];
			
 
				+      if(res.data.length >0) {
			
 
				+        res.data.forEach((item, i) => {
			
 
				+          if(i< 5) {
			
 
				+            arr.push({ name: item.location, value: item.energyWaterValue })
			
 
				+          }
			
 
				+        })
			
 
				+      }
			
 
				+      waterRank.value = arr;
			
 
				+    })
			
 
				+    getEleRank(params).then(res => {
			
 
				+      let arr = [];
			
 
				+      if(res.data.length >0) {
			
 
				+        res.data.forEach((item, i) => {
			
 
				+          if(i< 5) {
			
 
				+            arr.push({ name: item.location, value: item.energyElectricityValue })
			
 
				+          }
			
 
				+        })
			
 
				+      }
			
 
				+      eleRank.value = arr;
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const scroll = ref()
			
 
				+  const warnList = ref([])
			
 
				+  const current = ref(1)
			
 
				+  const size = ref(10)
			
 
				+  const fished = ref(false)
			
 
				+  const initWarn = () => {
			
 
				+    if(fished.value) {
			
 
				+      return
			
 
				+    } else {
			
 
				+      let params = {
			
 
				+        current: current.value,
			
 
				+        size: size.value,
			
 
				+        type: 2
			
 
				+      }
			
 
				+      getWarnList(params).then(res => {
			
 
				+        warnList.value = warnList.value.concat(res.data.records);
			
 
				+        if(res.data.records.length < size.value) {
			
 
				+          fished.value = true
			
 
				+        }
			
 
				+        current.value++
			
 
				+      })
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  const handlerScroll = throttle(() => {
			
 
				+    let clientHeight = scroll.value.clientHeight;
			
 
				+    let scrollHeight = scroll.value.scrollHeight;
			
 
				+    let scrollTop = scroll.value.scrollTop;
			
 
				+    if(clientHeight + scrollTop >= scrollHeight) {
			
 
				+      initWarn()
			
 
				+    }
			
 
				+  }, 100)
			
 
				+
			
 
				+  const feedList = ref([])
			
 
				+  const initFeed = () => {
			
 
				+    getFeedSeven({}).then(res => {
			
 
				+      let arr = []
			
 
				+      res.data.forEach(item => {
			
 
				+        arr.push({ date: proxy.$moment(item.createDate).format('MM-DD'), value: item.value })
			
 
				+      })
			
 
				+      feedList.value = arr
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+  const show = ref(false)
			
 
				+
			
 
				+  onMounted(() => {
			
 
				+    scroll.value.addEventListener('scroll', handlerScroll)
			
 
				+    initList()
			
 
				+    initRank()
			
 
				+    initWarn()
			
 
				+    initFeed()
			
 
				+    show.value = true
			
 
				+  })
			
 
				+
			
 
				+  onBeforeUnmount(() => {
			
 
				+    scroll.value.removeEventListener('scroll', handlerScroll)
			
 
				+  })
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.home {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 0 25px;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.home_flex {
			
 
				+  width: 480px;
			
 
				+  height: 100%;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.home_center {
			
 
				+  width: 840px;
			
 
				+  height: 100%;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+}
			
 
				+.chart_content {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 14px;
			
 
				+}
			
 
				+.chart_flex {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+.chart_box {
			
 
				+  width: 100%;
			
 
				+  height: 34px;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  align-items: center;
			
 
				+}
			
 
				+.icon_box {
			
 
				+  width: 32px;
			
 
				+  height: 34px;
			
 
				+}
			
 
				+.num_box {
			
 
				+  margin-left: 10px;
			
 
				+  flex: 1;
			
 
				+  height: 100%;
			
 
				+  line-height: 34px;
			
 
				+  display: flex;
			
 
				+  justify-content: space-between;
			
 
				+  background: rgba(0, 30, 61, .68);
			
 
				+  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 0 10px;
			
 
				+  color: #BBD6FF;
			
 
				+  cursor: pointer;
			
 
				+  border: 1px solid #00668D;
			
 
				+}
			
 
				+.rank1 {
			
 
				+  background: url("../../assets/tabs/top1.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+.rank2 {
			
 
				+  background: url("../../assets/tabs/top2.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+.rank3 {
			
 
				+  background: url("../../assets/tabs/top3.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+.rank4 {
			
 
				+  background: url("../../assets/tabs/top4.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+.rank5 {
			
 
				+  background: url("../../assets/tabs/top5.png") no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+
			
 
				+.warn_scroll {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+.warn_scroll::-webkit-scrollbar {
			
 
				+  display: none;
			
 
				+}
			
 
				+.warn_item {
			
 
				+  width: 100%;
			
 
				+  height: 40px;
			
 
				+  line-height: 40px;
			
 
				+  background: rgba(0, 30, 61, .68);
			
 
				+  box-shadow: inset 0 0 30px rgba(0, 90, 137, .5);
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  padding: 0 10px;
			
 
				+  color: #BBD6FF;
			
 
				+  cursor: pointer;
			
 
				+  border: 1px solid #00668D;
			
 
				+  margin-bottom: 6px;
			
 
				+}
			
 
				+.warn_icon {
			
 
				+  width: 24px;
			
 
				+  height: 24px;
			
 
				+  background: url('../../assets/images/warnOrgin.png') no-repeat;
			
 
				+  background-size: 100% 100%;
			
 
				+  margin-right: 10px;
			
 
				+}
			
 
				+.warn_text {
			
 
				+  flex: 1;
			
 
				+  white-space: nowrap;         /* 防止文本换行 */
			
 
				+  overflow: hidden;            /* 隐藏溢出的文本 */
			
 
				+  text-overflow: ellipsis;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/Energy/charts/ChartEle.vue
+++ b/src/views/Energy/charts/ChartEle.vue
@@ -0,0 +1,184 @@
 
				+<template>
			
 
				+  <div :id="'chart-ele' + id" style="width: 100%; height: 100%"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ChartEle"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+import { onMounted, getCurrentInstance, onBeforeUnmount, watch } from 'vue';
			
 
				+import * as echarts from 'echarts'
			
 
				+
			
 
				+const { proxy } = getCurrentInstance()
			
 
				+
			
 
				+const props = defineProps({
			
 
				+  id: {
			
 
				+    type: Number,
			
 
				+    default: () => 0
			
 
				+  },
			
 
				+  list: {
			
 
				+    type: Array,
			
 
				+    default: () => []
			
 
				+  },
			
 
				+})
			
 
				+
			
 
				+let myChart = null;
			
 
				+
			
 
				+const init = () => {
			
 
				+  let arr = [];
			
 
				+  let data = [];
			
 
				+  if(props.list.length > 0) {
			
 
				+    props.list.forEach(item => {
			
 
				+      arr.push(item.date)
			
 
				+      data.push(item.value)
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  let options = {
			
 
				+    tooltip: {
			
 
				+      trigger: "axis",
			
 
				+    },
			
 
				+    legend: {
			
 
				+      left: 'center',
			
 
				+      top: 'top',
			
 
				+      textStyle: {
			
 
				+        color: '#fff'
			
 
				+      }
			
 
				+    },
			
 
				+    grid: {
			
 
				+      left: '3%',
			
 
				+      top: '15%',
			
 
				+      right: '3%',
			
 
				+      bottom: '5%',
			
 
				+      containLabel: true
			
 
				+    },
			
 
				+    xAxis: {
			
 
				+      type: 'category',
			
 
				+      boundaryGap: true,
			
 
				+      data: arr,
			
 
				+      axisLine: {
			
 
				+        show: true,
			
 
				+        lineStyle: {
			
 
				+          color: "#fff",
			
 
				+        }
			
 
				+      },
			
 
				+      axisLabel: {
			
 
				+        color: '#fff'
			
 
				+      }
			
 
				+    },
			
 
				+    yAxis: [
			
 
				+      {
			
 
				+        type: 'value',
			
 
				+        name: '单位:kw·h',
			
 
				+        nameTextStyle:{//y轴上方单位的颜色
			
 
				+          color:'#fff',
			
 
				+          padding: [0, 0, 0, 15]
			
 
				+        },
			
 
				+        boundaryGap: [0, 0.1],
			
 
				+        axisLine: {       //y轴
			
 
				+          show: true,
			
 
				+          color: '#fff'
			
 
				+        },
			
 
				+        axisTick: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+        splitLine: {
			
 
				+          show: true,
			
 
				+          lineStyle:{
			
 
				+            type:'dashed',//虚线
			
 
				+            color: '#293563'
			
 
				+          },
			
 
				+        },
			
 
				+        axisLabel: {
			
 
				+          color: '#fff',
			
 
				+          textStyle: {
			
 
				+            color: '#fff',//字体颜色
			
 
				+            fontSize: 12 //字体大小
			
 
				+          }
			
 
				+        },
			
 
				+        splitArea: {
			
 
				+          show: true,
			
 
				+          areaStyle: {
			
 
				+            color: '#1D2555'
			
 
				+          }
			
 
				+        }
			
 
				+      },
			
 
				+    ],
			
 
				+    series: [
			
 
				+      {
			
 
				+        name: '用电量',
			
 
				+        type: 'bar',
			
 
				+        smooth: true,
			
 
				+        showAllSymbol: true,
			
 
				+        data: data,
			
 
				+        barWidth: 20,
			
 
				+        tooltip: {
			
 
				+          valueFormatter: function (value) {
			
 
				+            return value + ` kw·h`;
			
 
				+          }
			
 
				+        },
			
 
				+        itemStyle: {
			
 
				+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+            { offset: 0, color: '#2FFF60'},
			
 
				+            { offset: 1, color:  'rgba(47, 255, 100, .4)' }
			
 
				+          ])
			
 
				+        },
			
 
				+        // lineStyle: {
			
 
				+        //   width: 5,  //阴影宽度
			
 
				+        //   shadowColor: 'rgba(0, 156, 255, .4)', //阴影颜色
			
 
				+        //   shadowBlur: 6, //阴影模糊系数
			
 
				+        // },
			
 
				+      },
			
 
				+      {
			
 
				+        name: '用电量',
			
 
				+        type: 'line',
			
 
				+        smooth: true,
			
 
				+        showAllSymbol: true,
			
 
				+        data: data,
			
 
				+        barWidth: 20,
			
 
				+        tooltip: {
			
 
				+          show: false
			
 
				+        },
			
 
				+        itemStyle: {
			
 
				+          normal: {
			
 
				+            color: '#2FFF60'
			
 
				+          }
			
 
				+        },
			
 
				+        lineStyle: {
			
 
				+          width: 5,  //阴影宽度
			
 
				+          shadowColor: 'rgba(47, 255, 100, .4)', //阴影颜色
			
 
				+          shadowBlur: 6, //阴影模糊系数
			
 
				+        },
			
 
				+      },
			
 
				+    ],
			
 
				+  }
			
 
				+  myChart.setOption(options)
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  myChart = proxy.$echarts.init(document.getElementById('chart-ele' + props.id))
			
 
				+  init()
			
 
				+  window.addEventListener('resize', () => {
			
 
				+    myChart.resize()
			
 
				+  })
			
 
				+})
			
 
				+
			
 
				+watch(() => props.list, () => {
			
 
				+  myChart.clear()
			
 
				+  init()
			
 
				+}, { deep: true })
			
 
				+
			
 
				+onBeforeUnmount(() => {
			
 
				+  window.removeEventListener('resize', () => {
			
 
				+    myChart.resize()
			
 
				+  })
			
 
				+})
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/views/Energy/charts/ChartFeed.vue
+++ b/src/views/Energy/charts/ChartFeed.vue
@@ -0,0 +1,183 @@
 
				+<template>
			
 
				+  <div :id="'chart-feed' + id" style="width: 100%; height: 100%"></div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ChartFeed"
			
 
				+}
			
 
				+</script>
			
 
				+<script setup>
			
 
				+import { onMounted, getCurrentInstance, onBeforeUnmount, watch } from 'vue';
			
 
				+import * as echarts from 'echarts'
			
 
				+
			
 
				+const { proxy } = getCurrentInstance()
			
 
				+
			
 
				+const props = defineProps({
			
 
				+  id: {
			
 
				+    type: Number,
			
 
				+    default: () => 0
			
 
				+  },
			
 
				+  list: {
			
 
				+    type: Array,
			
 
				+    default: () => []
			
 
				+  },
			
 
				+})
			
 
				+
			
 
				+let myChart = null;
			
 
				+
			
 
				+const init = () => {
			
 
				+  let arr = [];
			
 
				+  let data = [];
			
 
				+  if(props.list.length > 0) {
			
 
				+    props.list.forEach(item => {
			
 
				+      arr.push(item.date)
			
 
				+      data.push(item.value)
			
 
				+    })
			
 
				+  }
			
 
				+
			
 
				+
			
 
				+  let options = {
			
 
				+    tooltip: {
			
 
				+      trigger: "axis",
			
 
				+    },
			
 
				+    legend: {
			
 
				+      left: 'center',
			
 
				+      top: 'top',
			
 
				+      textStyle: {
			
 
				+        color: '#fff'
			
 
				+      }
			
 
				+    },
			
 
				+    grid: {
			
 
				+      left: '3%',
			
 
				+      top: '15%',
			
 
				+      right: '3%',
			
 
				+      bottom: '5%',
			
 
				+      containLabel: true
			
 
				+    },
			
 
				+    xAxis: {
			
 
				+      type: 'category',
			
 
				+      boundaryGap: true,
			
 
				+      data: arr,
			
 
				+      axisLine: {
			
 
				+        show: true,
			
 
				+        lineStyle: {
			
 
				+          color: "#fff",
			
 
				+        }
			
 
				+      },
			
 
				+      axisLabel: {
			
 
				+        color: '#fff'
			
 
				+      }
			
 
				+    },
			
 
				+    yAxis: [
			
 
				+      {
			
 
				+        type: 'value',
			
 
				+        name: '单位:kg',
			
 
				+        nameTextStyle:{//y轴上方单位的颜色
			
 
				+          color:'#fff',
			
 
				+          padding: [0, 0, 0, 15]
			
 
				+        },
			
 
				+        boundaryGap: [0, 0.1],
			
 
				+        axisLine: {       //y轴
			
 
				+          show: true,
			
 
				+          color: '#fff'
			
 
				+        },
			
 
				+        axisTick: {
			
 
				+          show: false,
			
 
				+        },
			
 
				+        splitLine: {
			
 
				+          show: true,
			
 
				+          lineStyle:{
			
 
				+            type:'dashed',//虚线
			
 
				+            color: '#293563'
			
 
				+          },
			
 
				+        },
			
 
				+        axisLabel: {
			
 
				+          color: '#fff',
			
 
				+          textStyle: {
			
 
				+            color: '#fff',//字体颜色
			
 
				+            fontSize: 12 //字体大小
			
 
				+          }
			
 
				+        },
			
 
				+        splitArea: {
			
 
				+          show: true,
			
 
				+          areaStyle: {
			
 
				+            color: '#1D2555'
			
 
				+          }
			
 
				+        }
			
 
				+      },
			
 
				+    ],
			
 
				+    series: [
			
 
				+      {
			
 
				+        name: '用料量',
			
 
				+        type: 'bar',
			
 
				+        smooth: true,
			
 
				+        showAllSymbol: true,
			
 
				+        data: data,
			
 
				+        barWidth: 20,
			
 
				+        tooltip: {
			
 
				+          valueFormatter: function (value) {
			
 
				+            return value + ` kg`;
			
 
				+          }
			
 
				+        },
			
 
				+        itemStyle: {
			
 
				+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+            { offset: 0, color: '#FF9600'},
			
 
				+            { offset: 1, color:  'rgba(255, 150, 0, .4)' }
			
 
				+          ])
			
 
				+        },
			
 
				+        // lineStyle: {
			
 
				+        //   width: 5,  //阴影宽度
			
 
				+        //   shadowColor: 'rgba(0, 156, 255, .4)', //阴影颜色
			
 
				+        //   shadowBlur: 6, //阴影模糊系数
			
 
				+        // },
			
 
				+      },
			
 
				+      {
			
 
				+        name: '用料量',
			
 
				+        type: 'line',
			
 
				+        smooth: true,
			
 
				+        showAllSymbol: true,
			
 
				+        data: data,
			
 
				+        barWidth: 20,
			
 
				+        tooltip: {
			
 
				+          show: false
			
 
				+        },
			
 
				+        itemStyle: {
			
 
				+          normal: {
			
 
				+            color: '#FF9600'
			
 
				+          }
			
 
				+        },
			
 
				+        lineStyle: {
			
 
				+          width: 5,  //阴影宽度
			
 
				+          shadowColor: 'rgba(255, 150, 0, .4)', //阴影颜色
			
 
				+          shadowBlur: 6, //阴影模糊系数
			
 
				+        },
			
 
				+      },
			
 
				+    ],
			
 
				+  }
			
 
				+  myChart.setOption(options)
			
 
				+}
			
 
				+
			
 
				+onMounted(() => {
			
 
				+  myChart = proxy.$echarts.init(document.getElementById('chart-feed' + props.id))
			
 
				+  init()
			
 
				+  window.addEventListener('resize', () => {
			
 
				+    myChart.resize()
			
 
				+  })
			
 
				+})
			
 
				+
			
 
				+watch(() => props.list, () => {
			
 
				+  myChart.clear()
			
 
				+  init()
			
 
				+}, { deep: true })
			
 
				+
			
 
				+onBeforeUnmount(() => {
			
 
				+  window.removeEventListener('resize', () => {
			
 
				+    myChart.resize()
			
 
				+  })
			
 
				+})
			
 
				+
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/src/views/Energy/charts/ChartWater.vue
+++ b/src/views/Energy/charts/ChartWater.vue
		`@@ -0,0 +1 @@`
		`+@import "./node_modules/ant-design-vue/lib/style/themes/dark.less";`