Browse Source

first commit

xsh 1 năm trước cách đây
commit
f8ded3a492
79 tập tin đã thay đổi với 17674 bổ sung0 xóa
  1. 24 0
      .gitignore
  2. 7 0
      README.md
  3. 13 0
      index.html
  4. 1425 0
      package-lock.json
  5. 31 0
      package.json
  6. BIN
      public/static/h265/image/siagn.png
  7. 284 0
      public/static/h265/index.html
  8. 1153 0
      public/static/h265/src/Decoder.js
  9. BIN
      public/static/h265/src/Decoder.wasm
  10. 180 0
      public/static/h265/src/H2642.js
  11. 387 0
      public/static/h265/src/H264SPSParser.js
  12. 582 0
      public/static/h265/src/H264Session.js
  13. 86 0
      public/static/h265/src/H265.js
  14. 287 0
      public/static/h265/src/H265SPSParser.js
  15. 416 0
      public/static/h265/src/H265Session.js
  16. 563 0
      public/static/h265/src/H265Session2.js
  17. 573 0
      public/static/h265/src/MP4Remux.js
  18. 413 0
      public/static/h265/src/MediaSource.js
  19. 262 0
      public/static/h265/src/ROIDrawer.js
  20. 165 0
      public/static/h265/src/SuperRender_20.js
  21. 250 0
      public/static/h265/src/YUVPlayer.js
  22. 98 0
      public/static/h265/src/drawer.js
  23. 141 0
      public/static/h265/src/ivsDrawer.js
  24. 19 0
      public/static/h265/src/jsFFMPEG.js
  25. 257 0
      public/static/h265/src/md5.js
  26. 80 0
      public/static/h265/src/player.js
  27. 570 0
      public/static/h265/src/util.js
  28. 156 0
      public/static/h265/src/videoBuffer.js
  29. 128 0
      public/static/h265/src/videoWorker.js
  30. 653 0
      public/static/h265/src/websocketServer.js
  31. 566 0
      public/static/h265/src/workerManager.js
  32. BIN
      public/static/jinm/image/siagn.png
  33. 236 0
      public/static/jinm/index.html
  34. 387 0
      public/static/jinm/src/H264SPSParser.js
  35. 667 0
      public/static/jinm/src/H264Session.js
  36. 573 0
      public/static/jinm/src/MP4Remux.js
  37. 414 0
      public/static/jinm/src/MediaSource.js
  38. 630 0
      public/static/jinm/src/ROIDrawer.js
  39. 98 0
      public/static/jinm/src/drawer.js
  40. 275 0
      public/static/jinm/src/ivsDrawer.js
  41. 257 0
      public/static/jinm/src/md5.js
  42. 551 0
      public/static/jinm/src/ml5.min.js
  43. 125 0
      public/static/jinm/src/player.js
  44. 108 0
      public/static/jinm/src/videoWorker.js
  45. 644 0
      public/static/jinm/src/websocketServer.js
  46. 523 0
      public/static/jinm/src/workerManager.js
  47. 1 0
      public/vite.svg
  48. 50 0
      src/App.vue
  49. BIN
      src/assets/2222.jpg
  50. 25 0
      src/assets/api/home.js
  51. 75 0
      src/assets/api/sub.js
  52. 40 0
      src/assets/api/user.js
  53. BIN
      src/assets/favicon.png
  54. BIN
      src/assets/ttf/Furore_2.otf
  55. BIN
      src/assets/ttf/biaoti.ttf
  56. 8 0
      src/assets/ttf/font.css
  57. 1 0
      src/assets/vue.svg
  58. 138 0
      src/components/XImgUpload.vue
  59. 74 0
      src/components/charts/ChartDevice.vue
  60. 107 0
      src/components/charts/ChartLine.vue
  61. 73 0
      src/components/charts/ChartPie.vue
  62. 77 0
      src/components/charts/ChartWorker.vue
  63. 107 0
      src/components/charts/ChartWorkerLine.vue
  64. 25 0
      src/main.js
  65. 38 0
      src/router/ChildrenRouters.js
  66. 42 0
      src/router/index.js
  67. 36 0
      src/store/index.js
  68. 48 0
      src/style.css
  69. 41 0
      src/utils/auth.js
  70. 115 0
      src/utils/http.js
  71. 21 0
      src/utils/index.js
  72. 40 0
      src/utils/lib.js
  73. 188 0
      src/views/Detail/Detail.vue
  74. 100 0
      src/views/Home/Home.vue
  75. 115 0
      src/views/Login/Login.vue
  76. 122 0
      src/views/MainLayout.vue
  77. 97 0
      src/views/Mine/Mine.vue
  78. 12 0
      vite.config.js
  79. 601 0
      yarn.lock

+ 24 - 0
.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?

+ 7 - 0
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) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

+ 13 - 0
index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>智能散酒管理</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1425 - 0
package-lock.json


+ 31 - 0
package.json

@@ -0,0 +1,31 @@
+{
+  "name": "applet",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@nutui/icons-vue": "^0.0.26",
+    "@nutui/nutui": "^4.0.9",
+    "axios": "^1.4.0",
+    "echarts": "^5.4.2",
+    "js-cookie": "^3.0.5",
+    "jsencrypt": "^3.3.2",
+    "moment": "^2.29.4",
+    "pinia": "^2.1.3",
+    "vant": "^4.6.0",
+    "vue": "^3.2.47",
+    "vue-router": "4",
+    "vue3-infinite-scroll-better": "^2.2.0",
+    "vxe-table": "^4.4.2",
+    "xe-utils": "^3.5.11"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.1.0",
+    "vite": "^4.3.9"
+  }
+}

BIN
public/static/h265/image/siagn.png


+ 284 - 0
public/static/h265/index.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>player</title>
+    <script type="text/javascript" src="./src/SuperRender_20.js"></script>
+    <style>
+        .container {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        #canvas {
+            position: absolute;
+        }
+        .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-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; padding: 0; width: 100%; height: 100%; z-index:999; background-color: transparent; overflow: hidden">
+    <video id="video"></video>
+    <div class="container">
+        <canvas id="canvas"></canvas>
+        <canvas id="videoCanvas"></canvas>
+    </div>
+    <canvas id="draw" ></canvas>
+    <div class="sk-chase" id="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 src="./node_modules/file-saver/FileSaver.js"/> -->
+<script src="./src/md5.js" type="text/javascript"></script>
+<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(',');
+    console.log(data);
+
+    // 下标0 wsUrl, 1 rtspUrl, 2 canvas 宽度, 3 canvas高度
+
+    let video = document.getElementById('video');
+    let height = video.clientHeight;
+    video.dblclick = function () {
+    };
+    // function onDocumentClick(event) {
+    //     // 取消上次延时未执行的方法
+    //     clearTimeout(clickTimeId);
+    //     //执行延时
+    //     clickTimeId = setTimeout(function() {
+    //         //此处为单击事件要执行的代码
+    //         console.log("鼠标单击");
+    //     }, 250);
+    // }
+
+    // 设置高度宽度
+    document.getElementById('canvas').width = data[2];
+    document.getElementById('canvas').height = data[3];
+    document.getElementById('videoCanvas').width = data[2];
+    document.getElementById('videoCanvas').height = data[3];
+
+    const options = {
+        video: document.getElementById('video'),
+        canvas: document.getElementById('canvas'),
+        drawer: document.getElementById('draw'),
+        wsUrl: '',
+        rtspUrl: '',
+        user: '',
+        pwd: ''
+    }
+
+    options.wsUrl = data[0];
+    options.rtspUrl = data[1];
+
+    let player = new Player(options);
+    player.init();
+    player.on('error', function () {
+        console.log('连接失败')
+        let er = document.getElementById('error_text');
+        er.style.display = 'block';
+
+        let sk = document.getElementById('sk-chase');
+        sk.style.display = 'none';
+    });
+    player.on('noStream', function () {
+        console.log('noStream');
+        player.close();
+        player = null;
+        player = new Player(options);
+        player.init();
+        player.connect();
+    });
+
+    player.on('canplay', function () {
+        console.log('首次播放')
+        //player.close();
+    });
+
+    player.on('initialCompleted', function () {
+        let data = [[
+            {x: 2861, y: 4395},
+            {x: 6403, y: 4013},
+            {x: 3260, y: 7986},
+            {x: 640, y: 6252}
+        ]];
+        console.log('initialCompleted')
+        player.setROI(data);
+    });
+
+    player.on('ROIFinished', function () {
+       console.log('ROIFinished');
+    });
+
+    player.connect();
+
+    let sk = document.getElementById('sk-chase');
+    sk.style.display = 'none';
+
+    // document.getElementById('close').onclick = ()=>{
+    //     player.close();
+    // };
+
+    // document.getElementById('ROIreset').onclick = () =>{
+    //     player.resetROI();
+    // };
+    //
+    // document.getElementById('ROIset').onclick = () =>{
+    //     let data = [[
+    //         {x: 2861, y: 4395},
+    //         {x: 6403, y: 4013},
+    //         {x: 3260, y: 7986},
+    //         {x: 640, y: 6252}
+    //     ]];
+    //     player.setROI(data);
+    // };
+    //
+    // document.getElementById('ROIdata').onclick = () =>{
+    //     let result = player.getROIData();
+    //     console.log(result)
+    // };
+    //
+    // document.getElementById('ROIsetNum').onclick = ()=> {
+    //     let num = document.getElementById('ROINum').value;
+    //     player.setPolygonNum(num);
+    // }
+
+    function onDocumenDblClick(event) {
+       show = !show;
+       let width = window.screen.width;
+       let height = window.screen.height;
+       let canvas = document.getElementById('canvas');
+       if(show) {
+         if (document.body.requestFullscreen) { //解决兼容性问题
+           document.body.requestFullscreen();
+         } else if (document.body.webkitRequestFullScreen) { //兼容谷歌 /Edge
+           document.body.webkitRequestFullScreen();
+         } else if (document.body.mozRequestFullScreen) { //Firefox
+           document.body.mozRequestFullScreen();
+         }else if(document.body.msRequestFullscreen){//ie
+           document.body.msRequestFullscreen();
+         }
+         canvas.style.position = 'fixed';
+         canvas.style.top = 0;
+         canvas.style.left = 0;
+         document.getElementById('canvas').width = width;
+         document.getElementById('canvas').height = height;
+         document.getElementById('videoCanvas').width = width;
+         document.getElementById('videoCanvas').height = height;
+       } else {
+         if(document.exitFullscreen) {
+           document.exitFullscreen();
+         } else if(document.mozCancelFullScreen) {
+           document.mozCancelFullScreen();
+         } else if(document.webkitExitFullscreen) {
+           document.webkitExitFullscreen();
+         }else if(document.msExitFullscreen) {
+           document.msExitFullscreen();
+         }
+         document.getElementById('canvas').width = data[2];
+         document.getElementById('canvas').height = data[3];
+         document.getElementById('videoCanvas').width = data[2];
+         document.getElementById('videoCanvas').height = data[3];
+       }
+
+
+
+    }
+
+    let cloc = 0;
+    let show = false;
+    document.getElementById('canvas').onclick = function (e) {
+      e.preventDefault();
+      cloc++;
+      setTimeout(() => {
+        cloc = 0;
+      }, 500)
+      if(cloc == 2) {
+        onDocumenDblClick()
+      }
+    }
+
+
+</script>
+</html>

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1153 - 0
public/static/h265/src/Decoder.js


BIN
public/static/h265/src/Decoder.wasm


+ 180 - 0
public/static/h265/src/H2642.js

@@ -0,0 +1,180 @@
+
+importScripts('./jsFFMPEG.js');
+let initDecoder = null;
+let decoderContext = null;
+let decodeByFFMPEG = null;
+let getWidth = null;
+let getHeight = null;
+let closeContext = null;
+let context = null;
+let outpic = null;
+let outpicptr = null;
+let ID = 264;
+let initialized = false;
+let firstIFrame = true;
+
+class H264Decoder {
+    constructor() {
+
+
+
+       //Module.onRuntimeInitialized = () => {
+            console.log('h264 decoder init')
+
+            initDecoder = Module.cwrap('init_jsFFmpeg', 'void', []);
+            decoderContext = Module.cwrap('context_jsFFmpeg', 'number', ['number']);
+            decodeByFFMPEG = Module.cwrap('decode_video_jsFFmpeg', 'number', ['number', 'array', 'number', 'number']);
+            getWidth = Module.cwrap('get_width', 'number', ['number']);
+            getHeight = Module.cwrap('get_height', 'number', ['number']);
+            closeContext = Module.cwrap('close_jsFFmpeg', 'number', ['number']);
+        initDecoder();
+            this.init();
+            initialized = true;
+        //};
+    }
+    init() {
+        if (context !== null) {
+            closeContext(context);
+            context = null;
+        }
+        context = decoderContext(ID);
+    }
+
+    setOutputSize(size) {
+        console.log("H264 Decoder setOutputSize");
+        let outpicsize = size * 1.5;
+        outpicptr = Module._malloc(outpicsize);
+        outpic = new Uint8Array(Module.HEAPU8.buffer, outpicptr, outpicsize);
+    }
+
+    decode(data) {
+        if(!initialized) {
+            console.log('未初始化完成')
+            return null;
+        }
+        console.log(data.subarray(0, 100))
+        let frameType = ((data[4] & 0x1f) === 7 || (data[4] & 0x1f) === 5) ? 'I' : 'P';
+    //console.log(data[4] & 0x1f)
+        if(frameType === 'I' && initialized) {
+            firstIFrame = true;
+        }
+        if(!firstIFrame) {
+            console.log('非 firstIFrame')
+            return null;
+        }
+        let beforeDecoding = null;
+        let decodingTime = null;
+        let frameData = null;
+        let bufferIdx = null;
+        var dataHeap = null;
+
+        beforeDecoding = Date.now();
+
+        decodeByFFMPEG(context, data, data.length, outpic.byteOffset);
+        decodingTime = Date.now() - beforeDecoding;
+
+
+
+        let width = getWidth(context);
+        let height = getHeight(context);
+
+        console.log(width, height)
+        if (width > 0 && height > 0) {
+            let copyOutput = new Uint8Array(outpic);
+
+            frameData = {
+                'data': copyOutput,
+                'bufferIdx': bufferIdx,
+                'width': width,
+                'height': height,
+                'codecType': 'h264',
+                'decodingTime': decodingTime,
+                'frameType': frameType,
+            };
+            console.log(frameData)
+
+            return frameData;
+        }
+
+        // if(decodeby) {
+        //     //avcodec_decode_video2(context, outpicptr, size, data);
+        //     //console.log(Module.HEAP8.subarray(outpicptr, outpicptr+20))
+        //
+        //     //
+        //     var memoryData = Module._malloc(data.byteLength);
+        //     Module.HEAPU8.set(data, memoryData);
+        //     var ptr = Module._video_decode_frame(video_decoder_ctx, memoryData, data.byteLength);
+        //     Module._free(memoryData);
+        //     if(ptr === 0) {
+        //         console.error("[ERROR] no Frame Data!");
+        //         return null;
+        //     }else {
+        //     }
+        // }else {
+        //     try {
+        //         //outpic = Module.HEAPU8.length - data.length - 1000;
+        //         Module.HEAPU8.set(data, outpic);
+        //         console.log(data.length, data.subarray(0, 30), outpic,  Module.HEAPU8.subarray(outpic))
+        //         //let result = avcodec_decode_video2(context, outpic, size/8, data);
+        //         console.log(h264_decode_frame(context, data, data.length, outpic));
+        //         //dataHeap = new Uint8Array(Module.HEAPU8.buffer, outpic, size);
+        //         //dataHeap.set(data);
+        //         //outpic.set(data);
+        //         //console.log(data.length, data.subarray(0, 30), outpic.byteOffset, outpic.subarray(0, 30), Module.HEAPU8.subarray(outpic.byteOffset))
+        //         //let result = avcodec_decode_video2(context, outpic.byteOffset, 0, data);
+        //         //console.log('result: ', result)
+        //     } catch (e) {
+        //         console.log(e)
+        //     }
+        //
+        // }
+
+
+        // if (!Constructor.prototype.isFirstFrame()) {
+        //     Constructor.prototype.setIsFirstFrame(true);
+        //     frameData = {
+        //         'firstFrame': true,
+        //     };
+        //     return frameData;
+        // }
+        // draw picture in canvas.
+        //console.log(outpic)
+
+        //console.log(width, height)
+        // if (width > 0 && height > 0) {
+        let copyOutput;
+        // if(decodeby) {
+        //     var width = Module.HEAPU32[ptr / 4],
+        //         height = Module.HEAPU32[ptr / 4 + 1],
+        //         YimgBufferPtr = Module.HEAPU32[ptr / 4 + 2],
+        //         UimgBufferPtr = Module.HEAPU32[ptr / 4 + 3],
+        //         VimgBufferPtr = Module.HEAPU32[ptr / 4 + 4],
+        //         YimageBuffer = Module.HEAPU8.subarray(YimgBufferPtr, YimgBufferPtr + width * height),
+        //         UimageBuffer = Module.HEAPU8.subarray(UimgBufferPtr, UimgBufferPtr + width * height / 4),
+        //         VimageBuffer = Module.HEAPU8.subarray(VimgBufferPtr, VimgBufferPtr + width * height / 4);
+        //
+        //     var ydata = new Uint8Array(YimageBuffer);
+        //     var udata = new Uint8Array(UimageBuffer);
+        //     var vdata = new Uint8Array(VimageBuffer);
+        //
+        //     frameData = {
+        //         'bufferIdx': bufferIdx,
+        //         'width': width,
+        //         'height': height,
+        //         'codecType': 'h264',
+        //         'decodingTime': decodingTime,
+        //         'frameType': frameType,
+        //         YData:ydata.buffer,
+        //         UData:udata.buffer,
+        //         VData:vdata.buffer,
+        //     };
+        //
+        //     return frameData;
+        // } else {
+        //     //console.log(outpic)
+        //     copyOutput = new Uint8Array(Module.HEAPU8.buffer, outpic, data.size);
+        //     //console.log(outpic)
+        //
+        // }
+    }
+}

+ 387 - 0
public/static/h265/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;

+ 582 - 0
public/static/h265/src/H264Session.js

@@ -0,0 +1,582 @@
+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 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 = 'canvas';
+    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 lastTime =0;
+    let decoder = null;
+    function constructor() {
+
+    }
+
+    constructor.prototype = {
+        init() {
+            SPSParser = new H264SPSParser();
+            decoder = new H264Decoder();
+            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, rtpTimeStamp)
+            //console.log('nalType: ', nalType, ' timestamp: ', rtpTimeStamp);
+            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('ppsSegment: ', ppsSegment)
+            //console.log('nalType: ' + nalType);
+//console.log('M: ' + RtpHeader.M + ' ' + (rtpHeader[1] & 0x80))
+            //console.log(RtpHeader)
+
+
+//console.log('RtpHeader.M: ', RtpHeader.M)
+            //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;
+                    }
+                    //console.log('SEI', rtpTimeStamp, 'video', lastTimeStamp, lastTimeStamp+ RESETTIME * resetTimeCount - rtpTimeStamp)
+                    // //同一帧的SEI比视频发送快时
+                    // if(rtpTimeStamp - lastTimeStamp === 3600) {
+                    //     if(rtpTimeStamp === 0 ) {
+                    //         rtpTimeStamp = rtpTimeStamp + RESETTIME * (resetTimeCount + 1);
+                    //     } else {
+                    //         rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
+                    //     }
+                    // }
+                }
+
+                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;
+                        //console.log('GET SEI', rtpTimeStamp)
+                        //SEI信息
+                        decodedData.SEIInfo = SEIInfo;
+
+                        if (!(rtpTimeStamp - lastTime)) {
+                            console.log('上个SET包时间和本次相等');
+                            console.log('lastTime: ', lastTime, ' rtpTimeStamp: ', rtpTimeStamp, RtpHeader.timeStamp, rtpHeader[4], rtpHeader[5], rtpHeader[6], rtpHeader[7])
+                        }
+                        if ((rtpTimeStamp - lastTime) !== 3600) {
+                            //console.log('SEI 时间差:', (rtpTimeStamp - lastTime), rtpTimeStamp, lastTime)
+                        }
+                        lastTime = rtpTimeStamp;
+                        SEIInfo = {
+                            ivs: null,
+                            timestamp: 0,
+                        };
+                    }
+                    SEIBuffer = null;
+                }
+
+                if(decodeMode === 'canvas' && (frameType !== 'SEI')) {
+                    if (outputSize !== curSize) {
+                        outputSize = curSize;
+                        decoder.setOutputSize(curSize);
+                    }
+
+                    decodedData.frameData = decoder.decode(inputBufferSub);
+                    decodedData.decodeMode = 'canvas';
+                    decodedData.timeStamp = rtpTimeStamp;
+                    decodedData.width = width;
+                    decodedData.height = height;
+                    this.handleDecodedData(decodedData)
+                } else {
+                    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);
+                    }
+
+                    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) {
+                            sample.frameDuration = Math.round(1000 / frameRate);
+                        }else {
+                            sample.frameDuration = (sample.frame_time_stamp - preSample.frame_time_stamp) / 90; // 时钟频率90000,timescale=1000
+                        }
+                    }
+                    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 = parseRect(data);
+            break;
+        case 1:
+            //console.log(parseBody(data))
+            result = parseBody(data);
+            break;
+        default:
+            result = null;
+            break;
+    }
+    return result;
+}
+
+function parseRect(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;
+}
+
+/**
+ * 将智能帧中的人体姿态点转化为树结构(双亲表示法)
+ * @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;
+}

+ 86 - 0
public/static/h265/src/H265.js

@@ -0,0 +1,86 @@
+
+importScripts('./jsFFMPEG.js');
+let initDecoder = null;
+let decoderContext = null;
+let decodeByFFMPEG = null;
+let getWidth = null;
+let getHeight = null;
+let closeContext = null;
+let context = null;
+let outpic = null;
+let outpicptr = null;
+let ID = 265;
+let initialized = false;
+let firstIFrame = true;
+
+class H265Decoder {
+    constructor() {
+
+        initDecoder = Module.cwrap('init_jsFFmpeg', 'void', []);
+        decoderContext = Module.cwrap('context_jsFFmpeg', 'number', ['number']);
+        decodeByFFMPEG = Module.cwrap('decode_video_jsFFmpeg', 'number', ['number', 'array', 'number', 'number']);
+        getWidth = Module.cwrap('get_width', 'number', ['number']);
+        getHeight = Module.cwrap('get_height', 'number', ['number']);
+        closeContext = Module.cwrap('close_jsFFmpeg', 'number', ['number']);
+
+        initDecoder();
+        this.init();
+        initialized = true;
+    }
+    init() {
+        console.log("H265 Decoder init");
+        if (context !== null) {
+            closeContext(context);
+            context = null;
+        }
+        context = decoderContext(ID);
+    }
+
+    setOutputSize(size) {
+        console.log("H265 Decoder setOutputSize");
+        let outpicsize = size * 1.5;
+        outpicptr = Module._malloc(outpicsize);
+        outpic = new Uint8Array(Module.HEAPU8.buffer, outpicptr, outpicsize);
+    }
+
+    decode(data) {
+        if(!initialized) {
+            console.log('未初始化完成')
+            return null;
+        }
+
+        let frameType = (data[4] == 0x40) ? 'I' : 'P';
+        //console.log(data[4] & 0x1f)
+        if(frameType === 'I' && initialized) {
+            firstIFrame = true;
+        }
+        if(!firstIFrame) {
+            console.log('非 firstIFrame')
+            return null;
+        }
+        let beforeDecoding = Date.now();
+        let decodingTime = null;
+        let frameData = null;
+        decodeByFFMPEG(context, data, data.length, outpic.byteOffset);
+        decodingTime = Date.now() - beforeDecoding;
+
+        let width = getWidth(context);
+        let height = getHeight(context);
+
+        //console.log(width, height)
+        if (width > 0 && height > 0) {
+            let copyOutput = new Uint8Array(outpic);
+            frameData = {
+                'data': copyOutput,
+                'width': width,
+                'height': height,
+                'codecType': 'h264',
+                'decodingTime': decodingTime,
+                'frameType': frameType,
+            };
+
+            return frameData;
+        }
+
+    }
+}

+ 287 - 0
public/static/h265/src/H265SPSParser.js

@@ -0,0 +1,287 @@
+"use strict";
+
+
+
+function H265SPSParser() {
+    var vBitCount = 0;
+    var spsMap = null;
+    var pSPSBytes = null;
+
+    function Constructor() {
+        vBitCount = 0;
+        spsMap = new Map();
+    }
+
+    function get_bit(base, offset) {
+        var vCurBytes = (vBitCount + offset) >> 3;
+        offset = (vBitCount + offset) & 0x00000007;
+        return (((base[(vCurBytes)])) >> (0x7 - (offset & 0x7))) & 0x1;
+    }
+
+    function read_bits(pBuf, vReadBits) {
+        var vCurBytes = vBitCount / 8;
+        var vCurBits = vBitCount % 8;
+        var vOffset = 0;
+        var vTmp = 0,
+            vTmp2 = 0;
+
+        if (vReadBits == 1) {
+            vTmp = get_bit(pBuf, vOffset);
+        } else {
+            for (var i = 0; i < vReadBits; i++) {
+                vTmp2 = get_bit(pBuf, i);
+                vTmp = (vTmp << 1) + vTmp2;
+            }
+        }
+
+        vBitCount += vReadBits;
+        return vTmp;
+    }
+
+    function ue(base, offset) {
+        var zeros = 0,
+            vTmp = 0,
+            vReturn = 0;
+        var vIdx = offset;
+        do {
+            vTmp = get_bit(base, vIdx++);
+            if (vTmp == 0)
+                zeros++;
+        } while (0 == vTmp);
+
+        if (zeros == 0) {
+            vBitCount += 1;
+            return 0;
+        }
+
+        // insert first 1 bit
+        vReturn = 1 << zeros;
+
+        for (var i = zeros - 1; i >= 0; i-- , vIdx++) {
+            vTmp = get_bit(base, vIdx);
+            vReturn |= vTmp << i;
+        }
+
+        vBitCount += zeros * 2 + 1;
+
+        return (vReturn - 1);
+    }
+
+    function se(base, offset) {
+        var vReturn = ue(base, offset);
+
+        if (vReturn & 0x1) {
+            return (vReturn + 1) / 2;
+        } else {
+            return -vReturn / 2;
+        }
+    }
+
+    function byte_aligned() {
+        if ((vBitCount & 0x00000007) == 0)
+            return 1;
+        else
+            return 0;
+    }
+
+    function profile_tier_level(profilePresentFlag, maxNumSubLayersMinus1) {
+        if (profilePresentFlag) {
+            spsMap.set("general_profile_space", read_bits(pSPSBytes, 2));
+            spsMap.set("general_tier_flag", read_bits(pSPSBytes, 1));
+            spsMap.set("general_profile_idc", read_bits(pSPSBytes, 5));
+            var generalProfileCompatibilityFlag = new Array(32);
+
+            for (var j = 0; j < 32; j++) {
+                generalProfileCompatibilityFlag[j] = read_bits(pSPSBytes, 1);
+            }
+
+            spsMap.set("general_progressive_source_flag", read_bits(pSPSBytes, 1));
+            spsMap.set("general_interlaced_source_flag", read_bits(pSPSBytes, 1));
+            spsMap.set("general_non_packed_constraint_flag", read_bits(pSPSBytes, 1));
+            spsMap.set("general_frame_only_constraint_flag", read_bits(pSPSBytes, 1));
+
+            var generalProfileIdc = spsMap.get("general_profile_idc");
+            if (generalProfileIdc === 4 || generalProfileCompatibilityFlag[4] ||
+                generalProfileIdc === 5 || generalProfileCompatibilityFlag[5] ||
+                generalProfileIdc === 6 || generalProfileCompatibilityFlag[6] ||
+                generalProfileIdc === 7 || generalProfileCompatibilityFlag[7]) {
+                spsMap.set("general_max_12bit_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_max_10bit_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_max_8bit_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_max_422chroma_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_max_420chroma_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_max_monochrome_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_intra_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_one_picture_only_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_lower_bit_rate_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("general_reserved_zero_34bits", read_bits(pSPSBytes, 34));
+            } else {
+                spsMap.set("general_reserved_zero_43bits", read_bits(pSPSBytes, 43));
+            }
+
+            if ((generalProfileIdc >= 1 && generalProfileIdc <= 5) ||
+                generalProfileCompatibilityFlag[1] || generalProfileCompatibilityFlag[2] ||
+                generalProfileCompatibilityFlag[3] || generalProfileCompatibilityFlag[4] ||
+                generalProfileCompatibilityFlag[5]) {
+                /* The number of bits in this syntax structure is not affected by this condition */
+                spsMap.set("general_inbld_flag", read_bits(pSPSBytes, 1));
+            } else {
+                spsMap.set("general_reserved_zero_bit", read_bits(pSPSBytes, 1));
+            }
+        }
+
+        spsMap.set("general_level_idc", read_bits(pSPSBytes, 8));
+        var subLayerProfilePresentFlag = new Array(maxNumSubLayersMinus1);
+        var subLayerLevelPresentFlag = new Array(maxNumSubLayersMinus1);
+
+        for (i = 0; i < maxNumSubLayersMinus1; i++) {
+            subLayerProfilePresentFlag[i] = read_bits(pSPSBytes, 1);
+            subLayerLevelPresentFlag[i] = read_bits(pSPSBytes, 1);
+        }
+
+        var reservedZero2bits = new Array(8);
+        var subLayerProfileIdc = new Array(maxNumSubLayersMinus1);
+
+        if (maxNumSubLayersMinus1 > 0) {
+            for (var i = maxNumSubLayersMinus1; i < 8; i++) {
+                reservedZero2bits[i] = read_bits(pSPSBytes, 2);
+            }
+        }
+
+        for (var i = 0; i < maxNumSubLayersMinus1; i++) {
+            if (subLayerProfilePresentFlag[i]) {
+                spsMap.set("sub_layer_profile_space", read_bits(pSPSBytes, 2));
+                spsMap.set("sub_layer_tier_flag", read_bits(pSPSBytes, 1));
+                subLayerProfileIdc[i] = read_bits(pSPSBytes, 5);
+
+                for (var j = 0; j < 32; j++) {
+                    subLayerProfileCompatibilityFlag[i][j] = read_bits(pSPSBytes, 1);
+                }
+
+                spsMap.set("sub_layer_progressive_source_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("sub_layer_interlaced_source_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("sub_layer_non_packed_constraint_flag", read_bits(pSPSBytes, 1));
+                spsMap.set("sub_layer_frame_only_constraint_flag", read_bits(pSPSBytes, 1));
+
+                if (subLayerProfileIdc[i] === 4 || subLayerProfileCompatibilityFlag[i][4] ||
+                    subLayerProfileIdc[i] === 5 || subLayerProfileCompatibilityFlag[i][5] ||
+                    subLayerProfileIdc[i] === 6 || subLayerProfileCompatibilityFlag[i][6] ||
+                    subLayerProfileIdc[i] === 7 || subLayerProfileCompatibilityFlag[i][7]) {
+                    /* The number of bits in this syntax structure is not affected by this condition */
+                    spsMap.set("sub_layer_max_12bit_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_max_10bit_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_max_8bit_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_max_422chroma_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_max_420chroma_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_max_monochrome_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_intra_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_one_picture_only_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_lower_bit_rate_constraint_flag", read_bits(pSPSBytes, 1));
+                    spsMap.set("sub_layer_reserved_zero_34bits", read_bits(pSPSBytes, 34));
+                } else {
+                    spsMap.set("sub_layer_reserved_zero_43bits", read_bits(pSPSBytes, 43));
+                }
+
+                if ((subLayerProfileIdc[i] >= 1 && subLayerProfileIdc[i] <= 5) ||
+                    subLayerProfileCompatibilityFlag[1] || subLayerProfileCompatibilityFlag[2] ||
+                    subLayerProfileCompatibilityFlag[3] || subLayerProfileCompatibilityFlag[4] ||
+                    subLayerProfileCompatibilityFlag[5]) {
+                    /* The number of bits in this syntax structure is not affected by this condition */
+                    spsMap.set("sub_layer_inbld_flag", read_bits(pSPSBytes, 1));
+                } else {
+                    spsMap.set("sub_layer_reserved_zero_bit", read_bits(pSPSBytes, 1));
+                }
+            }
+
+            if (subLayerLevelPresentFlag[i]) {
+                spsMap.set("sub_layer_level_idc", read_bits(pSPSBytes, 8));
+            }
+        }
+    }
+
+    Constructor.prototype = {
+        parse: function (spsPayload) {
+            pSPSBytes = spsPayload;
+            //console.log("=========================SPS START=========================");
+            vBitCount = 0;
+            spsMap.clear();
+
+            spsMap.set("forbidden_zero_bit", read_bits(pSPSBytes, 1));
+            spsMap.set("nal_unit_type", read_bits(pSPSBytes, 6));
+            spsMap.set("nuh_layer_id", read_bits(pSPSBytes, 6));
+            spsMap.set("nuh_temporal_id_plus1", read_bits(pSPSBytes, 3));
+
+            spsMap.set("sps_video_parameter_set_id", read_bits(pSPSBytes, 4));
+            if (spsMap.get("nuh_layer_id") === 0) {
+                spsMap.set("sps_max_sub_layers_minus1", read_bits(pSPSBytes, 3));
+            } else {
+                spsMap.set("sps_ext_or_max_sub_layers_minus1", read_bits(pSPSBytes, 3));
+            }
+            var MultiLayerExtSpsFlag = (spsMap.get("nuh_layer_id") !== 0 && spsMap.get("sps_ext_or_max_sub_layers_minus1") === 7);
+
+            if (!MultiLayerExtSpsFlag) {
+                spsMap.set("sps_max_sub_layers_minus1", read_bits(pSPSBytes, 1));
+                //profile_tier_level(1, spsMap.get("sps_max_sub_layers_minus1"));
+            }
+
+            read_bits(pSPSBytes, 84);
+
+            spsMap.set("sps_seq_parameter_set_id", ue(pSPSBytes, 0));
+            if (MultiLayerExtSpsFlag) {
+                spsMap.set("update_rep_format_flag", read_bits(pSPSBytes, 1));
+                if (spsMap.get("update_rep_format_flag")) {
+                    spsMap.set("sps_rep_format_idx", read_bits(pSPSBytes, 8));
+                }
+            } else {
+                spsMap.set("chroma_format_idc", ue(pSPSBytes, 0));
+
+                if (spsMap.get("chroma_format_idc") === 3) {
+                    spsMap.set("separate_colour_plane_flag", read_bits(pSPSBytes, 1));
+                }
+
+                spsMap.set("pic_width_in_luma_samples", ue(pSPSBytes, 0));
+                spsMap.set("pic_height_in_luma_samples", ue(pSPSBytes, 0));
+
+                spsMap.set("conformance_window_flag", read_bits(pSPSBytes, 1));
+
+                if (spsMap.get("conformance_window_flag")) {
+                    spsMap.set("conf_win_left_offset", ue(pSPSBytes, 0));
+                    spsMap.set("conf_win_right_offset", ue(pSPSBytes, 0));
+                    spsMap.set("conf_win_top_offset", ue(pSPSBytes, 0));
+                    spsMap.set("conf_win_bottom_offset", ue(pSPSBytes, 0));
+                }
+            }
+
+            //console.log("=========================SPS END=========================");
+            return true;
+        },
+        getSizeInfo: function () {
+            var width = spsMap.get("pic_width_in_luma_samples");
+            var height = spsMap.get("pic_height_in_luma_samples");
+            if (spsMap.get("conformance_window_flag")) {
+                var chromaFormatIdc = spsMap.get("chroma_format_idc");
+                var separateColourPlaneFlag = spsMap.get("separate_colour_plane_flag");
+                if (typeof separateColourPlaneFlag === "undefined") {
+                    separateColourPlaneFlag = 0;
+                }
+                var subWidthC = ((1 === chromaFormatIdc) || (2 === chromaFormatIdc)) && (0 === separateColourPlaneFlag) ? 2 : 1;
+                var subHeightC = (1 === chromaFormatIdc) && (0 === separateColourPlaneFlag) ? 2 : 1;
+                width -= (subWidthC * spsMap.get("conf_win_right_offset") + subWidthC * spsMap.get("conf_win_left_offset"));
+                height -= (subHeightC * spsMap.get("conf_win_bottom_offset") + subHeightC * spsMap.get("conf_win_top_offset"));
+            }
+            var decodeSize = width * height;
+
+            var sizeInfo = {
+                'width': width,
+                'height': height,
+                'decodeSize': decodeSize
+            };
+
+            return sizeInfo;
+        },
+        getSpsValue: function (key) {
+            return spsMap.get(key);
+        },
+    };
+    return new Constructor();
+}

+ 416 - 0
public/static/h265/src/H265Session.js

@@ -0,0 +1,416 @@
+/* exported H265Session */
+/* global Uint8Array, H265SPSParser, H265Decoder, inheritObject,
+  RtpSession, VideoBufferList, ArrayBuffer, decodeMode */
+/* eslint-disable no-magic-numbers */
+
+var H265Session = function () {
+    'use strict';
+    var rtpTimeStamp = 0,
+        inputLength = 0,
+        size1K = 1024,
+        size1M = size1K * size1K,
+        playback = false,
+        outputSize = 0,
+        curSize = 0,
+        inputBuffer = new Uint8Array(size1M),
+        PREFIX = new Uint8Array(4),
+        SPSParser = null,
+        privIRtpTime = 0,
+        // frameDiffTime = 0,
+        // needDropCnt = 0,
+        delayingTime = 0,
+        DELAY_LIMIT = 8000,
+        decodedData = {
+            frameData: null,
+            timeStamp: null,
+        },
+        timeData = {
+            'timestamp': null,
+            'timezone': null,
+        },
+        frameRate = 0;
+    var width = 0,
+        height = 0;
+
+    PREFIX[0] = '0x00';
+    PREFIX[1] = '0x00';
+    PREFIX[2] = '0x00';
+    PREFIX[3] = '0x01';
+
+    var setBuffer = function (buffer1, buffer2) {
+        var tempBuffer = buffer1;
+        if ((inputLength + buffer2.length) > tempBuffer.length) {
+            tempBuffer = new Uint8Array(tempBuffer.length + size1M);
+        }
+
+        tempBuffer.set(buffer2, inputLength);
+        inputLength += buffer2.length;
+        return tempBuffer;
+    };
+
+    var decodeMode = 'canvas';
+
+    function Constructor() {
+        this.decoder = new H265Decoder();
+    }
+
+    Constructor.prototype = {
+        init: function () {
+            SPSParser = new H265SPSParser();
+            console.log(SPSParser.parse)
+            //this.decoder.setIsFirstFrame(false);
+            this.videoBufferList = new VideoBufferList();
+            this.firstDiffTime = 0;
+            this.checkDelay = true;
+        },
+        setFrameRate(fps) {
+            frameRate = fps;
+            //console.log('frameRate: ', frameRate)
+        },
+        remuxRTPData: function (rtspInterleaved, rtpHeader, rtpPayload, isBackup) {
+            var HEADER = rtpHeader,
+                PAYLOAD = null,
+                timeData = {
+                    'timestamp': null,
+                    'timezone': null,
+                },
+                extensionHeaderLen = 0,
+                PaddingSize = 0,
+                data = {};
+
+            if (rtspInterleaved[0] !== 0x24) {
+                console.log("H265Session::it is not valid interleave header (RTSP over TCP)");
+                return;
+            } else if ((rtpHeader[0] & 0x0F) === 0x0F) {
+                console.log("H265Session::There is additional CSRC which is not handled in this version");
+                return;
+            } else if ((rtpHeader[0] & 0x20) === 0x20) {
+                PaddingSize = rtpPayload[rtpPayload.length - 1];
+                console.log("H265Session::PaddingSize - " + PaddingSize);
+            }
+
+            //Extension bit check in RTPHeader
+            if ((rtpHeader[0] & 0x10) === 0x10) {
+                extensionHeaderLen = (((rtpPayload[2] << 8) | rtpPayload[3]) * 4) + 4;
+
+                //Playback check
+                if (rtpPayload[0] === 0xAB && rtpPayload[1] === 0xAD) {
+                    var startHeader = 4,
+                        NTPmsw = new Uint8Array(new ArrayBuffer(4)),
+                        NTPlsw = new Uint8Array(new ArrayBuffer(4)),
+                        gmt = new Uint8Array(new ArrayBuffer(2)),
+                        fsynctime = {
+                            'seconds': null,
+                            'useconds': null,
+                        },
+                        microseconds = null;
+
+                    NTPmsw.set(rtpPayload.subarray(startHeader, startHeader + 4), 0);
+                    startHeader += 4;
+
+                    NTPlsw.set(rtpPayload.subarray(startHeader, startHeader + 4), 0);
+                    startHeader += 6;
+
+                    gmt.set(rtpPayload.subarray(startHeader, startHeader + 2), 0);
+
+                    microseconds = (this.ntohl(NTPlsw) / 0xffffffff) * 1000;
+                    fsynctime.seconds = ((this.ntohl(NTPmsw) - 0x83AA7E80) >>> 0);
+                    fsynctime.useconds = microseconds;
+                    gmt = (((gmt[0] << 8) | gmt[1]) << 16) >> 16;
+
+                    timeData = {
+                        timestamp: fsynctime.seconds,
+                        timestamp_usec: fsynctime.useconds,
+                        timezone: gmt,
+                    };
+
+                    if ((this.getFramerate() === 0 || typeof this.getFramerate() === "undefined") &&
+                        (typeof this.getTimeStamp() !== "undefined")) {
+                        var diffUsec = timeData.timestamp_usec - this.getTimeStamp().timestamp_usec;
+                        this.setFramerate(Math.round(1000 / (((timeData.timestamp -
+                            this.getTimeStamp().timestamp) === 0 ? 0 : 1000) + (diffUsec))));
+                    }
+                    this.setTimeStamp(timeData);
+                    playback = true;
+                }
+            }
+
+            PAYLOAD = rtpPayload.subarray(extensionHeaderLen, rtpPayload.length - PaddingSize);
+            rtpTimeStamp = this.ntohl(rtpHeader.subarray(4, 8));
+
+            var nalType = (PAYLOAD[0] >> 1) & 0x3f;
+
+            switch (nalType) {
+                default:
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    break;
+                // Fragmentation unit(FU)
+                case 49:
+                    var startBit = ((PAYLOAD[2] & 0x80) === 0x80);
+                    var endBit = ((PAYLOAD[2] & 0x40) === 0x40);
+                    var fuType = PAYLOAD[2] & 0x3f;
+                    var payloadStartIndex = 3;
+
+                    if (startBit === true && endBit === false) {
+                        var newNalHeader = new Uint8Array(2);
+                        newNalHeader[0] = (PAYLOAD[0] & 0x81) | (fuType << 1);
+                        newNalHeader[1] = PAYLOAD[1];
+
+                        inputBuffer = setBuffer(inputBuffer, PREFIX);
+                        inputBuffer = setBuffer(inputBuffer, newNalHeader);
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    } else {
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    }
+                    break;
+                //SPS
+                case 33:
+                    SPSParser.parse(PAYLOAD);
+                    var resolution = SPSParser.getSizeInfo();
+                    curSize = resolution.width * resolution.height;
+                    if (playback && !isBackup) {
+                        var limitSize = 1280 * 720;
+                        if (curSize > limitSize) {
+                            data.error = {
+                                errorCode: "998",
+                                description: "Resolution is too big",
+                                place: "h265Session.js",
+                            };
+                            this.rtpReturnCallback(data);
+                            return; // data;
+                        }
+                    }
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    width = resolution.width;
+                    height = resolution.height;
+                    break;
+            } //end of switch(nalType)
+            //case 48 Remove because not use more
+
+            //check marker bit
+            var frameType = '';
+            if ((HEADER[1] & 0x80) === 0x80) {
+                // var DepacketizingTime = Date.now() - beforeDepacketizing;
+                if (outputSize !== curSize) {
+                    outputSize = curSize;
+                    this.decoder.setOutputSize(outputSize);
+                }
+
+                var inputBufferSub = inputBuffer.subarray(0, inputLength);
+                if (inputBufferSub[4] === 0x40) {
+                    frameType = 'I';
+                    if (this.firstDiffTime == 0) {
+                        privIRtpTime = rtpTimeStamp;
+                        delayingTime = 0;
+                        this.firstDiffTime = (Date.now() - (rtpTimeStamp / 90).toFixed(0));
+                        // needDropCnt = 0;
+                    } else {
+                        // frameDiffTime = Math.round(((rtpTimeStamp / 90).toFixed(0) - privIRtpTime) / this.getGovLength());
+                        if((rtpTimeStamp - privIRtpTime) < 0){
+                            this.firstDiffTime = delayingTime + (Date.now() - (rtpTimeStamp / 90).toFixed(0));
+                            // console.log("firstDiffTime = " + this.firstDiffTime + " rtpTimeStamp = " + rtpTimeStamp + " privIRtpTime = " + privIRtpTime );
+                        }
+                        delayingTime = (Date.now() - (rtpTimeStamp / 90).toFixed(0)) - this.firstDiffTime;
+                        privIRtpTime = rtpTimeStamp;
+                        if (delayingTime > DELAY_LIMIT) {
+                            if (this.checkDelay === true && playback === false) {
+                                data.error = {
+                                    errorCode: "997",
+                                    description: "Delay time is too long",
+                                    place: "h265Session.js",
+                                };
+                                // console.log("h265Session::Delay time is too long 997 error ");
+
+                                this.rtpReturnCallback(data);
+                                return; // data;
+                            }
+                        }
+                        // needDropCnt = (needDropCnt > 0) ? Math.round(needDropCnt / frameDiffTime) : 0;
+                    }
+                } else {
+                    frameType = 'P';
+                }
+
+                decodedData.frameData = null;
+                if (isBackup !== true || playback !== true) {
+                    console.log('frameType', frameType)
+                    decodedData.frameData = this.decoder.decode(inputBufferSub);
+                }
+
+                decodedData.timeStamp = null;
+                inputLength = 0;
+                if (playback === true) {
+                    timeData = (timeData.timestamp === null ? this.getTimeStamp() : timeData);
+                    decodedData.timeStamp = timeData;
+                }
+                if (isBackup) {
+                    data.backupData = {
+                        'stream': inputBufferSub,
+                        'frameType': frameType,
+                        'width': width,
+                        'height': height,
+                        'codecType': 'h265',
+                    };
+                    if (timeData.timestamp !== null && typeof timeData.timestamp !== "undefined") {
+                        data.backupData.timestamp_usec = timeData.timestamp_usec;
+                    } else {
+                        data.backupData.timestamp = (rtpTimeStamp / 90).toFixed(0);
+                    }
+                }
+                data.decodedData = decodedData;
+                if (decodeMode !== "canvas") {
+                    data.decodeMode = "canvas";
+                }
+                console.log(data)
+                this.rtpReturnCallback(data);
+                return; // data;
+            }
+        },
+        bufferingRtpData: function (rtspInterleaved, rtpHeader, rtpPayload) {
+            var HEADER = rtpHeader,
+                PAYLOAD = null,
+                extensionHeaderLen = 0,
+                PaddingSize = 0;
+
+            if (rtspInterleaved[0] !== 0x24) {
+                console.log("H265Session::it is not valid interleave header (RTSP over TCP)");
+                return;
+            } else if ((rtpHeader[0] & 0x0F) === 0x0F) {
+                console.log("H265Session::There is additional CSRC which is not handled in this version");
+                return;
+            } else if ((rtpHeader[0] & 0x20) === 0x20) {
+                PaddingSize = rtpPayload[rtpPayload.length - 1];
+                console.log("H265Session::PaddingSize - " + PaddingSize);
+            }
+
+            //Extension bit check in RTPHeader
+            if ((rtpHeader[0] & 0x10) === 0x10) {
+                extensionHeaderLen = (((rtpPayload[2] << 8) | rtpPayload[3]) * 4) + 4;
+
+                //Playback check
+                if (rtpPayload[0] === 0xAB && rtpPayload[1] === 0xAD) {
+                    var startHeader = 4,
+                        NTPmsw = new Uint8Array(new ArrayBuffer(4)),
+                        NTPlsw = new Uint8Array(new ArrayBuffer(4)),
+                        gmt = new Uint8Array(new ArrayBuffer(2)),
+                        fsynctime = {
+                            'seconds': null,
+                            'useconds': null,
+                        },
+                        microseconds = null;
+
+                    NTPmsw.set(rtpPayload.subarray(startHeader, startHeader + 4), 0);
+                    startHeader += 4;
+
+                    NTPlsw.set(rtpPayload.subarray(startHeader, startHeader + 4), 0);
+                    startHeader += 6;
+
+                    gmt.set(rtpPayload.subarray(startHeader, startHeader + 2), 0);
+
+                    microseconds = (this.ntohl(NTPlsw) / 0xffffffff) * 1000;
+                    fsynctime.seconds = ((this.ntohl(NTPmsw) - 0x83AA7E80) >>> 0);
+                    fsynctime.useconds = microseconds;
+                    gmt = (((gmt[0] << 8) | gmt[1]) << 16) >> 16;
+
+                    timeData = {
+                        timestamp: fsynctime.seconds,
+                        timestamp_usec: fsynctime.useconds,
+                        timezone: gmt,
+                    };
+                    playback = true;
+                }
+            }
+
+            PAYLOAD = rtpPayload.subarray(extensionHeaderLen, rtpPayload.length - PaddingSize);
+
+            rtpTimeStamp = new Uint8Array(new ArrayBuffer(4));
+            rtpTimeStamp.set(rtpHeader.subarray(4, 8), 0);
+            rtpTimeStamp = this.ntohl(rtpTimeStamp);
+
+            var nalType = (PAYLOAD[0] >> 1) & 0x3f;
+
+            switch (nalType) {
+                default:
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    break;
+                // Fragmentation unit(FU)
+                case 49:
+                    var startBit = ((PAYLOAD[2] & 0x80) === 0x80);
+                    var endBit = ((PAYLOAD[2] & 0x40) === 0x40);
+                    var fuType = PAYLOAD[2] & 0x3f;
+                    var payloadStartIndex = 3;
+
+                    if (startBit === true && endBit === false) {
+                        var newNalHeader = new Uint8Array(2);
+                        newNalHeader[0] = (PAYLOAD[0] & 0x81) | (fuType << 1);
+                        newNalHeader[1] = PAYLOAD[1];
+
+                        inputBuffer = setBuffer(inputBuffer, PREFIX);
+                        inputBuffer = setBuffer(inputBuffer, newNalHeader);
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    } else {
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    }
+                    break;
+                //SPS
+                case 33:
+                    SPSParser.parse(PAYLOAD);
+                    var resolution = SPSParser.getSizeInfo();
+                    curSize = resolution.width * resolution.height;
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    width = resolution.width;
+                    height = resolution.height;
+                    break;
+            } //end of switch(nalType)
+            //case 48 Remove because not use more
+
+            //check marker bit
+            if ((HEADER[1] & 0x80) === 0x80) {
+                if (outputSize !== curSize) {
+                    outputSize = curSize;
+                    this.decoder.setOutputSize(outputSize);
+                }
+
+                var stepBufferSub = new Uint8Array(inputBuffer.subarray(0, inputLength));
+
+                if (this.videoBufferList !== null) {
+                    this.videoBufferList.push(stepBufferSub, width, height,
+                        'h265', (stepBufferSub[4] === 0x40) ? 'I' : 'P', timeData);
+                }
+                inputLength = 0;
+            }
+        },
+        findIFrame: function () {
+            if (this.videoBufferList !== null) {
+                var bufferNode = this.videoBufferList.findIFrame();
+                if (bufferNode === null || typeof bufferNode === "undefined") {
+                    return false;
+                } else {
+                    var data = {};
+                    this.setTimeStamp(bufferNode.timeStamp);
+                    data.frameData = this.decoder.decode(bufferNode.buffer);
+                    data.timeStamp = bufferNode.timeStamp;
+                    return data;
+                }
+            }
+        },
+        ntohl: function (buffer) {
+            return (((buffer[0] << 24) + (buffer[1] << 16) +
+                (buffer[2] << 8) + buffer[3]) >>> 0);
+        },
+        set rtpSessionCallback(func) {
+            this.rtpReturnCallback = func;
+        },
+    };
+
+    return new Constructor();
+};
+/* eslint-enable no-magic-numbers */

+ 563 - 0
public/static/h265/src/H265Session2.js

@@ -0,0 +1,563 @@
+function H265Session() {
+    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 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 = 'canvas';
+    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 lastTime =0;
+    let decoder = null;
+    function constructor() {
+
+    }
+
+    constructor.prototype = {
+        init() {
+            SPSParser = new H265SPSParser();
+            decoder = new H265Decoder();
+            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)  === 0x80,
+                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],
+            };
+            var HEADER = rtpHeader,
+                timeData = {
+                    'timestamp': null,
+                    'timezone': null,
+                };
+
+            if (rtspInterleaved[0] !== 0x24) {
+                console.log("H265Session::it is not valid interleave header (RTSP over TCP)");
+                return;
+            } else if ((rtpHeader[0] & 0x0F) === 0x0F) {
+                console.log("H265Session::There is additional CSRC which is not handled in this version");
+                return;
+            } else if ((rtpHeader[0] & 0x20) === 0x20) {
+                PaddingSize = rtpPayload[rtpPayload.length - 1];
+                console.log("H265Session::PaddingSize - " + PaddingSize);
+            }
+
+            //Extension bit check in RTPHeader
+            if ((rtpHeader[0] & 0x10) === 0x10) {
+                extensionHeaderLen = (((rtpPayload[2] << 8) | rtpPayload[3]) * 4) + 4;
+
+                //Playback check
+                if (rtpPayload[0] === 0xAB && rtpPayload[1] === 0xAD) {
+                    var startHeader = 4,
+                        NTPmsw = new Uint8Array(new ArrayBuffer(4)),
+                        NTPlsw = new Uint8Array(new ArrayBuffer(4)),
+                        gmt = new Uint8Array(new ArrayBuffer(2)),
+                        fsynctime = {
+                            'seconds': null,
+                            'useconds': null,
+                        },
+                        microseconds = null;
+
+                    NTPmsw.set(rtpPayload.subarray(startHeader, startHeader + 4), 0);
+                    startHeader += 4;
+
+                    NTPlsw.set(rtpPayload.subarray(startHeader, startHeader + 4), 0);
+                    startHeader += 6;
+
+                    gmt.set(rtpPayload.subarray(startHeader, startHeader + 2), 0);
+
+                    microseconds = (this.ntohl(NTPlsw) / 0xffffffff) * 1000;
+                    fsynctime.seconds = ((this.ntohl(NTPmsw) - 0x83AA7E80) >>> 0);
+                    fsynctime.useconds = microseconds;
+                    gmt = (((gmt[0] << 8) | gmt[1]) << 16) >> 16;
+
+                    timeData = {
+                        timestamp: fsynctime.seconds,
+                        timestamp_usec: fsynctime.useconds,
+                        timezone: gmt,
+                    };
+
+                }
+            }
+//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] >> 1) & 0x3f;
+            //console.log(PAYLOAD[0] + ' nalType: ' + nalType);
+
+//console.log('rtpPayload.length: ' + rtpPayload.length)
+//console.log(nalType, PAYLOAD[0])
+//console.log('nalType: ' + nalType, RtpHeader.M, rtpTimeStamp)
+            //console.log('nalType: ', nalType, ' timestamp: ', rtpTimeStamp);
+            switch (nalType) {
+                default:
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    break;
+                // Fragmentation unit(FU)
+                case 49:
+                    var startBit = ((PAYLOAD[2] & 0x80) === 0x80);
+                    var endBit = ((PAYLOAD[2] & 0x40) === 0x40);
+                    var fuType = PAYLOAD[2] & 0x3f;
+                    var payloadStartIndex = 3;
+
+                    if (startBit === true && endBit === false) {
+                        var newNalHeader = new Uint8Array(2);
+                        newNalHeader[0] = (PAYLOAD[0] & 0x81) | (fuType << 1);
+                        newNalHeader[1] = PAYLOAD[1];
+
+                        inputBuffer = setBuffer(inputBuffer, PREFIX);
+                        inputBuffer = setBuffer(inputBuffer, newNalHeader);
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    } else {
+                        inputBuffer = setBuffer(inputBuffer,
+                            PAYLOAD.subarray(payloadStartIndex, PAYLOAD.length));
+                    }
+                    break;
+                //SPS
+                case 33:
+                    SPSParser.parse(PAYLOAD);
+                    var resolution = SPSParser.getSizeInfo();
+                    curSize = resolution.width * resolution.height;
+
+                    inputBuffer = setBuffer(inputBuffer, PREFIX);
+                    inputBuffer = setBuffer(inputBuffer, PAYLOAD);
+                    width = resolution.width;
+                    height = resolution.height;
+                    break;
+            } //end of switch(nalType)
+
+            //console.log('ppsSegment: ', ppsSegment)
+            //console.log('nalType: ' + nalType);
+//console.log('M: ' + RtpHeader.M + ' ' + (rtpHeader[1] & 0x80))
+            //console.log(RtpHeader)
+
+            let inputBufferSub = inputBuffer.subarray(0, inputLength);
+            if (inputBufferSub[4] === 0x40) {
+                frameType = 'I';
+            } else {
+                frameType = 'P';
+            }
+
+//console.log('RtpHeader.M: ', RtpHeader.M)
+            //check marker bit
+            if (RtpHeader.M) {
+                // if (!firstIframe) {
+                //     inputLength = 0;
+                //     return;
+                // }
+                let inputBufferSub = inputBuffer.subarray(0, inputLength);
+
+                //只根据视频帧计算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;
+                    }
+                    //console.log('SEI', rtpTimeStamp, 'video', lastTimeStamp, lastTimeStamp+ RESETTIME * resetTimeCount - rtpTimeStamp)
+                    // //同一帧的SEI比视频发送快时
+                    // if(rtpTimeStamp - lastTimeStamp === 3600) {
+                    //     if(rtpTimeStamp === 0 ) {
+                    //         rtpTimeStamp = rtpTimeStamp + RESETTIME * (resetTimeCount + 1);
+                    //     } else {
+                    //         rtpTimeStamp = rtpTimeStamp + RESETTIME * resetTimeCount;
+                    //     }
+                    // }
+                }
+
+                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;
+                        //console.log('GET SEI', rtpTimeStamp)
+                        //SEI信息
+                        decodedData.SEIInfo = SEIInfo;
+
+                        if (!(rtpTimeStamp - lastTime)) {
+                            console.log('上个SET包时间和本次相等');
+                            console.log('lastTime: ', lastTime, ' rtpTimeStamp: ', rtpTimeStamp, RtpHeader.timeStamp, rtpHeader[4], rtpHeader[5], rtpHeader[6], rtpHeader[7])
+                        }
+                        if ((rtpTimeStamp - lastTime) !== 3600) {
+                            //console.log('SEI 时间差:', (rtpTimeStamp - lastTime), rtpTimeStamp, lastTime)
+                        }
+                        lastTime = rtpTimeStamp;
+                        SEIInfo = {
+                            ivs: null,
+                            timestamp: 0,
+                        };
+                    }
+                    SEIBuffer = null;
+                }
+
+                if(decodeMode === 'canvas' && (frameType !== 'SEI')) {
+                    if (outputSize !== curSize) {
+                        outputSize = curSize;
+                        decoder.setOutputSize(curSize);
+                    }
+                    decodedData.frameData = decoder.decode(inputBufferSub);
+                    decodedData.decodeMode = 'canvas';
+                    decodedData.timeStamp = rtpTimeStamp;
+                    decodedData.width = width;
+                    decodedData.height = height;
+                    this.handleDecodedData(decodedData)
+                } else {
+                    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);
+                    }
+
+                    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) {
+                            sample.frameDuration = Math.round(1000 / frameRate);
+                        }else {
+                            sample.frameDuration = (sample.frame_time_stamp - preSample.frame_time_stamp) / 90; // 时钟频率90000,timescale=1000
+                        }
+                    }
+                    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 = parseRect(data);
+            break;
+        case 1:
+            //console.log(parseBody(data))
+            result = parseBody(data);
+            break;
+        default:
+            result = null;
+            break;
+    }
+    return result;
+}
+
+function parseRect(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;
+}
+
+/**
+ * 将智能帧中的人体姿态点转化为树结构(双亲表示法)
+ * @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;
+}

+ 573 - 0
public/static/h265/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;

+ 413 - 0
public/static/h265/src/MediaSource.js

@@ -0,0 +1,413 @@
+
+
+function VideoMediaSource(element) {
+    let videoElement = null;
+    let codecInfo = null;
+
+    let mediaSource = null;
+    let sourceBuffer = null;
+
+    let initSegmentData = null;
+
+    let ctrlDelayFlag = false;
+    let delay = 1;
+    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)
+            }
+            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;
+            console.log(videoElement);
+            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) {
+            //console.log('end: ',sourceBuffer.buffered.end(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.1) {
+                    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.1 ) && diffTime >= DELAY) {
+                    //console.log('playbackRate:', 1, diffTime)
+                    videoElement.playbackRate = 1;
+                }
+                else if(diffTime < DELAY) {
+                    videoElement.playbackRate = 0.9;
+                }else {
+                    //console.log('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 = 20;
+        let bufferTime = 10;
+        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);
+            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;

+ 262 - 0
public/static/h265/src/ROIDrawer.js

@@ -0,0 +1,262 @@
+import Drawer from './drawer.js';
+
+class ROIDrawer extends Drawer {
+    constructor(canvas) {
+        super(canvas);
+        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', (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);
+        });
+        this.canvas.addEventListener('contextmenu', (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]);
+                    this.onDrawROIFinishedCallback && this.onDrawROIFinishedCallback();
+                    if(this.polygons.length < this.MAX_POLYGON) {
+                        this._resetPoints();
+                    } else {
+                        this._drawPolygons([]);
+                    }
+                }
+            }
+        });
+        this.canvas.addEventListener('mousemove', (event) => {
+            let pos = getMousePos(this.canvas, event);
+            //console.log('mousemove');
+            if (event.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) {
+        let data = [];
+        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;
+    }
+
+    _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();
+    }
+
+}
+
+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 default ROIDrawer;

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 165 - 0
public/static/h265/src/SuperRender_20.js


+ 250 - 0
public/static/h265/src/YUVPlayer.js

@@ -0,0 +1,250 @@
+import {BufferNode, BufferQueue, ImagePool} from './BufferNode.js';
+import YUVWebGLCanvas from './WebGLCanvas.js';
+
+let Uniformity = true;
+let channelId = 0;
+let canvas = null;
+let drawer = null;
+let preWidth = null;
+let preHeight = null;
+let drawingStrategy = null;
+let frameInterval = null;
+let prevCodecType = null;
+let resizeCallback = null;
+let startTimestamp = 0;
+let frameTimestamp = null;
+let preTimestamp = 0;
+let progressTime = 0;
+let curTime = 0;
+let imagePool = new ImagePool;
+let bufferNode = null;
+let fileName = "";
+let captureFlag = false;
+let isRendering = false;
+let defaultInterval = 16.7;
+let defaultMaxDelay = 20;
+let milisecond = 1e3;
+let maxDelay = null;
+
+let videoBufferQueue = null;
+
+let canvasElem = null;
+
+class VideoBufferNode extends BufferNode{
+    constructor(data, width, height, codecType, frameType, timeStamp){
+        super();
+        //console.log(data)
+        this.buffer = data;
+        this.width = width;
+        this.height = height;
+        this.codecType = codecType;
+        this.frameType = frameType;
+        this.timeStamp = timeStamp
+    }
+}
+
+class VideoBufferQueue extends BufferQueue{
+
+    constructor() {
+        super();
+        this.MAX_LENGTH = 30;
+    }
+
+    enqueue(data, width, height, codecType, frameType, timeStamp) {
+        //console.log(arguments)
+        if(this.size >= this.MAX_LENGTH) {
+            this.clear();
+        }
+        let node = new VideoBufferNode(data, width, height, codecType, frameType, timeStamp);
+        if (this.first === null) {
+            this.first = node
+        } else {
+            let tempNode = this.first;
+            while (tempNode.next !== null) {
+                tempNode = tempNode.next
+            }
+            tempNode.next = node
+        }
+        this.size += 1;
+        return node
+    }
+}
+
+class Size {
+    constructor(width, height) {
+        this.w = width;
+        this.h = height;
+    }
+
+    toString() {
+        return "(" + this.w + ", " + this.h + ")"
+    }
+
+    getHalfSize() {
+        return new Size(this.w >>> 1, this.h >>> 1)
+    }
+
+    length() {
+        return this.w * this.h
+    }
+}
+
+class YUVPlayer {
+    constructor(canvas){
+        drawingStrategy = "YUVWebGL";
+        prevCodecType = null;
+        videoBufferQueue = new VideoBufferQueue;
+        frameInterval = defaultInterval;
+        isRendering = false
+        canvasElem = canvas;
+    }
+
+    draw(data, width, height, codecType, frameType, timeStamp) {
+        if (videoBufferQueue !== null) {
+            videoBufferQueue.enqueue(data, width, height, codecType, frameType, timeStamp)
+        }
+    }
+
+    startRendering() {
+        if (startTimestamp === 0 && Uniformity !== false) {
+            isRendering = true;
+            window.requestAnimationFrame(drawingInTime)
+        }
+    }
+
+    stopRendering() {
+        isRendering = false;
+        startTimestamp = 0
+    }
+
+    setFPS(fps) {
+        if (typeof fps === "undefined") {
+            frameInterval = defaultInterval;
+            maxDelay = defaultMaxDelay
+        } else if (fps === 0) {
+            frameInterval = defaultInterval;
+            maxDelay = defaultMaxDelay
+        } else {
+            frameInterval = milisecond / fps;
+            maxDelay = fps * 1
+        }
+    }
+
+    terminate() {
+        startTimestamp = 0;
+        frameTimestamp = null;
+        if (videoBufferQueue !== null) {
+            videoBufferQueue.clear();
+            videoBufferQueue = null
+        }
+        drawer = null
+    }
+}
+
+function resize(width, height) {
+    let size = new Size(width, height);
+    canvas = canvasElem;
+    switch (drawingStrategy) {
+        case"YUVWebGL":
+            drawer = new YUVWebGLCanvas(canvas, size);
+            break;
+        default:
+            break
+    }
+}
+
+function drawFrame(stepValue) {
+
+    bufferNode = videoBufferQueue.dequeue();
+    if (bufferNode !== null && bufferNode.buffer !== null && (bufferNode.codecType === "mjpeg" || bufferNode.buffer.length > 0)) {
+        if (typeof preWidth === "undefined" || typeof preHeight === "undefined" || preWidth !== bufferNode.width || preHeight !== bufferNode.height || prevCodecType !== bufferNode.codecType) {
+            drawingStrategy = bufferNode.codecType === "h264" || bufferNode.codecType === "h265" ? "YUVWebGL" : "ImageWebGL";
+            resize(bufferNode.width, bufferNode.height);
+            preWidth = bufferNode.width;
+            preHeight = bufferNode.height;
+            prevCodecType = bufferNode.codecType;
+            if (typeof resizeCallback !== "undefined" && resizeCallback !== null) {
+                resizeCallback("resize")
+            }
+        }
+        frameTimestamp = bufferNode.timeStamp;
+        //workerManager.timeStamp(frameTimestamp);
+        if (typeof drawer !== "undefined") {
+            drawer.drawCanvas(bufferNode.buffer);
+            canvas.updatedCanvas = true;
+            // if (captureFlag) {
+            //     captureFlag = false;
+            //     doCapture(canvas.toDataURL(), fileName)
+            // }
+            if (bufferNode.codecType === "mjpeg") {
+                imagePool.free(bufferNode.buffer)
+            } else {
+                delete bufferNode.buffer;
+                bufferNode.buffer = null
+            }
+            bufferNode.previous = null;
+            bufferNode.next = null;
+            bufferNode = null;
+            return true
+        } else {
+            console.log("drawer is undefined in StreamDrawer!")
+        }
+    } else {
+    }
+    return false
+}
+
+function drawingInTime(timestamp) {
+    let stampCheckTime = 200;
+    if (isRendering === true) {
+        if (startTimestamp === 0 || timestamp - startTimestamp < stampCheckTime) {
+            if (startTimestamp === 0) {
+                startTimestamp = timestamp
+            }
+            if (videoBufferQueue !== null) {
+                window.requestAnimationFrame(drawingInTime)
+            }
+            return
+        }
+        curTime += timestamp - preTimestamp;
+        if (curTime > progressTime) {
+            if(drawFrame()) {
+                progressTime += frameInterval
+            }
+        }
+        if (curTime > milisecond) {
+            progressTime = 0;
+            curTime = 0
+        }
+        preTimestamp = timestamp;
+        window.requestAnimationFrame(drawingInTime)
+    }
+}
+
+function drawImage(data) {
+    if (typeof preWidth === "undefined" || typeof preHeight === "undefined" || preWidth !== data.width || preHeight !== data.height) {
+        drawingStrategy = "ImageWebGL";
+        resize(data.width, data.height);
+        preWidth = data.width;
+        preHeight = data.height;
+        resizeCallback("resize")
+    }
+    frameTimestamp = data.time;
+    if (frameTimestamp !== null) {
+        //workerManager.timeStamp(frameTimestamp)
+    }
+    if (typeof drawer !== "undefined") {
+        drawer.drawCanvas(data);
+        if (captureFlag) {
+            captureFlag = false;
+            //doCapture(canvas.toDataURL(), fileName)
+        }
+        imagePool.free(data);
+        return true
+    } else {
+        console.log("drawer is undefined in StreamDrawer!")
+    }
+    return false
+}
+
+export default YUVPlayer;

+ 98 - 0
public/static/h265/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;

+ 141 - 0
public/static/h265/src/ivsDrawer.js

@@ -0,0 +1,141 @@
+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;
+        data.map((content, k) => {
+            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':
+                    let {points, boundingBox, handsUp, boxConfidence} = content,
+                        length = points.length,
+                        undrawPoints = [],
+                        bodyLineWidth = boundingBox[2] > 2048 ? 6 : ( boundingBox[2] > 512 ? 4 : 2);
+                    //过滤掉置信点不够的情况
+                    let 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 = '#ff0000';
+                        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;
+                default:
+                    console.log('unknown ivs type: ', content.type);
+                    break;
+            }
+        });
+
+    }
+
+
+    _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;

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 19 - 0
public/static/h265/src/jsFFMPEG.js


+ 257 - 0
public/static/h265/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;
+}

+ 80 - 0
public/static/h265/src/player.js

@@ -0,0 +1,80 @@
+import WebSocketServer from './websocketServer.js';
+
+class Player {
+    constructor(option) {
+        this.ws = null;
+        this.options = option;
+        this.events = {
+            error: ()=>{}
+        };
+    }
+
+    init() {
+        //console.log('init');
+        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();
+        //console.log('close1')
+    }
+
+    /**
+     * 绘制额外信息
+     * @param obj
+     */
+    updateInfo(obj) {
+        this.ws.updateInfo(obj);
+    }
+
+    setROI(data) {
+        this.ws.setROI(data);
+    }
+
+    resetROI() {
+        this.ws.resetROI();
+    }
+
+    getROIData() {
+        return this.ws.getROIData();
+    }
+
+    setPolygonNum(num) {
+        return this.ws.setPolygonNum(num);
+    }
+
+    /**
+     * 自定义事件
+     * 目前支持如下事件
+     * [error] websocket连接失败
+     * [noStream] 收不到码流
+     * [canplay] 视频能够播放时触发
+     * [initialCompleted] 视频初始化完成, 首次canplay
+     * [ROIFinished] 手动绘制ROI完成时触发
+     *
+     * @param event 事件名
+     * @param callback 事件响应函数
+     */
+    on(event, callback) {
+        this.events[event] = callback;
+    }
+}
+
+export default Player;
+

+ 570 - 0
public/static/h265/src/util.js

@@ -0,0 +1,570 @@
+/* exported assert, isPowerOfTwo, text, nextHighestPowerOfTwo, Size, inherit, inheritObject, isApp, BrowserDetect, doCapture, base64ArrayBuffer, cloneArray  */
+/* global Uint8Array, saveAs */
+/* jshint bitwise: false */
+'use strict';
+
+
+function error(message) {
+    console.error(message);
+    console.trace();
+}
+
+function assert(condition, message) {
+    if (!condition) {
+        error(message);
+    }
+}
+
+function isPowerOfTwo(x) {
+    return (x & (x - 1)) === 0;
+}
+
+/**
+ * Joins a list of lines using a newline separator, not the fastest
+ * thing in the world but good enough for initialization code.
+ */
+function text(lines) {
+    return lines.join("\n");
+}
+
+/**
+ * Rounds up to the next highest power of two.
+ */
+function nextHighestPowerOfTwo(x) {
+    --x;
+    for (var i = 1; i < 32; i <<= 1) {
+        x = x | x >> i;
+    }
+    return x + 1;
+}
+
+/**
+ * Represents a 2-dimensional size value.
+ */
+function Size(width, height) {
+    function Constructor(width, height) {
+        Constructor.prototype.w = width;
+        Constructor.prototype.h = height;
+    }
+    Constructor.prototype = {
+        toString: function() {
+            return "(" + Constructor.prototype.w + ", " + Constructor.prototype.h + ")";
+        },
+        getHalfSize: function() {
+            return new Size(Constructor.prototype.w >>> 1, Constructor.prototype.h >>> 1);
+        },
+        length: function() {
+            return Constructor.prototype.w * Constructor.prototype.h;
+        }
+    };
+    return new Constructor(width, height);
+}
+
+/**
+ * Creates a new prototype object derived from another objects prototype along with a list of additional properties.
+ *
+ * @param base object whose prototype to use as the created prototype object's prototype
+ * @param properties additional properties to add to the created prototype object
+ */
+function inherit(base, properties) {
+    var prot = Object.create(base.prototype);
+    var keyList = Object.keys(properties);
+    for (var i = 0; i < keyList.length; i++) {
+        prot[keyList[i]] = properties[keyList[i]];
+    }
+    return prot;
+}
+
+function inheritObject(base, properties) {
+    var keyList = Object.keys(properties);
+    for (var i = 0; i < keyList.length; i++) {
+        base[keyList[i]] = properties[keyList[i]];
+    }
+    return base;
+}
+
+function isApp() {
+    var isApplication = false;
+    if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) {
+        isApplication = true;
+    }
+    return isApplication;
+}
+
+function BrowserDetect() {
+    var agent = navigator.userAgent.toLowerCase(),
+        name = navigator.appName,
+        browser = null;
+
+    if (name === 'Microsoft Internet Explorer' || agent.indexOf('trident') > -1 || agent.indexOf('edge/') > -1) {
+        browser = 'ie';
+        if (name === 'Microsoft Internet Explorer') { // IE old version (IE 10 or Lower)
+            agent = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(agent);
+            browser += parseInt(agent[1]);
+        } else { // IE 11+
+            if (agent.indexOf('trident') > -1) { // IE 11
+                browser += 11;
+            } else if (agent.indexOf('edge/') > -1) { // Edge
+                browser = 'edge';
+            }
+        }
+    } else if (agent.indexOf('safari') > -1) { // Chrome or Safari
+        if (agent.indexOf('chrome') > -1) { // Chrome
+            browser = 'chrome';
+        } else { // Safari
+            browser = 'safari';
+        }
+    } else if (agent.indexOf('firefox') > -1) { // Firefox
+        browser = 'firefox';
+    }
+
+    return browser;
+}
+
+function doCapture(data, filename) {
+    // var link = document.createElement('a');
+    var dataAtob = atob(data.substring("data:image/png;base64,".length));
+    var asArray = new Uint8Array(dataAtob.length);
+
+    for (var i = 0, len = dataAtob.length; i < len; ++i) {
+        asArray[i] = dataAtob.charCodeAt(i);
+    }
+
+    var blob = new Blob([asArray.buffer], {
+        type: "image/png"
+    });
+    saveAs(blob, filename + ".png");
+}
+
+var base64ArrayBuffer = function(arrayBuffer) {
+    var base64 = '';
+    var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+
+    var bytes = new Uint8Array(arrayBuffer);
+    var byteLength = bytes.byteLength;
+    var byteRemainder = byteLength % 3;
+    var mainLength = byteLength - byteRemainder;
+
+    var a = 0, b = 0, c = 0, d = 0;
+    var chunk = 0;
+
+    // Main loop deals with bytes in chunks of 3
+    for (var i = 0; i < mainLength; i = i + 3) {
+        // Combine the three bytes into a single integer
+        chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
+
+        // Use bitmasks to extract 6-bit segments from the triplet
+        a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
+        b = (chunk & 258048) >> 12; // 258048   = (2^6 - 1) << 12
+        c = (chunk & 4032) >> 6; // 4032     = (2^6 - 1) << 6
+        d = chunk & 63; // 63       = 2^6 - 1
+
+        // Convert the raw binary segments to the appropriate ASCII encoding
+        base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
+    }
+
+    // Deal with the remaining bytes and padding
+    if (byteRemainder === 1) {
+        chunk = bytes[mainLength];
+
+        a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
+
+        // Set the 4 least significant bits to zero
+        b = (chunk & 3) << 4; // 3   = 2^2 - 1
+
+        base64 += encodings[a] + encodings[b] + '==';
+    } else if (byteRemainder === 2) {
+        chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
+
+        a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
+        b = (chunk & 1008) >> 4; // 1008  = (2^6 - 1) << 4
+
+        // Set the 2 least significant bits to zero
+        c = (chunk & 15) << 2; // 15    = 2^4 - 1
+
+        base64 += encodings[a] + encodings[b] + encodings[c] + '=';
+    }
+
+    return base64;
+};
+
+function cloneArray(array) {
+    var bs = array.BYTES_PER_ELEMENT,
+        bo = array.byteOffset,
+        n = array.length;
+    return new array.constructor(array.buffer.slice(bo, bo + bs * n));
+}
+
+function BufferQueue() {
+    this.first = null;
+    this.size = 0;
+}
+
+function BufferNode(buffer) {
+    this.buffer = buffer; //new Uint8Array(buffer.length);
+    //    this.buffer.set(buffer, 0);
+    this.previous = null;
+    this.next = null;
+}
+
+BufferQueue.prototype.enqueue = function(buffer) {
+    var node = new BufferNode(buffer);
+    if (this.first === null) {
+        this.first = node;
+    } else {
+        var n = this.first;
+        while (n.next !== null) {
+            n = n.next;
+        }
+        n.next = node;
+    }
+
+    this.size += 1;
+    return node;
+};
+
+BufferQueue.prototype.dequeue = function() {
+    var temp = null;
+    if (this.first !== null) {
+        temp = this.first;
+        this.first = this.first.next;
+        this.size -= 1;
+    }
+
+    return temp;
+};
+
+BufferQueue.prototype.clear = function() {
+    console.log('BufferQueue clear!');
+    var temp = null;
+    while (this.first !== null) {
+        temp = this.first;
+        this.first = this.first.next;
+        this.size -= 1;
+        temp.buffer = null;
+        temp = null;
+    }
+
+    this.size = 0;
+    this.first = null;
+};
+
+function BufferList() {
+    this._length = 0;
+    this.head = null;
+    this.tail = null;
+    this.curIdx = 0;
+}
+
+BufferList.prototype.getCurIdx = function() {
+    return this.curIdx;
+};
+
+BufferList.prototype.push = function(buffer) {
+    var node = new BufferNode(buffer);
+
+    if (this._length > 0) {
+        this.tail.next = node;
+        node.previous = this.tail;
+        this.tail = node;
+    } else {
+        this.head = node;
+        this.tail = node;
+    }
+    this._length += 1;
+
+    return node;
+};
+
+BufferList.prototype.pop = function() {
+    var node = null;
+    if (this._length > 1) {
+        node = this.head;
+        this.head = this.head.next;
+        if (this.head !== null) {
+            this.head.previous = null;
+            // 2nd use-case: there is no second node
+        } else {
+            this.tail = null;
+        }
+        this._length -= 1;
+    }
+
+    return node;
+};
+
+BufferList.prototype.pushPop = function(buffer) {
+    var node = null;
+
+    if (buffer !== null) {
+        node = new BufferNode(buffer);
+        if (this._length > 0) {
+            this.tail.next = node;
+            node.previous = this.tail;
+            this.tail = node;
+        } else {
+            this.head = node;
+            this.tail = node;
+        }
+        this._length += 1;
+    } else {
+        if (this._length > 1) {
+            node = this.head;
+            this.head = this.head.next;
+            if (this.head !== null) {
+                this.head.previous = null;
+                // 2nd use-case: there is no second node
+            } else {
+                this.tail = null;
+            }
+            this._length -= 1;
+        }
+    }
+
+    return node;
+};
+
+BufferList.prototype.searchNodeAt = function(position) {
+    var currentNode = this.head,
+        length = this._length,
+        count = 1,
+        message = {
+            failure: 'Failure: non-existent node in this list.'
+        };
+
+    // 1st use-case: an invalid position
+    if (length === 0 || position < 1 || position > length) {
+        throw new Error(message.failure);
+    }
+
+    // 2nd use-case: a valid position
+    while (count < position) {
+        currentNode = currentNode.next;
+        count++;
+    }
+    this.curIdx = count;
+
+    // console.log('searchNodeAt curIdx ' + this.curIdx + ' count ' + count + ' _length ' + this._length);
+    return currentNode;
+};
+
+BufferList.prototype.clear = function() {
+    console.log('BufferList clear!');
+    var node = this.head;
+    var nodeToDelete = null;
+
+    while (node !== null) {
+        nodeToDelete = node;
+        node = node.next;
+        nodeToDelete.buffer = null;
+        nodeToDelete = null;
+    }
+
+    this._length = 0;
+    this.head = null;
+    this.tail = null;
+    this.curIdx = 0;
+};
+
+BufferList.prototype.remove = function(position) {
+    var currentNode = this.head,
+        length = this._length,
+        count = 1,
+        message = {
+            failure: 'Failure: non-existent node in this list.'
+        },
+        beforeNodeToDelete = null,
+        nodeToDelete = null,
+        afterNodeToDelete = null,
+        deletedNode = null;
+
+    // 1st use-case: an invalid position
+    if (length === 0 || position < 1 || position > length) {
+        throw new Error(message.failure);
+    }
+
+    // 2nd use-case: the first node is removed
+    if (position === 1) {
+        this.head = currentNode.next;
+
+        // 2nd use-case: there is a second node
+        if (!this.head) {
+            this.head.previous = null;
+            // 2nd use-case: there is no second node
+        } else {
+            this.tail = null;
+        }
+
+        // 3rd use-case: the last node is removed
+    } else if (position === this._length) {
+        this.tail = this.tail.previous;
+        this.tail.next = null;
+        // 4th use-case: a middle node is removed
+    } else {
+        while (count < position) {
+            currentNode = currentNode.next;
+            count++;
+        }
+
+        beforeNodeToDelete = currentNode.previous;
+        nodeToDelete = currentNode;
+        afterNodeToDelete = currentNode.next;
+
+        beforeNodeToDelete.next = afterNodeToDelete;
+        afterNodeToDelete.previous = beforeNodeToDelete;
+        deletedNode = nodeToDelete;
+        nodeToDelete = null;
+    }
+
+    this._length--;
+
+    return message.success;
+};
+
+BufferList.prototype.removeTillCurrent = function() {
+    var currentNode = null,
+        count = 1,
+        message = {
+            failure: 'Failure: non-existent node in this list.'
+        };
+
+    while (count < this.curIdx) {
+        currentNode = this.pop();
+        if (currentNode !== null) {
+            delete currentNode.buffer;
+            currentNode.buffer = null;
+            currentNode.previous = null;
+            currentNode.next = null;
+        }
+        count++;
+    }
+
+    // console.log('removeTillCurrent curIdx ' + this.curIdx + ' count ' + count + ' _length ' + this._length);
+};
+
+/**
+ * Create a new object pool of a certain class
+ */
+var BufferPool = function(size) {
+    // metrics for tracking internals
+    this.metrics = {};
+    this._clearMetrics();
+    // [private] the objpool stack
+    this._objpool = [];
+    this.bufferSize = size;
+};
+
+/**
+ * Allocate a new object from the pool
+ * @return the object
+ */
+BufferPool.prototype.alloc = function alloc() {
+    var obj = null;
+    if (this._objpool.length === 0) {
+        // nothing in the free list, so allocate a new object
+        obj = new Uint8Array(this.bufferSize);
+        this.metrics.totalalloc++;
+    } else {
+        // grab one from the top of the objpool
+        obj = this._objpool.pop();
+        this.metrics.totalfree--;
+    }
+    return obj;
+};
+
+/**
+ * Return an object to the object pool
+ */
+BufferPool.prototype.free = function(obj) {
+    // fix up the free list pointers
+    if (obj.length > 0) {
+        console.log('It is not zero length = ' + obj.length);
+    } else {
+        return;
+    }
+    this._objpool.push(obj);
+    this.metrics.totalfree++;
+};
+
+/**
+ * Allow collection of all objects in the pool
+ */
+BufferPool.prototype.collect = function(cls) {
+    // just forget the list and let the garbage collector reap them
+    this._objpool = []; // fresh and new
+    // but we might have allocated objects that are in use/not in
+    // the pool--track them in the metrics:
+    var inUse = this.metrics.totalalloc - this.metrics.totalfree;
+    this._clearMetrics(inUse);
+};
+
+/**
+ * [private] Clear internal metrics
+ */
+BufferPool.prototype._clearMetrics = function(allocated) {
+    this.metrics.totalalloc = allocated || 0;
+    this.metrics.totalfree = 0;
+};
+
+/**
+ * Create a new image pool of a certain class
+ */
+var ImagePool = function() {
+    // metrics for tracking internals
+    this.metrics = {};
+    this._clearMetrics();
+    // [private] the objpool stack
+    this._objpool = [];
+};
+
+/**
+ * Allocate a new object from the pool
+ * @return the object
+ */
+ImagePool.prototype.alloc = function alloc() {
+    var obj = null;
+    if (this._objpool.length === 0) {
+        // nothing in the free list, so allocate a new object
+        obj = new Image();
+        this.metrics.totalalloc++;
+    } else {
+        // grab one from the top of the objpool
+        obj = this._objpool.pop();
+        this.metrics.totalfree--;
+    }
+    return obj;
+};
+
+/**
+ * Return an object to the object pool
+ */
+ImagePool.prototype.free = function(obj) {
+    // fix up the free list pointers
+    if (obj.length > 0) {
+        console.log('It is not zero length = ' + obj.length);
+    } else {
+        return;
+    }
+    this._objpool.push(obj);
+    this.metrics.totalfree++;
+};
+
+/**
+ * Allow collection of all objects in the pool
+ */
+ImagePool.prototype.collect = function(cls) {
+    // just forget the list and let the garbage collector reap them
+    this._objpool = []; // fresh and new
+    // but we might have allocated objects that are in use/not in
+    // the pool--track them in the metrics:
+    var inUse = this.metrics.totalalloc - this.metrics.totalfree;
+    this._clearMetrics(inUse);
+};
+
+/**
+ * [private] Clear internal metrics
+ */
+ImagePool.prototype._clearMetrics = function(allocated) {
+    this.metrics.totalalloc = allocated || 0;
+    this.metrics.totalfree = 0;
+};

+ 156 - 0
public/static/h265/src/videoBuffer.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var VideoBufferNode = (function() {
+    function Constructor(data, width, height, codecType, frameType, timeStamp) {
+        BufferNode.call(this, data);
+        this.width = width;
+        this.height = height;
+        this.codecType = codecType;
+        this.frameType = frameType;
+        this.timeStamp = timeStamp;
+    }
+
+    return Constructor;
+})();
+
+function VideoBufferList() {
+    var MAX_LENGTH = 0,
+        BUFFERING = 0,
+        bufferFullCallback = null;
+
+    function Constructor() {
+        BufferList.call(this);
+        MAX_LENGTH = 360;
+        BUFFERING = 240;
+        bufferFullCallback = null;
+    }
+
+    Constructor.prototype = inherit(BufferList, {
+        push: function(data, width, height, codecType, frameType, timeStamp) {
+            var node = new VideoBufferNode(data, width, height, codecType, frameType, timeStamp);
+            if (this._length > 0) {
+                this.tail.next = node;
+                node.previous = this.tail;
+                this.tail = node;
+            } else {
+                this.head = node;
+                this.tail = node;
+            }
+            this._length += 1;
+
+            (bufferFullCallback !== null && this._length >= BUFFERING) ? bufferFullCallback(): 0; //PLAYBACK bufferFull
+            //      console.log("VideoBufferList after push node count is " + this._length + " frameType is " + frameType);
+
+            return node;
+        },
+        pop: function() {
+            //    console.log("before pop node count is " + this._length + " MINBUFFER is " + MINBUFFER);
+            var node = null;
+            if (this._length > 1) {
+                node = this.head;
+                this.head = this.head.next;
+                if (this.head !== null) {
+                    this.head.previous = null;
+                    // 2nd use-case: there is no second node
+                } else {
+                    this.tail = null;
+                }
+                this._length -= 1;
+            }
+            return node;
+        },
+        setMaxLength: function(length) {
+            MAX_LENGTH = length;
+            if (MAX_LENGTH > 360) {
+                MAX_LENGTH = 360;
+            } else if (MAX_LENGTH < 30) {
+                MAX_LENGTH = 30;
+            }
+        },
+        setBUFFERING: function(interval) {
+            BUFFERING = interval;
+            if (BUFFERING > 240) {
+                BUFFERING = 240;
+            } else if (BUFFERING < 6) {
+                BUFFERING = 6;
+            }
+        },
+        setBufferFullCallback: function(callback) {
+            bufferFullCallback = callback;
+            // console.log("setBufferFullCallback MAX_LENGTH is " + MAX_LENGTH );
+        },
+        searchTimestamp: function(frameTimestamp) {
+            //      console.log("searchTimestamp frameTimestamp = " + frameTimestamp.timestamp + " frameTimestamp usec = " + frameTimestamp.timestamp_usec);
+            var currentNode = this.head,
+                length = this._length,
+                count = 1,
+                message = {
+                    failure: 'Failure: non-existent node in this list.'
+                };
+
+            // 1st use-case: an invalid position
+            if (length === 0 || frameTimestamp <= 0 || currentNode === null) {
+                throw new Error(message.failure);
+            }
+
+            // 2nd use-case: a valid position
+            while (currentNode !== null &&
+            (currentNode.timeStamp.timestamp !== frameTimestamp.timestamp ||
+                currentNode.timeStamp.timestamp_usec !== frameTimestamp.timestamp_usec)) {
+                //        console.log("currentNode Timestamp = " + currentNode.timeStamp.timestamp + " Timestamp usec = " + currentNode.timeStamp.timestamp_usec);
+                currentNode = currentNode.next;
+                count++;
+            }
+
+            if (length < count) {
+                currentNode = null;
+            } else {
+                this.curIdx = count;
+                // console.log("searchTimestamp curIdx = " + this.curIdx + " currentNode.timeStamp.timestamp = " + currentNode.timeStamp.timestamp + " currentNode.timestamp_usec = " + currentNode.timeStamp.timestamp_usec + " frameTimestamp = " + frameTimestamp.timestamp + " frameTimestamp usec = " + frameTimestamp.timestamp_usec);
+            }
+
+            return currentNode;
+        },
+        findIFrame: function(isForward) {
+            var currentNode = this.head,
+                length = this._length,
+                count = 1,
+                message = {
+                    failure: 'Failure: non-existent node in this list.'
+                };
+
+            // 1st use-case: an invalid position
+            if (length === 0) {
+                throw new Error(message.failure);
+            }
+
+            // 2nd use-case: a valid position
+            while (count < this.curIdx) {
+                currentNode = currentNode.next;
+                count++;
+            }
+
+            if (isForward === true) {
+                while (currentNode.frameType !== "I") {
+                    currentNode = currentNode.next;
+                    count++;
+                }
+            } else {
+                while (currentNode.frameType !== "I") {
+                    currentNode = currentNode.previous;
+                    count--;
+                }
+            }
+
+            if (length < count) {
+                currentNode = null;
+            } else {
+                this.curIdx = count;
+                // console.log('findIFrame curIdx ' + this.curIdx + ' count ' + count + ' _length ' + this._length);
+            }
+
+            return currentNode;
+        }
+    });
+    return new Constructor();
+}

+ 128 - 0
public/static/h265/src/videoWorker.js

@@ -0,0 +1,128 @@
+importScripts(
+    './H264SPSParser.js',
+    './H264Session.js',
+
+    './H265SPSParser.js',
+    './H265Session2.js',
+    './H265.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);
+            break;
+        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(sdpInfo[i].codecName === 'H265') {
+            //console.log(sdpInfo)
+            rtpSession = new H265Session();
+            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') {
+
+        if(mediaData.SEIInfo !== null && mediaData.SEIInfo !== undefined) {//SEI信息
+            sendMessage('SEI', mediaData.SEIInfo);
+        } else if(mediaData.frameData !== null){
+            sendMessage('YUVData', mediaData);
+            sendMessage('videoTimeStamp', mediaData.timeStamp);
+        }
+        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);
+
+    }else 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;
+}

+ 653 - 0
public/static/h265/src/websocketServer.js

@@ -0,0 +1,653 @@
+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, drawer,wsUrl, rtspUrl, user, pwd} = {options}) {
+        videoElement = video;
+        canvasElement = canvas;
+        ROIElement = drawer;
+        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);
+        },
+        setROI(data) {
+            workerManager.setROI(data);
+        },
+        resetROI() {
+            workerManager.resetROI();
+        },
+        getROIData() {
+            return workerManager.getROIData();
+        },
+        setPolygonNum(num) {
+            return workerManager.setPolygonNum(num);
+        }
+    };
+
+
+
+    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"  ||rtspSDPData.Sessions[idx].CodecMime === "H265") { //暂时只支持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;

+ 566 - 0
public/static/h265/src/workerManager.js

@@ -0,0 +1,566 @@
+import VideoMediaSource from './MediaSource.js';
+import MP4Remux from './MP4Remux.js';
+import IvsDrawer from './ivsDrawer.js';
+import ROIDrawer from './ROIDrawer.js';
+
+let videoRenderer = null;
+
+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 lastTime = 0;
+    let onCanplayCallback = null;
+    let ROIdrawer = null;
+    let initialCompleted = false;
+    let onInitialCompletedCallback = null;
+    let SuperRender = null;
+    function constructor() {
+
+    }
+
+    constructor.prototype = {
+        init(video,canvas, ROI) {
+            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 = new ROIDrawer(ROI);
+
+            SuperRender = new SuperRender2('videoCanvas');
+
+            // videoRenderer = new YUVPlayer(canvasElement);
+            // videoRenderer.startRendering();
+        },
+
+        sendSdpInfo(SDPinfo) {
+            SDPInfo = SDPinfo;
+            console.log(SDPinfo)
+            let message = {
+                type: "sdpInfo",
+                data: {
+                    sdpInfo: SDPInfo
+                }
+            };
+            videoWorker.postMessage(message);
+        },
+
+        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":
+                case 'H265':
+                    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);
+            //}
+        },
+
+        resetROI() {
+            ROIdrawer && ROIdrawer.reset();
+        },
+
+        setROI(data) {
+            ROIdrawer && ROIdrawer.setROI(data);
+        },
+
+        getROIData() {
+            if(ROIdrawer) {
+                return ROIdrawer.getROIData();
+            }
+            return null;
+        },
+
+        setPolygonNum(num) {
+            ROIdrawer && ROIdrawer.setPolygonNum(num);
+        },
+
+        setEventCallBack(event, callback) {
+            switch (event) {
+                case 'canplay':
+                    onCanplayCallback = callback;
+                    break;
+                case 'initialCompleted':
+                    onInitialCompletedCallback = callback;
+                    break;
+                case 'ROIFinished':
+                    ROIdrawer.setROIFinishedCallback(callback);
+                    break;
+                default:
+                    break;
+            }
+        },
+
+        terminate() {
+            videoWorker.terminate();
+            ivsDrawer.terminate();
+            ROIdrawer.terminate();
+            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;
+                    }
+                });
+
+                elementResizeCallback(videoElement, ()=>{
+                    ivsDrawer.cover(videoElement);
+                    ROIdrawer.cover(videoElement);
+                    ROIdrawer.redrawROI();
+                });
+                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;
+
+//console.log(mediaInfo);
+                    mediaSegmentData = mp4Remux.mediaSegment(sequenseNum, mediaInfo, mediaFrameData);
+                    sequenseNum++;
+                    mediaSegNum = 0;
+                    mediaFrameData = null;
+                    mediaFrameSize = 0;
+
+                    if (videoMS !== null) {
+                        //console.log(mediaSegmentData)
+                        videoMS.setMediaSegment(mediaSegmentData)
+                    } else {
+
+                    }
+                }
+                break;
+            case 'YUVData'://FFMPEG解码的数据
+                //draw(videoMessage.data);
+                //yuv2canvas(videoMessage.data.data, videoMessage.data.width, videoMessage.data.height,canvasElement)
+               //setTimeout(()=> {
+                   var data = videoMessage.data.frameData.data;
+                   var width = videoMessage.data.frameData.width;
+                   var height = videoMessage.data.frameData.height;
+
+                var lumaSize = width * height;
+                var chromaSize = lumaSize >> 2;
+
+                    var ydata = new Uint8Array(data.subarray(0, lumaSize));
+                    var udata = new Uint8Array(data.subarray(lumaSize, lumaSize + chromaSize));
+                    var vdata = new Uint8Array(data.subarray(lumaSize + chromaSize, lumaSize + 2 * chromaSize));
+
+                   SuperRender.SR_DisplayFrameData(width, height, ydata, udata, vdata);
+                   drawIVS(videoMessage.data.timeStamp);
+               //}, 1000);
+
+                break;
+            //case 'YUVData'://FFMPEG解码的数据
+            //    //console.log(videoMessage.data)
+            //    drawCanvas(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 + 3600;//
+        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] < 3600) {
+                        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) > 3600)) {
+                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);
+}
+
+function drawCanvas(frameData) {
+    if (frameData !== null && videoRenderer !== null) {
+        //console.log(frameData)
+        videoRenderer.draw(frameData.data, frameData.width, frameData.height, frameData.codecType, frameData.frameType, frameData.timeStamp)
+
+    }
+}
+
+class IVSQueue {
+
+    constructor() {
+        this.list = [];
+    }
+
+    push(timestamp, ivs) {
+        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;

BIN
public/static/jinm/image/siagn.png


+ 236 - 0
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>

+ 387 - 0
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;

+ 667 - 0
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;
+}

+ 573 - 0
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;

+ 414 - 0
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;

+ 630 - 0
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};

+ 98 - 0
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;

+ 275 - 0
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;

+ 257 - 0
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;
+}

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 551 - 0
public/static/jinm/src/ml5.min.js


+ 125 - 0
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;
+

+ 108 - 0
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;
+}

+ 644 - 0
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;

+ 523 - 0
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;

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 0
public/vite.svg


+ 50 - 0
src/App.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { onMounted } from "vue";
+import utils from './utils/lib'
+import {getToken, removeToken} from './utils/auth'
+import { showNotify } from "vant";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+
+onMounted(() => {
+  utils.ConnectSocket()
+  utils.SockEventMap.__Error_Event__ = msg => {
+    showNotify({
+      message: msg,
+      type: 'danger',
+      duration: 2000
+    })
+  }
+  utils.SockEventMap.secrets = data => {
+    utils.EncryptHandler.setPublicKey(data.public)
+    utils.EncryptHandler.setPrivateKey(data.private)
+  }
+  utils.SockEventMap.tokenExpired = () => {
+    removeToken()
+    this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+  }
+  utils.SockEventMap.onePageOnly = () => {
+    showNotify({
+      message: '不支持页面多开',
+      type: 'warning',
+    })
+  }
+})
+
+// router.beforeEach((to, from, next) => {
+//   const hasToken = getToken()
+//   if (hasToken) {
+//     next()
+//   }else {
+//     next({ path: '/login', replace: true })
+//   }
+// })
+</script>
+
+<template>
+    <router-view></router-view>
+</template>
+
+<style scoped>
+</style>

BIN
src/assets/2222.jpg


+ 25 - 0
src/assets/api/home.js

@@ -0,0 +1,25 @@
+import utils from '../../utils/lib'
+
+const Query = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.queryResult = data => {
+      utils.SockEventMap.queryResult = undefined
+      resolve(data)
+    }
+    utils.SendWss('query', query)
+  })
+}
+const QueryDetail = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.detailResult = data => {
+      utils.SockEventMap.detailResult = undefined
+      resolve(data)
+    }
+    utils.SendWss('detail', query)
+  })
+}
+
+
+export default {
+  Query, QueryDetail,
+}

+ 75 - 0
src/assets/api/sub.js

@@ -0,0 +1,75 @@
+import utils from '../../utils/lib'
+
+const Query1 = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardQuerySelfRes = data => {
+      utils.SockEventMap.adminDashboardQuerySelfRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardQuerySelf', query)
+  })
+}
+
+const Query2 = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardRankDevicesRes = data => {
+      utils.SockEventMap.adminDashboardRankDevicesRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardRankDevices', query)
+  })
+}
+
+const Query2Detail = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardQueryDeviceRes = data => {
+      utils.SockEventMap.adminDashboardQueryDeviceRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardQueryDevice', query)
+  })
+}
+
+const Query3 = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardRankWinesRes = data => {
+      utils.SockEventMap.adminDashboardRankWinesRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardRankWines', query)
+  })
+}
+
+const Query3Detail = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardQueryWineRes = data => {
+      utils.SockEventMap.adminDashboardQueryWineRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardQueryWine', query)
+  })
+}
+
+const Query4 = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardRankWorkersRes = data => {
+      utils.SockEventMap.adminDashboardRankWorkersRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardRankWorkers', query)
+  })
+}
+
+const Query4Detail = query => {
+  return new Promise(resolve => {
+    utils.SockEventMap.adminDashboardQueryWorkerRes = data => {
+      utils.SockEventMap.adminDashboardQueryWorkerRes = undefined
+      resolve(data)
+    }
+    utils.SendWss('adminDashboardQueryWorker', query)
+  })
+}
+
+export default {
+  Query1, Query2, Query2Detail, Query3, Query3Detail, Query4, Query4Detail
+}

+ 40 - 0
src/assets/api/user.js

@@ -0,0 +1,40 @@
+import utils from '../../utils/lib'
+
+export function login(data) {
+  return new Promise((resolve, reject) => {
+    utils.SockEventMap.loginResult = res => {
+      utils.SockEventMap.loginResult = undefined
+      if (res.status) {
+        resolve(res.data)
+      } else {
+        reject(res.msg)
+      }
+    }
+    utils.SendWss('login', {
+      'account': data.account,
+      'password': utils.EncryptHandler.encrypt(data.password)
+    })
+  })
+}
+
+export function getInfo() {
+  return new Promise(resolve => {
+    utils.SockEventMap.userInfo = info => {
+      utils.SockEventMap.userInfo = undefined
+      resolve(info)
+    }
+    utils.SendWss('getUserInfo', null)
+  })
+}
+
+export function logout(token) {
+  return new Promise(resolve => {
+    utils.SockEventMap.logoutResult = () => {
+      utils.SockEventMap.logoutResult = undefined
+      resolve()
+    }
+    utils.SendWss('logout', token)
+  })
+}
+
+

BIN
src/assets/favicon.png


BIN
src/assets/ttf/Furore_2.otf


BIN
src/assets/ttf/biaoti.ttf


+ 8 - 0
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');
+}

+ 1 - 0
src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

+ 138 - 0
src/components/XImgUpload.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="x-upload">
+    <div class="upload-container">
+      <label class="upload-icon" for="upload-file">
+        <Plus></Plus>
+      </label>
+      <input
+        class="upload-input"
+        id="upload-file"
+        type="file"
+        accept="image/*"
+        @change="tirggerFile($event)"
+      />
+      <div v-if="imgSrc" class="upload-img">
+        <img :src="imgSrc" />
+        <div class="mask">
+          <CloseLittle size="20"  @click="deleteImgSrc"></CloseLittle>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Plus, CloseLittle } from '@nutui/icons-vue';
+import { showDialog } from "@nutui/nutui";
+
+
+export default {
+  name: "XImgUpload",
+  components: {
+    Plus,
+    CloseLittle
+  },
+  data() {
+    return {
+      imgFile: [],
+      imgSrc: "",
+    };
+  },
+  methods: {
+    tirggerFile(evnet) {
+      let isLt8M = evnet.target.files[0].size / 1024 / 1024 < 8;
+      if(!isLt8M) {
+        showDialog({
+          title: '温馨提示',
+          content: '图片大小不能大于8M',
+          noCancelBtn: true
+        })
+        return false;
+      }
+      this.imgFile = evnet.target.files;
+      let url = "";
+      //创建reader对象
+      let reader = new FileReader();
+      //传入文件 (参数必须是blob对象)
+      reader.readAsDataURL(this.imgFile[0]);
+      //加载完成
+      reader.onloadend = (event) => {
+        // url = reader
+        this.imgSrc = reader.result;
+      };
+      this.$emit('onImgChange', this.imgFile)
+    },
+    deleteImgSrc() {
+      (this.imgFile = []), (this.imgSrc = "");
+      this.$emit('onImgChange', this.imgFile)
+    },
+  },
+}
+</script>
+
+
+<style scoped>
+.x-upload {
+}
+.upload-container {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  border: 1px dashed;
+  border-radius: 5px;
+  color: #999;
+  cursor: pointer;
+  z-index: 1;
+}
+.upload-container:hover, .upload-container:active {
+  color: #3576ff;
+}
+.upload-icon {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.upload-input {
+  display: none !important;
+}
+
+.upload-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+.upload-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+  cursor: pointer;
+  z-index: 999;
+}
+.mask:hover {
+  opacity: 1;
+}
+
+
+</style>

+ 74 - 0
src/components/charts/ChartDevice.vue

@@ -0,0 +1,74 @@
+<template>
+  <div :id="'chart-device' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup name="ChartDevice">
+import { watch, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        unit: '',
+        list: []
+      }
+    }
+  }
+})
+const emit = defineEmits();
+let myChart = null
+watch(() => props.data.list, () => {
+  myChart.clear()
+  init()
+}, { deep: true })
+
+const init = () => {
+  let data = []
+  if(props.data.list.length > 0) {
+    props.data.list.forEach(item => {
+      item.value = item.total / 100
+      item.name = item.id
+    })
+    data = props.data.list
+  }
+  let options = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      left: 'center'
+    },
+    color: ['#EE752F', '#5894FF', '#F2BD42', '#72CDD7', '#60B565'],
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: '60%',
+        data: data
+      }
+    ]
+  }
+  myChart.setOption(options)
+  myChart.off('click')
+  myChart.on('click', function(params) {
+    emit('onClick', params.data)
+  })
+}
+
+onMounted(() => {
+  myChart = proxy.$echarts.init(document.getElementById('chart-device' + props.id))
+  init()
+})
+
+</script>
+
+<style scoped>
+
+</style>

+ 107 - 0
src/components/charts/ChartLine.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :id="'chart-line' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartLine"
+}
+</script>
+<script setup>
+import { watch, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        unit: '',
+        list: []
+      }
+    }
+  }
+})
+const emit = defineEmits();
+let myChart = null
+watch(() => props.data.list, () => {
+  myChart.clear()
+  init()
+}, { deep: true })
+
+const init = () => {
+  let data = []
+  let time = []
+  if(props.data.list.length > 0) {
+    props.data.list.forEach(item => {
+      time.push(item.time)
+      data.push(item.total / 100)
+    })
+  }
+  let options = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    color: ['#6BBEAE', '#1890FF'],
+    xAxis: {
+      type: 'category',
+      boundaryGap: true,
+      data: time,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#aaa'
+        }
+      },
+      axisLabel: {
+        color: '#aaa'
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '单位:元',
+        boundaryGap: [0, '100%'],
+        axisLine: { // y轴
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      {
+        name: `总收入`,
+        type: 'line',
+        // stack: 'Total',
+        data: data,
+        barWidth: 20,
+        tooltip: {
+          valueFormatter: function(value) {
+            return value + ' 元'
+          }
+        }
+      }
+    ]
+  }
+  myChart.setOption(options)
+}
+
+onMounted(() => {
+  myChart = proxy.$echarts.init(document.getElementById('chart-line' + props.id))
+  init()
+})
+</script>
+
+<style scoped>
+
+</style>

+ 73 - 0
src/components/charts/ChartPie.vue

@@ -0,0 +1,73 @@
+<template>
+  <div :id="'chart-pie' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup name="ChartPie">
+  import { watch, onMounted, getCurrentInstance } from "vue";
+
+  const { proxy } = getCurrentInstance()
+
+  const props = defineProps({
+    id: {
+      type: Number,
+      default: 0
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          unit: '',
+          list: []
+        }
+      }
+    }
+  })
+  const emit = defineEmits();
+  let myChart = null
+  watch(() => props.data.list, () => {
+    myChart.clear()
+    init()
+  })
+
+  const init = () => {
+    myChart = proxy.$echarts.init(document.getElementById('chart-pie' + props.id))
+    let data = []
+    if(props.data.list.length > 0) {
+      props.data.list.forEach(item => {
+        item.value = item.total / 100
+      })
+      data = props.data.list
+    }
+    let options = {
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        left: 'center'
+      },
+      color: ['#EE752F', '#5894FF', '#F2BD42', '#72CDD7', '#60B565'],
+      series: [
+        {
+          name: '',
+          type: 'pie',
+          radius: '60%',
+          data: data
+        }
+      ]
+    }
+    myChart.setOption(options)
+    myChart.off('click')
+    myChart.on('click', function(params) {
+      emit('onClick', params.data)
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
+
+</script>
+
+<style scoped>
+
+</style>

+ 77 - 0
src/components/charts/ChartWorker.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :id="'chart-worker' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartWorker"
+}
+</script>
+<script setup>
+import { watch, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        unit: '',
+        list: []
+      }
+    }
+  }
+})
+const emit = defineEmits();
+let myChart = null
+watch(() => props.data.list, () => {
+  myChart.clear()
+  init()
+}, { deep: true })
+
+const init = () => {
+  let data = []
+  if(props.data.list.length > 0) {
+    props.data.list.forEach(item => {
+      item.value = item.total
+    })
+    data = props.data.list
+  }
+  let options = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      left: 'center'
+    },
+    color: ['#EE752F', '#5894FF', '#F2BD42', '#72CDD7', '#60B565'],
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: '60%',
+        data: data
+      }
+    ]
+  }
+  myChart.setOption(options)
+  myChart.off('click')
+  myChart.on('click', function(params) {
+    emit('onClick', params.data)
+  })
+}
+
+onMounted(() => {
+  myChart = proxy.$echarts.init(document.getElementById('chart-worker' + props.id))
+  init()
+})
+</script>
+
+<style scoped>
+
+</style>

+ 107 - 0
src/components/charts/ChartWorkerLine.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :id="'chart-worker-line'" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartWorkerLine"
+}
+</script>
+<script setup>
+import { watch, onMounted, getCurrentInstance } from "vue";
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        unit: '',
+        list: []
+      }
+    }
+  }
+})
+const emit = defineEmits();
+let myChart = null
+watch(() => props.data.list, () => {
+  myChart.clear()
+  init()
+}, { deep: true })
+
+const init = () => {
+  let data = []
+  let time = []
+  if(props.data.list.length > 0) {
+    props.data.list.forEach(item => {
+      time.push(item.time)
+      data.push(item.total)
+    })
+  }
+  let options = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    color: ['#6BBEAE', '#1890FF'],
+    xAxis: {
+      type: 'category',
+      boundaryGap: true,
+      data: time,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#aaa'
+        }
+      },
+      axisLabel: {
+        color: '#aaa'
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '单位:次',
+        boundaryGap: [0, '100%'],
+        axisLine: { // y轴
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      {
+        name: `订单数`,
+        type: 'line',
+        // stack: 'Total',
+        data: data,
+        barWidth: 20,
+        tooltip: {
+          valueFormatter: function(value) {
+            return value + '次'
+          }
+        }
+      }
+    ]
+  }
+  myChart.setOption(options)
+}
+
+onMounted(() => {
+  myChart = proxy.$echarts.init(document.getElementById('chart-worker-line' + props.id))
+  init()
+})
+</script>
+
+<style scoped>
+
+</style>

+ 25 - 0
src/main.js

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import './style.css'
+import router from "./router";
+import { createPinia } from "pinia";
+import App from './App.vue'
+import NutUI from "@nutui/nutui";
+import { IconFont } from '@nutui/icons-vue';
+import "@nutui/nutui/dist/style.css";
+import VXETable from 'vxe-table';
+import 'vxe-table/lib/style.css';
+import * as echarts from 'echarts';
+import 'vant/lib/index.css';
+import infiniteScroll from 'vue3-infinite-scroll-better';
+import moment from 'moment';
+import './assets/ttf/font.css';
+
+const pinia = createPinia();
+
+const app = createApp(App);
+app.config.globalProperties.$echarts = echarts;
+app.config.globalProperties.$moment = moment;
+
+
+
+app.use(router).use(pinia).use(NutUI).use(IconFont).use(infiniteScroll).mount('#app')

+ 38 - 0
src/router/ChildrenRouters.js

@@ -0,0 +1,38 @@
+const ChildrenRoutes = [
+  /** 首页 **/
+  {
+    path: '/home',
+    name: 'Home',
+    component: () => import('../views/Home/Home.vue'),
+    meta: {
+      isBack: false,
+      isTab: true,
+      isHeader: false,
+      title: '订单'
+    }
+  },
+  {
+    path: '/detail',
+    name: 'Detail',
+    component: () => import('../views/Detail/Detail.vue'),
+    meta: {
+      isBack: true,
+      isTab: false,
+      isHeader: false,
+      title: '详情'
+    }
+  },
+  {
+    path: '/mine',
+    name: 'Mine',
+    component: () => import('../views/Mine/Mine.vue'),
+    meta: {
+      isBack: false,
+      isTab: true,
+      isHeader: false,
+      title: '我的'
+    }
+  }
+]
+
+export default ChildrenRoutes

+ 42 - 0
src/router/index.js

@@ -0,0 +1,42 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import ChildrenRoutes from "./ChildrenRouters";
+import { getToken } from "../utils/auth";
+
+let mainRouterChildren = [];
+
+mainRouterChildren = mainRouterChildren.concat(ChildrenRoutes)
+
+const routers = [
+  {
+    path: '/',
+    name: 'MainLayout',
+    redirect: '/home',
+    component: () => import('../views/MainLayout.vue'),
+    children: mainRouterChildren
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('../views/Login/Login.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: routers
+})
+
+
+router.beforeEach((to, from, next) => {
+  const hasToken = getToken()
+  if (hasToken) {
+    next()
+  } else {
+    if(to.path === '/login') {
+      next()
+    } else {
+      next({path: '/login', replace: true})
+    }
+  }
+})
+export default router

+ 36 - 0
src/store/index.js

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { getToken, setToken, removeToken, getFirst, setFirst } from '../utils/auth'
+import { login, getInfo, logout } from '../assets/api/user'
+
+
+export const useUsersStore = defineStore('users', {
+  state: () => {
+    return {
+      token: getToken(),
+      first: getFirst(),
+      avatar: '',
+      introduction: '',
+      id: '',
+      name: '',
+      order: 0,
+      income: 0,
+      roles: []
+    }
+  },
+  getters: {
+
+  },
+
+  actions: {
+    login({ commit }, userInfo) {
+      console.log(userInfo)
+      return new Promise((resolve, reject) => {
+        login(userInfo).then(data => {
+          commit('SET_TOKEN', data.token)
+          setToken(data.token)
+          resolve(data.super)
+        }).catch(err => reject(err))
+      })
+    },
+  }
+})

+ 48 - 0
src/style.css

@@ -0,0 +1,48 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  --nut-cell-desc-color: #497ff2;
+
+  color-scheme: light dark;
+  /* color: rgba(255, 255, 255, 0.87); */
+  background-color: #F4F4F4;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    /*font-family: 'Biao-ti';*/
+}
+
+#app {
+    /*font-family: 'Biao-ti';*/
+}
+
+.btn {
+    animation: throttle 1s step-end forwards;
+}
+.btn:active{
+    animation: none;
+}
+@keyframes throttle {
+    from {
+        pointer-events: none;
+    }
+    to {
+        pointer-events: all;
+    }
+}
+
+.unit_name_hidden {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

+ 41 - 0
src/utils/auth.js

@@ -0,0 +1,41 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'TokenZ'
+const FirstKey = 'NeedGide'
+const isSuper = 'isSuper'
+const name = 'userName';
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function getFirst() {
+  return Cookies.get(FirstKey) === undefined
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token, { expires: 30 })
+}
+
+export function setFirst() {
+  return Cookies.set(FirstKey, 'skip', { expires: 30 })
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+
+export function removeFirst() {
+  return Cookies.remove(FirstKey)
+}
+
+export function getIsSuper() {
+  return Cookies.get(isSuper)
+}
+
+export function setIsSuper(key) {
+  return Cookies.set(isSuper, key, { expires: 30 })
+}
+export function removeIsSuper() {
+  return Cookies.remove(isSuper)
+}

+ 115 - 0
src/utils/http.js

@@ -0,0 +1,115 @@
+import axios from "axios";
+import router from "../router";
+import { showToast  } from "@nutui/nutui";
+
+let axiosPromiseCancel = [];
+const CancelToken = axios.CancelToken;
+
+let toast = null
+
+let instance = axios.create({
+  timeout: 1000 * 60,
+  baseURL: 'https://img.ifarmcloud.com/guoweiApi/'
+})
+
+// 请求拦截器
+instance.interceptors.request.use(
+  config => {
+    if(config.url === '/send/play') {
+      toast = showToast.loading('数据获取中', { cover: true, duration: 0 });
+    }
+
+    const token = localStorage.getItem('gw_token');
+
+    token && (config.headers.accessToken = token)
+
+    config.cancelToken = new CancelToken((cancel) => {
+      axiosPromiseCancel.push(cancel);
+    });
+    let data = config.data || config.params || {}
+
+    const farmId = localStorage.getItem('gw_farmId')
+
+    farmId && ( data.farmId = farmId)
+
+    return config
+  },
+  error => Promise.error(error)
+)
+
+// 相应拦截器
+instance.interceptors.response.use(
+  response => {
+    if(toast) {
+      toast.hide();
+    }
+    toast = null;
+    return response.data
+    // const code = response.data.code;
+    // if(code === 10000) {
+    //   return response.data
+    // } else {
+    //   errorHandle(code, response.data.message)
+    // }
+  },
+  error => {
+    if(toast) {
+      toast.hide();
+    }
+    toast = null;
+    errorHandle(error.response.status)
+    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()
+      showToast.fail('登录令牌不存在,请登录');
+      break;
+    case 403:
+      toLogin();
+      cancel()
+      showToast.fail('登录令牌到期,即将重新登录');
+      localStorage.removeItem('gw_token');
+      localStorage.removeItem('gw_userName');
+      localStorage.removeItem('gw_userId');
+      localStorage.removeItem('gw_userInfo');
+      localStorage.removeItem('gw_farmId')
+      break;
+    case 500:
+      showToast.fail('500-服务器未知异常');
+      break;
+    default:
+      return;
+  }
+}
+
+export default instance
+
+

+ 21 - 0
src/utils/index.js

@@ -0,0 +1,21 @@
+// 时间格式化
+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 debounce (fn, interval) {
+  var timer;
+  var gapTime = interval || 1000;//间隔时间,如果interval不传,则默认1000ms
+  return function() {
+    clearTimeout(timer);
+    var context = this;
+    var args = arguments;//保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
+    timer = setTimeout(function() {
+      fn.call(context,args);
+    }, gapTime);
+  };
+}

+ 40 - 0
src/utils/lib.js

@@ -0,0 +1,40 @@
+import JSEncrypt from 'jsencrypt'
+import { getToken } from './auth'
+
+let socket = null
+let socketInterval = null
+const EncryptHandler = new JSEncrypt()
+const SockEventMap = { 'pon': undefined }
+
+// wss://wine.ifarmcloud.com/api/manager/socket, ws://192.168.1.6:3080/admin/manager
+const ServerPrefix = 'ws://192.168.1.6:3080/worker/socket'
+const SendWss = (event, data, ttl) => {
+  if (socket !== null) return socket.send(JSON.stringify({ event, data }))
+  if (ttl === undefined) ttl = 3
+  if (ttl > 0) setTimeout(() => SendWss(event, data, ttl - 1), 1000)
+}
+const ConnectSocket = () => {
+  const url = `${ServerPrefix}/${getToken()}`
+  socket = new WebSocket(url)
+  socket.onclose = () => {
+    socket = null
+    ConnectSocket()
+  }
+  socket.onopen = () => {
+    clearInterval(socketInterval)
+    socketInterval = setInterval(() => SendWss('pin', null), 50 * 1000)
+  }
+  socket.onmessage = event => {
+    const body = JSON.parse(event.data)
+    SockEventMap[body.event] && SockEventMap[body.event](body.data)
+  }
+}
+const CloseSocket = () => {
+  if (socket === null) return
+  socket.close()
+}
+
+export default {
+  EncryptHandler, SockEventMap,
+  ConnectSocket, SendWss, CloseSocket
+}

+ 188 - 0
src/views/Detail/Detail.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="box">
+    <nut-cell-group>
+      <nut-cell title="订单编号" :desc="data?.id"></nut-cell>
+      <nut-cell title="发布时间" :desc="data?.publish"></nut-cell>
+      <nut-cell title="设备编号" :desc="data?.device.id"></nut-cell>
+      <nut-cell title="设备地址" :desc="data?.device.addr"></nut-cell>
+      <nut-cell title="授权码" :desc="data?.code"></nut-cell>
+    </nut-cell-group>
+    <div class="title">具体要求</div>
+    <div class="table_header">
+      <div class="table_col">仓号</div>
+      <div class="table_col2">变更前(代码/名称/余量)</div>
+      <div class="table_col2">变更后(代码/名称/体积)</div>
+    </div>
+    <div class="table_content">
+      <div class="table_content1">1</div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.old[0]?.id}}</div>
+        <div class="table_last">{{data?.old[0]?.name}}</div>
+        <div class="table_last">{{data?.old[0]?.remain}}ml</div>
+      </div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.new[0]?.id}}</div>
+        <div class="table_last">{{data?.new[0]?.name}}</div>
+        <div class="table_last">{{data?.new[0]?.remain}}ml</div>
+      </div>
+    </div>
+    <div class="table_content">
+      <div class="table_content1">2</div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.old[1]?.id}}</div>
+        <div class="table_last">{{data?.old[1]?.name}}</div>
+        <div class="table_last">{{data?.old[1]?.remain}}ml</div>
+      </div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.new[1]?.id}}</div>
+        <div class="table_last">{{data?.new[1]?.name}}</div>
+        <div class="table_last">{{data?.new[1]?.remain}}ml</div>
+      </div>
+    </div>
+    <div class="table_content">
+      <div class="table_content1">3</div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.old[2]?.id}}</div>
+        <div class="table_last">{{data?.old[2]?.name}}</div>
+        <div class="table_last">{{data?.old[2]?.remain}}ml</div>
+      </div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.new[2]?.id}}</div>
+        <div class="table_last">{{data?.new[2]?.name}}</div>
+        <div class="table_last">{{data?.new[2]?.remain}}ml</div>
+      </div>
+    </div>
+    <div class="table_content">
+      <div class="table_content1">4</div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.old[3]?.id}}</div>
+        <div class="table_last">{{data?.old[3]?.name}}</div>
+        <div class="table_last">{{data?.old[3]?.remain}}ml</div>
+      </div>
+      <div class="table_content2">
+        <div class="table_last">{{data?.new[3]?.id}}</div>
+        <div class="table_last">{{data?.new[3]?.name}}</div>
+        <div class="table_last">{{data?.new[3]?.remain}}ml</div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "Detail"
+}
+</script>
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { useRoute } from 'vue-router'
+  import Api from '../../assets/api/home'
+
+  const route = useRoute();
+  const id = ref('');
+  const data = ref({})
+
+  const init = () => {
+    Api.QueryDetail(id.value).then(res => {
+      data.value = res.data
+    })
+  }
+
+  onMounted(() => {
+    id.value = Number(route.query.id)
+    init()
+  })
+</script>
+
+<style scoped>
+  .box {
+    box-sizing: border-box;
+    padding: 0 10px;
+  }
+  .title {
+    margin-top: 10px;
+    position: relative;
+    padding-left: 12px;
+    font-size: 14px;
+    line-height: 16px;
+    margin-bottom: 10px;
+  }
+  .title:before {
+    position: absolute;
+    width: 5px;
+    height: 100%;
+    background: #54BCBD;
+    top: 0;
+    left: 0;
+    content: ''
+  }
+  .table_header {
+    box-sizing: border-box;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #ddd;
+    background: #B4FDFF;
+    font-size: 14px;
+  }
+  .table_col {
+    flex: 1;
+    line-height: 30px;
+    height: 30px;
+    border-right: 1px solid #ddd;
+    box-sizing: border-box;
+  }
+  .table_col2 {
+    flex: 2;
+    height: 30px;
+    line-height: 30px;
+    box-sizing: border-box;
+    border-right: 1px solid #ddd;
+    font-size: 12px;
+  }
+  .table_col2:last-child{
+     border: 0;
+  }
+  .table_content {
+    width: 100%;
+    height: 90px;
+    border: 1px solid #ddd;
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    font-size: 14px;
+    border-top: 0;
+    text-align: center;
+  }
+  .table_content1 {
+    flex: 1;
+    height: 90px;
+    line-height: 90px;
+    box-sizing: border-box;
+    border-right: 1px solid #ddd;
+  }
+  .table_content2 {
+    flex: 2;
+    height: 90px;
+    box-sizing: border-box;
+    border-right: 1px solid #ddd;
+  }
+  .table_content2:last-child{
+    border: 0;
+  }
+  .table_last {
+    width: 100%;
+    height: 30px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #ddd;
+  }
+  .table_last:last-child{
+    border: 0;
+  }
+
+</style>

+ 100 - 0
src/views/Home/Home.vue

@@ -0,0 +1,100 @@
+<template>
+    <nut-searchbar v-model="code" placeholder="请输入设备地址、id" style="margin-bottom: 10px">
+      <template #rightout>
+        <nut-button type="info" size="small" @click="search">搜索</nut-button>
+      </template>
+    </nut-searchbar>
+    <div class="home">
+      <div class="home_box" v-for="item in list" :key="item.id" @click="jump(item)">
+        <nut-row :gutter="10">
+          <nut-col :span="24">订单号:<span class="blue">{{item.id}}</span></nut-col>
+          <nut-col :span="24">设备id:<span class="blue">{{item?.device.id}}</span></nut-col>
+          <nut-col :span="24">设备地址:<span class="blue">{{item?.device.addr}}</span></nut-col>
+          <nut-col :span="24">发布时间:<span class="blue">{{item.publish}}</span></nut-col>
+          <nut-col :span="24">订单状态:
+            <nut-tag type="warning" v-if="item.status === 0">待完成</nut-tag>
+            <nut-tag type="warning" v-else-if="item.status === 1">进行中</nut-tag>
+            <nut-tag type="success" v-else>已完成</nut-tag>
+          </nut-col>
+        </nut-row>
+      </div>
+    </div>
+    <div style="float: right;">
+      <nut-pagination v-model="pageNum" :total-items="total" :items-per-page="pageSize" @change="pageChange" />
+    </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { timeDate } from "../../utils";
+import Api from '../../assets/api/home'
+
+const router = useRouter();
+
+const code = ref('');
+const pageNum = ref(1);
+const pageSize = ref(10);
+const list = ref([]);
+const total = ref(0)
+const search = () => {
+  let params = {
+    cond: code.value,
+    status: -1,
+    page: pageNum.value,
+    limit: pageSize.value
+  }
+  Api.Query(params).then(res => {
+    list.value = res.data.list;
+    total.value = res.data.total;
+  })
+}
+
+const pageChange = (val) => {
+
+}
+
+const jump = (item) => {
+  router.push({
+    path: '/detail',
+    query: {
+      id: item.id
+    }
+  })
+}
+
+
+onMounted(() => {
+  search()
+})
+
+
+</script>
+<style scoped>
+:deep(.nut-cell) {
+  margin: 10px 0 0 0;
+}
+:deep(.nut-cell__value) {
+  flex: 2
+}
+.home {
+  box-sizing: border-box;
+  padding: 0 16px;
+  width: 100%;
+  height: calc(100% - 100px);
+  overflow: auto;
+  position: relative;
+}
+.home_box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px;
+  box-shadow: 0 1px 7px #edeef1;
+  margin-bottom: 10px;
+  background: #fff;
+  border-radius: 10px;
+  font-size: 14px;
+}
+.blue {
+  color: #0081FF;
+}
+</style>

+ 115 - 0
src/views/Login/Login.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="login_top"></div>
+    <div class="login_out">
+      <div class="login_logo"></div>
+    </div>
+    <div class="login_content">
+      <div class="">您好~</div>
+      <div style="margin-bottom: 20px">享受味蕾的盛宴 从一杯酒开始</div>
+      <div class="form_item">
+        <input class="form_input" v-model="accountName" type="text" placeholder="请输入登录名">
+      </div>
+      <div class="form_item">
+        <input class="form_input" v-model="password"  type="password" placeholder="请输入密码">
+      </div>
+      <div class="form_button">
+        <nut-button type="success" @click="submit" block>登录</nut-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login"
+}
+</script>
+<script setup>
+  import { ref } from 'vue';
+  import { useRouter } from "vue-router";
+  import { login } from '../../assets/api/user';
+  import utils from '../../utils/lib';
+  import { setToken, setIsSuper } from '../../utils/auth'
+  import { showToast } from "@nutui/nutui";
+
+
+  const router = useRouter();
+
+  const accountName = ref('');
+  const password = ref('');
+
+
+
+  const submit = () => {
+    let params = {
+      account: accountName.value,
+      password: password.value
+    }
+    login(params).then(res => {
+      setToken(res)
+      router.replace('/home')
+    })
+
+  }
+</script>
+
+<style scoped>
+  .login_top {
+    width: 100%;
+    height: 80px;
+  }
+  .login_out {
+    width: 100%;
+    height: 140px;
+    position: relative;
+  }
+  .login_logo {
+    width: 85px;
+    height: 78px;
+    /*background: url('https://dam.img.ifarmcloud.com:8030/images/tongwei/logo.png') no-repeat;*/
+    /*background-size: 100% 100%;*/
+    background: url("../../assets/favicon.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .login_content {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px;
+  }
+  .form_item {
+    width: 100%;
+    height: 54px;
+    background: #FFFFFF;
+    box-shadow: 0px 8px 30px 0px rgba(0,0,0,0.06);
+    border-radius: 15px;
+    box-sizing: border-box;
+    padding: 0 14px;
+    position: relative;
+    margin-bottom: 20px;
+  }
+
+  .form_input {
+    width: 100%;
+    height: 54px;
+    line-height: 54px;
+    font-size: 16px;
+    border: none;
+    background: none;
+    margin: 0;
+    padding: 0;
+  }
+  .form_input:focus {
+    outline: none;
+  }
+  .form_button {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 30px;
+  }
+</style>

+ 122 - 0
src/views/MainLayout.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div style="z-index: 999;" v-if="isHeader === false">
+      <nut-navbar :title="title" @on-click-back="back">
+        <template #left>
+          <div v-if="isBack">
+            <Left color="#000"></Left>
+          </div>
+        </template>
+      </nut-navbar>
+    </div>
+    <div :style="isTab ? defaultHeight : tabHeight " :class="['container', isTab ? 'container_bottom' : '']">
+      <router-view></router-view>
+    </div>
+    <div class="fixed_tabbar" v-if="isTab">
+      <van-tabbar v-model="activeName" @change="tabSwitch">
+        <van-tabbar-item v-if="supe" icon="home-o" name="Home">
+          首页
+        </van-tabbar-item>
+        <van-tabbar-item v-else icon="home-o" name="Sub">
+          首页
+        </van-tabbar-item>
+        <van-tabbar-item icon="friends-o" name="Mine">
+          我的
+        </van-tabbar-item>
+      </van-tabbar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MainLayout"
+}
+</script>
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import { Left } from '@nutui/icons-vue';
+import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem, NavBar as VanNavBar } from 'vant'
+import { getIsSuper } from "../utils/auth";
+
+
+const title = ref('');
+const isBack = ref(false);
+const isTab = ref(false);
+const isHeader = ref(false);
+const activeName = ref('');
+const route = useRoute();
+const router = useRouter()
+
+const supe = ref(Boolean(getIsSuper()))
+
+const back = () => {
+  if (isBack.value) {
+    router.back()
+  }
+}
+
+const h = ref(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
+
+const tabHeight = ref({
+  height: `calc(${h.value}px - 70px)`
+})
+
+
+const defaultHeight = ref({
+  height: `calc(${h.value}px - 100px)`
+})
+
+const tabSwitch = (index) => {
+  let url = '/' + index.toLowerCase();
+  router.replace(url);
+}
+
+onBeforeMount(() => {
+
+  let meta = route.meta;
+  isHeader.value = meta.isHeader ? true : false;
+  title.value = meta.title;
+  isBack.value = meta.isBack;
+  isTab.value = meta.isTab;
+  activeName.value = route.name;
+})
+
+onBeforeRouteUpdate((to, form, next) => {
+  title.value = to.meta.title;
+  isHeader.value = to.meta.isHeader ? true : false;
+  isBack.value = to.meta.isBack;
+  isTab.value = to.meta.isTab;
+  activeName.value = to.name;
+  next()
+})
+
+
+
+</script>
+
+<style scoped>
+.nut-navbar {
+  margin-bottom: 0;
+}
+.fixed_tabbar {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
+.container {
+  width: 100%;
+  box-sizing: border-box;
+  /* padding:0 10px; */
+  /*margin-bottom: 20px;*/
+  /*height: calc(100vh - 70px);*/
+  overflow: auto;
+  position: relative;
+}
+.container_bottom {
+  /*height: calc(100vh - 140px);*/
+  /*margin-bottom: 70px;*/
+}
+</style>

+ 97 - 0
src/views/Mine/Mine.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="user_content">
+    <div class="mine_content">
+      <div class="mine_icon">
+        <nut-avatar class="demo-avatar" icon="my" color="#fff" bg-color="#FA2C19"></nut-avatar>
+      </div>
+      <div class="mine_name">{{userName}}</div>
+    </div>
+    <div class="logout">
+      <nut-button type="info" block @click="logout">退出登录</nut-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Mine"
+}
+</script>
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { getInfo } from "../../assets/api/user";
+  import { removeToken, removeIsSuper } from "../../utils/auth";
+  import { useRouter } from "vue-router";
+
+  const userName = ref('');
+  const router = useRouter()
+
+  const init = () => {
+    getInfo().then(res => {
+      userName.value = res.name
+    })
+  }
+
+  const logout = () => {
+    removeToken()
+    router.replace('/login')
+    setTimeout(() => {
+      location.reload()
+    }, 500)
+  }
+
+  onMounted(() => {
+     init()
+  })
+
+</script>
+
+<style scoped>
+.user_content {
+  width: 100%;
+  height: 250px;
+  box-sizing: border-box;
+  padding: 10px 0;
+  /* background-color: #01C3F0; */
+  text-align: center;
+  background: #0081FF;
+  position: relative;
+}
+.mine_content {
+  margin-top: 50px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 25px 16px 22px 30px;
+  display: flex;
+  align-items: center;
+}
+.mine_icon {
+  width: 70px;
+  height: 70px;
+  margin-right: 60px;
+  margin-top: auto;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #fff;
+  /*display: flex;*/
+  /*align-items: center;*/
+  /*background: url('https://dam.img.ifarmcloud.com:8030/images/tongwei/mine_icon.png') no-repeat;*/
+  /*background-size: 100% 100%;*/
+}
+.mine_name {
+  font-size: 18px;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+
+.logout {
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 20px;
+  margin-top: 100px;
+  /*position: absolute;*/
+  /*left: 0;*/
+  /*bottom: 20px;*/
+}
+</style>

+ 12 - 0
vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: '8084'
+  }
+})

+ 601 - 0
yarn.lock

@@ -0,0 +1,601 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
+  version "7.22.5"
+  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.5.tgz"
+  integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
+
+"@esbuild/android-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd"
+  integrity sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==
+
+"@esbuild/android-arm@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.17.19.tgz#5898f7832c2298bc7d0ab53701c57beb74d78b4d"
+  integrity sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==
+
+"@esbuild/android-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.17.19.tgz#658368ef92067866d95fb268719f98f363d13ae1"
+  integrity sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==
+
+"@esbuild/darwin-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz#584c34c5991b95d4d48d333300b1a4e2ff7be276"
+  integrity sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==
+
+"@esbuild/darwin-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz#7751d236dfe6ce136cce343dce69f52d76b7f6cb"
+  integrity sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==
+
+"@esbuild/freebsd-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz#cacd171665dd1d500f45c167d50c6b7e539d5fd2"
+  integrity sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==
+
+"@esbuild/freebsd-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz#0769456eee2a08b8d925d7c00b79e861cb3162e4"
+  integrity sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==
+
+"@esbuild/linux-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz#38e162ecb723862c6be1c27d6389f48960b68edb"
+  integrity sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==
+
+"@esbuild/linux-arm@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz#1a2cd399c50040184a805174a6d89097d9d1559a"
+  integrity sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==
+
+"@esbuild/linux-ia32@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz#e28c25266b036ce1cabca3c30155222841dc035a"
+  integrity sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==
+
+"@esbuild/linux-loong64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz#0f887b8bb3f90658d1a0117283e55dbd4c9dcf72"
+  integrity sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==
+
+"@esbuild/linux-mips64el@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz#f5d2a0b8047ea9a5d9f592a178ea054053a70289"
+  integrity sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==
+
+"@esbuild/linux-ppc64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz#876590e3acbd9fa7f57a2c7d86f83717dbbac8c7"
+  integrity sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==
+
+"@esbuild/linux-riscv64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz#7f49373df463cd9f41dc34f9b2262d771688bf09"
+  integrity sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==
+
+"@esbuild/linux-s390x@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz#e2afd1afcaf63afe2c7d9ceacd28ec57c77f8829"
+  integrity sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==
+
+"@esbuild/linux-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz#8a0e9738b1635f0c53389e515ae83826dec22aa4"
+  integrity sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==
+
+"@esbuild/netbsd-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz#c29fb2453c6b7ddef9a35e2c18b37bda1ae5c462"
+  integrity sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==
+
+"@esbuild/openbsd-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz#95e75a391403cb10297280d524d66ce04c920691"
+  integrity sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==
+
+"@esbuild/sunos-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz#722eaf057b83c2575937d3ffe5aeb16540da7273"
+  integrity sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==
+
+"@esbuild/win32-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz#9aa9dc074399288bdcdd283443e9aeb6b9552b6f"
+  integrity sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==
+
+"@esbuild/win32-ia32@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz#95ad43c62ad62485e210f6299c7b2571e48d2b03"
+  integrity sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==
+
+"@esbuild/win32-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz"
+  integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
+
+"@jridgewell/sourcemap-codec@^1.4.13":
+  version "1.4.15"
+  resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@nutui/icons-vue@^0.0.26":
+  version "0.0.26"
+  resolved "https://registry.npmmirror.com/@nutui/icons-vue/-/icons-vue-0.0.26.tgz"
+  integrity sha512-BbTjfTshqszF7MpLarDldLLRs8f3xH6f/s+JB0METi09G78jJuQnZzGI7iEklWy7BS/ZFXud8S3a/1RAUbiKCA==
+
+"@nutui/icons-vue@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.npmmirror.com/@nutui/icons-vue/-/icons-vue-0.1.1.tgz"
+  integrity sha512-ekn6R9GNHWNUcV4pxdhQzrI1g1VhZ5zknklXoUJrCzt0RkRRLU0bUXX3ouWT0sl0U3MNJClnXAzZe7iPAvgPtw==
+
+"@nutui/nutui@^4.0.9":
+  version "4.0.10"
+  resolved "https://registry.npmmirror.com/@nutui/nutui/-/nutui-4.0.10.tgz"
+  integrity sha512-PN1X77FPNPN/UhyDimg3CFa+G/Us3KgdQ1Nt4yqc660G0/ebkYB26BNHToaiKzUoWk9nLBOO0E2grsPxBTPdDw==
+  dependencies:
+    "@nutui/icons-vue" "^0.1.1"
+    sass "^1.50.0"
+
+"@vant/popperjs@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz"
+  integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
+
+"@vant/use@^1.5.1":
+  version "1.5.2"
+  resolved "https://registry.npmmirror.com/@vant/use/-/use-1.5.2.tgz"
+  integrity sha512-CBK61iT568dCHUwFFsErGbW6/5tmrPnZJKGtcSy7Tjcrmws8Ku+YZo7IUFD9Xkj9MfSJ4pfhQ7pU2KouP5Cojg==
+
+"@vitejs/plugin-vue@^4.1.0":
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz"
+  integrity sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==
+
+"@vue/compiler-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz"
+  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
+  dependencies:
+    "@babel/parser" "^7.21.3"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz"
+  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
+  dependencies:
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/compiler-sfc@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz"
+  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/reactivity-transform" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+    postcss "^8.1.10"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz"
+  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
+"@vue/reactivity-transform@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz"
+  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+
+"@vue/reactivity@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz"
+  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+  dependencies:
+    "@vue/shared" "3.3.4"
+
+"@vue/runtime-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz"
+  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
+  dependencies:
+    "@vue/reactivity" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/runtime-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz"
+  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
+  dependencies:
+    "@vue/runtime-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    csstype "^3.1.1"
+
+"@vue/server-renderer@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz"
+  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/shared@3.3.4", "@vue/shared@^3.0.0":
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz"
+  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.4.0.tgz"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.3"
+  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+csstype@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+echarts@^5.4.2:
+  version "5.4.2"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz"
+  integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.3"
+
+esbuild@^0.17.5:
+  version "0.17.19"
+  resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.17.19.tgz"
+  integrity sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.17.19"
+    "@esbuild/android-arm64" "0.17.19"
+    "@esbuild/android-x64" "0.17.19"
+    "@esbuild/darwin-arm64" "0.17.19"
+    "@esbuild/darwin-x64" "0.17.19"
+    "@esbuild/freebsd-arm64" "0.17.19"
+    "@esbuild/freebsd-x64" "0.17.19"
+    "@esbuild/linux-arm" "0.17.19"
+    "@esbuild/linux-arm64" "0.17.19"
+    "@esbuild/linux-ia32" "0.17.19"
+    "@esbuild/linux-loong64" "0.17.19"
+    "@esbuild/linux-mips64el" "0.17.19"
+    "@esbuild/linux-ppc64" "0.17.19"
+    "@esbuild/linux-riscv64" "0.17.19"
+    "@esbuild/linux-s390x" "0.17.19"
+    "@esbuild/linux-x64" "0.17.19"
+    "@esbuild/netbsd-x64" "0.17.19"
+    "@esbuild/openbsd-x64" "0.17.19"
+    "@esbuild/sunos-x64" "0.17.19"
+    "@esbuild/win32-arm64" "0.17.19"
+    "@esbuild/win32-ia32" "0.17.19"
+    "@esbuild/win32-x64" "0.17.19"
+
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+immutable@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.0.tgz"
+  integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
+jsencrypt@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz"
+  integrity sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A==
+
+magic-string@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.0.tgz"
+  integrity sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pinia@^2.1.3:
+  version "2.1.4"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.1.4.tgz"
+  integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
+postcss@^8.1.10, postcss@^8.4.23:
+  version "8.4.24"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.24.tgz"
+  integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+rollup@^3.21.0:
+  version "3.25.2"
+  resolved "https://registry.npmmirror.com/rollup/-/rollup-3.25.2.tgz"
+  integrity sha512-VLnkxZMDr3jpxgtmS8pQZ0UvhslmF4ADq/9w4erkctbgjCqLW9oa89fJuXEs4ZmgyoF7Dm8rMDKSS5b5u2hHUg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+sass@^1.50.0:
+  version "1.63.6"
+  resolved "https://registry.npmmirror.com/sass/-/sass-1.63.6.tgz"
+  integrity sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
+vant@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npmmirror.com/vant/-/vant-4.6.0.tgz"
+  integrity sha512-MUwf/SLhI9FPRM12snI9CAUlowlS0LK3SquBZpEKbsIYijAZg0DfH1rAOnLfuQ3kgXCM8HnlCmeELaezT7X7nA==
+  dependencies:
+    "@vant/popperjs" "^1.3.0"
+    "@vant/use" "^1.5.1"
+    "@vue/shared" "^3.0.0"
+
+vite@^4.3.9:
+  version "4.3.9"
+  resolved "https://registry.npmmirror.com/vite/-/vite-4.3.9.tgz"
+  integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
+  dependencies:
+    esbuild "^0.17.5"
+    postcss "^8.4.23"
+    rollup "^3.21.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+vue-demi@>=0.14.5:
+  version "0.14.5"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz"
+  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
+
+vue-router@4:
+  version "4.2.2"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.2.tgz"
+  integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+
+vue3-infinite-scroll-better@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/vue3-infinite-scroll-better/-/vue3-infinite-scroll-better-2.2.0.tgz"
+  integrity sha512-tIqY7Ab0Hu9j7SiLLNn9jUR2te2THvfVrDvdOfilx/Qk84mc3YS8rjxMNYM5OAlv7Wk92u2HD3rRqx892JafdA==
+
+vue@^3.2.47:
+  version "3.3.4"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz"
+  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-sfc" "3.3.4"
+    "@vue/runtime-dom" "3.3.4"
+    "@vue/server-renderer" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+vxe-table@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.4.2.tgz"
+  integrity sha512-3UdfSeMZ/D5nfTohcnZQQ2gkFZnhvf0v83usOCwx3B1nzBNKAJumg3QviMEox5SdikT8pq9z4vz3a0pesPPrJw==
+
+xe-utils@^3.5.11:
+  version "3.5.11"
+  resolved "https://registry.npmmirror.com/xe-utils/-/xe-utils-3.5.11.tgz"
+  integrity sha512-lyKc/lTBga1Zb63p+FED8mtxLnYIjSS8PVJM1N64NGdCu/3d1XubaVeke2p91RHssP0ExVAl2LUqZYperoz76Q==
+
+zrender@5.4.3:
+  version "5.4.3"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz"
+  integrity sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==
+  dependencies:
+    tslib "2.3.0"