xjzh-component 0.1.1 → 0.1.3

package/dist/xjzh-component.common.906.js

@@ -6,6 +6,7 @@ self.onmessage = function (event) {
   } = event.data;
   let cameraNum = 0;
   let ws = new WebSocket(url);
+  console.log('object :>> ws', ws);
   // socket 连接
   ws.onopen = function () {
     self.postMessage({
@@ -16,6 +17,7 @@ self.onmessage = function (event) {
   ws.onmessage = async function ({
     data
   }) {
+    console.log('object :>> ws - data', data);
     if (data.size == 1) {
       // 摄像头数量  || 是否开启人脸
       cameraNum = await self.convertBlobToNumber(data);

package/dist/xjzh-component.common.js

@@ -112,27 +112,6 @@ module.exports = {
 module.exports = {};
 
 
-/***/ }),
-
-/***/ 479:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1601);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
-// Imports
-
-
-var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, ".video-canvas[data-v-50940904]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:16px}.video-canvas .itemBox[data-v-50940904]{border-radius:4px;transform:translateZ(0);margin-bottom:11px;position:relative;overflow:hidden}.video-canvas canvas[data-v-50940904]{margin:0;padding:0;width:100%;height:100%;will-change:transform;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.video-canvas .full-screen[data-v-50940904]{width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}", ""]);
-// Exports
-/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
-
-
 /***/ }),
 
 /***/ 616:
@@ -497,22 +476,6 @@ module.exports = function (it) {
 };
 
 
-/***/ }),
-
-/***/ 4185:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(479);
-if(content.__esModule) content = content.default;
-if(typeof content === 'string') content = [[module.id, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = (__webpack_require__(9548)/* ["default"] */ .A)
-var update = add("1237ea75", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 4270:
@@ -645,6 +608,27 @@ if (params + '' !== 'a=2') {
 }
 
 
+/***/ }),
+
+/***/ 4633:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1601);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".xjzh-img-canvas[data-v-450f21fe]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-450f21fe]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-450f21fe]{width:30px;height:30px;padding:0;margin:0;font-size:20px;border-radius:50%;text-align:center;line-height:30px;position:absolute;left:10px;top:10px;z-index:999;background-color:#fff;color:#0076f6}.xjzh-img-canvas .itemBox canvas[data-v-450f21fe]{margin:0;padding:0;width:100%;height:100%;will-change:transform;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.xjzh-img-canvas .itemBox[data-v-450f21fe]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-450f21fe]{width:100%!important;height:100%!important;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 4901:
@@ -1034,6 +1018,22 @@ module.exports = function (bitmap, value) {
 };
 
 
+/***/ }),
+
+/***/ 7011:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(4633);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(9548)/* ["default"] */ .A)
+var update = add("ab4a675a", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 7040:
@@ -1845,12 +1845,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoCanvas.vue?vue&type=template&id=50940904&scoped=true
+;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/xjzhImgCanvas.vue?vue&type=template&id=450f21fe&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
-    staticClass: "video-canvas"
+    staticClass: "xjzh-img-canvas"
   }, _vm._l(_vm.cameraObj, function (item, index) {
     return _c('div', {
       key: index,
@@ -1886,15 +1886,15 @@ var web_url_search_params_delete = __webpack_require__(4603);
 var web_url_search_params_has = __webpack_require__(7566);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.url-search-params.size.js
 var web_url_search_params_size = __webpack_require__(8721);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoCanvas.vue?vue&type=script&lang=js
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/xjzhImgCanvas.vue?vue&type=script&lang=js
 
 
 
 
 
 
-/* harmony default export */ var videoCanvasvue_type_script_lang_js = ({
-  name: "VideoCanvas",
+/* harmony default export */ var xjzhImgCanvasvue_type_script_lang_js = ({
+  name: "XjzhImgCanvas",
   props: {
     videoUrl: {
       type: String,
@@ -1902,11 +1902,11 @@ var web_url_search_params_size = __webpack_require__(8721);
     },
     width: {
       type: String,
-      default: '640px'
+      default: '480px'
     },
     height: {
       type: String,
-      default: '360px'
+      default: '270px'
     },
     showTitle: {
       type: Boolean,
@@ -1915,15 +1915,15 @@ var web_url_search_params_size = __webpack_require__(8721);
     isSwitchSide: {
       type: Boolean,
       default: false
+    },
+    canvasSize: {
+      type: Array,
+      default: () => {
+        return [1920, 1080];
+      }
     }
   },
   watch: {
-    videoUrl: {
-      handler(val) {
-        console.log('object :>> ', val);
-        this.initWorker();
-      }
-    },
     isSwitchSide: {
       handler(val) {
         console.log('object :>> ', val);
@@ -1947,36 +1947,41 @@ var web_url_search_params_size = __webpack_require__(8721);
       currentFullScreen: '',
       answerPhoto: {
         canvas: null,
-        context: null,
-        isPhoto: false
+        ctx: null,
+        isPhoto: false,
+        canvasSize: [1920, 1080]
       },
-      canvasSize: [1920, 1080]
+      cameraObj: null
     };
   },
-  mounted() {},
+  mounted() {
+    this.initWorker();
+  },
   methods: {
     initAnswerPhoto() {
       this.answerPhoto.canvas = document.createElement('canvas');
-      this.answerPhoto.context = this.answerPhoto.canvas.getContext('2d');
+      this.answerPhoto.ctx = this.answerPhoto.canvas.getContext('2d');
       this.answerPhoto.canvas.width = this.canvasSize[0] * this.cameraNum;
       this.answerPhoto.canvas.height = this.canvasSize[1];
     },
     initCanvas() {
       for (let i = 0; i < this.cameraNum; i++) {
         let type = this.cameraType[i].value;
-        this.cameraObj[type].canvas = document.getElementById(this.cameraObj[type].domeId);
-        this.cameraObj[type].content = this.cameraObj[type].canvas.getContext('2d');
+        this.cameraObj[type].canvas = this.$refs[this.cameraObj[type].domeId][0];
+        this.cameraObj[type].ctx = this.cameraObj[type].canvas.getContext('2d');
         this.cameraObj[type].canvas.width = this.canvasSize[0];
         this.cameraObj[type].canvas.height = this.canvasSize[1];
         this.cameraObj[type].imgBox = new Image();
-        this.cameraObj[type].videoUrl = '';
       }
     },
     initWorker() {
       const url = `ws://${this.videoUrl}/socket`;
       let count = 0;
       this.destroyWorker();
+      this.destroyCanvasData();
+      console.log('object :>> url', url);
       this.worker = new Worker(new URL(/* worker import */ __webpack_require__.p + __webpack_require__.u(906), __webpack_require__.b));
+      console.log('object :>> this.worker', this.worker);
       this.worker.onmessage = async event => {
         const {
           type,
@@ -1988,35 +1993,43 @@ var web_url_search_params_size = __webpack_require__(8721);
         if (type === 'message') {
           if (typeof data === 'number') {
             this.cameraNum = data;
-            localStorage.setItem('cameraNum', this.cameraNum);
             for (let i = 0; i < this.cameraNum; i++) {
-              this.cameraObj[this.cameraType[i].value] = {
-                domeId: `canvas_${this.cameraType[i].value}`,
+              let typeVal = this.cameraType[i].value;
+              this.cameraObj[typeVal] = {
+                domeId: `canvas_${typeVal}`,
+                title: this.cameraType[i].label,
+                // 摄像头名称
                 canvas: null,
-                content: null,
-                videoUrl: '',
+                ctx: null,
                 totalFPS: 0,
+                // 单个摄像头 - 收到总帧数
                 showTotalFPS: 0,
-                frameSkip: 1,
+                // 单个摄像头 - 渲染总帧数
+                frameSkip: 0,
+                // 单个摄像头 - 跳帧 1（30），2（15），3（10）
+
                 imgBox: null,
+                allUrl: [],
+                // 所有图片地址
                 isLoading: false,
-                isFullScreen: false,
-                title: this.cameraType[i].label
+                // 图片是否加载完
+                isFullScreen: false // 画面是否全屏
               };
             }
+            this.$forceUpdate();
+            // 根据摄像头数量，初始化画布
             this.$nextTick(() => {
               this.initAnswerPhoto();
               this.initCanvas();
             });
             return;
           }
+
+          // 摄像头画面渲染
           count++;
           this.showCanvas(this.cameraType[count - 1].value, data);
           count = count >= this.cameraNum ? 0 : count;
         }
-        if (type === 'message') {
-          console.log('WebSocket open:');
-        }
         if (type === 'close') {
           console.log('WebSocket closed:', wsEvent);
         }
@@ -2040,61 +2053,110 @@ var web_url_search_params_size = __webpack_require__(8721);
         this.worker = null;
       }
     },
-    showVideoCanvas(type, blod) {
-      // 当其中一个全屏时，其它画面不做渲染操作,并且清理其他缓存
+    showCanvas(type, blod) {
+      this.cameraObj[type].totalFPS++;
+      if (!this.cameraObj[type] || !this.cameraObj[type].imgBox || !this.cameraObj[type].ctx) {
+        return;
+      }
       if (this.currentFullScreen && this.currentFullScreen !== type) {
-        if (this.cameraObj[type].videoUrl) {
-          URL.revokeObjectURL(this.cameraObj[type].videoUrl);
-          this.cameraObj[type].videoUrl = '';
-        }
+        this.destroyUrl(type);
         return;
       }
       if (this.cameraObj[type].isLoading) return;
-      this.cameraObj[type].videoUrl = URL.createObjectURL(blod);
       this.cameraObj[type].isLoading = true;
-      this.cameraObj[type].imgBox.src = this.cameraObj[type].videoUrl;
+      this.cameraObj[type].allUrl.unshift(URL.createObjectURL(blod));
+      this.cameraObj[type].imgBox.src = this.cameraObj[type].allUrl[0];
       this.cameraObj[type].imgBox.onload = () => {
+        if (!this.cameraObj[type].ctx) return;
+        this.cameraObj[type].ctx.drawImage(this.cameraObj[type].imgBox, 0, 0, this.canvasSize[0], this.canvasSize[1]);
         this.cameraObj[type].isLoading = false;
-        this.cameraObj[type].content.drawImage(this.cameraObj[type].imgBox, 0, 0, this.canvasSize[0], this.canvasSize[1]);
-        if (this.cameraObj[type].videoUrl) {
-          URL.revokeObjectURL(this.cameraObj[type].videoUrl);
-          this.cameraObj[type].videoUrl = '';
+        if (this.answerPhoto.isPhoto) {
+          // 拍照使用
+          if (this.cameraNum > 0) {
+            this.answerPhoto.ctx.drawImage(this.cameraObj.main.imgBox, this.answerPhoto.canvasSize[0] * 0, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+          }
+          if (this.cameraNum > 1) {
+            this.answerPhoto.ctx.drawImage(this.cameraObj.sub.imgBox, this.answerPhoto.canvasSize[0] * 1, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+          }
+          if (this.cameraNum > 2) {
+            this.answerPhoto.ctx.drawImage(this.cameraObj.side.imgBox, this.answerPhoto.canvasSize[0] * 2, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+          }
+          return;
         }
+        // 清除内存
+        this.cameraObj[type].imgBox.src = '';
+        this.destroyUrl(type, this.cameraObj[type].maxUrlNum);
       };
       this.cameraObj[type].imgBox.onerror = () => {
         this.cameraObj[type].isLoading = false;
-        // 清除内存
-        if (this.cameraObj[type].videoUrl) {
-          URL.revokeObjectURL(this.cameraObj[type].videoUrl);
-          this.cameraObj[type].videoUrl = '';
-        }
+        if (!this.cameraObj[type] || !this.cameraObj[type].imgBox) return;
+        this.cameraObj[type].imgBox.src = '';
+        this.destroyUrl(type, this.cameraObj[type].maxUrlNum);
       };
     },
-    AllPhoto() {
-      let type = this.cameraType[this.cameraNum - 1].value;
-      this.videoObj.videoSrc = this.cameraObj[type].canvas.toDataURL('image/jpeg');
-      return this.videoObj.videoSrc;
+    handleScreen(type) {
+      this.$set(this.cameraObj[type], 'isFullScreen', !this.cameraObj[type].isFullScreen);
+      this.currentFullScreen = this.cameraObj[type].isFullScreen ? type : '';
+      this.$forceUpdate();
     },
+    destroyCanvasData() {
+      for (let i = 0; i < this.cameraNum; i++) {
+        let type = this.cameraType[i].value;
+        this.destroyUrl(type);
+        this.destroyCanvas(type);
+      }
+    },
+    destroyUrl(type) {
+      for (let i = 0; i < this.cameraObj[type].allUrl.length; i++) {
+        URL.revokeObjectURL(this.cameraObj[type].allUrl[i]);
+        delete this.cameraObj[type].allUrl[i];
+      }
+      this.cameraObj[type].allUrl = [];
+    },
+    destroyCanvas(type) {
+      if (!this.cameraObj[type]) return;
+      for (let key in this.cameraObj[type]) {
+        if (typeof this.cameraObj[type][key] == 'object') {
+          this.cameraObj[type][key] = '';
+        }
+        delete this.cameraObj[type][key];
+      }
+    },
+    // 所有摄像头横向照片
+    allPhoto() {
+      this.answerPhoto.isPhoto = true;
+      let startTime = new Date().getTime();
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(this.answerPhoto.canvas.toDataURL('image/jpeg'));
+          let endTime = new Date().getTime();
+          let second = (endTime - startTime) / 1000;
+          this.cameraObj.main.totalFPS = this.cameraObj.main.totalFPS + ~~(second * 30);
+          this.cameraObj.sub.totalFPS = this.cameraObj.sub.totalFPS + ~~(second * 30);
+          this.cameraObj.side.totalFPS = this.cameraObj.side.totalFPS + ~~(second * 30);
+          this.answerPhoto.isPhoto = false;
+        }, 200);
+      });
+    },
+    // 单个摄像头照片
     selectPhoto(num) {
       let type = this.cameraType[num - 1].value;
       this.videoObj.videoMergeSrc = this.cameraObj[type].canvas.toDataURL('image/jpeg');
       return this.videoObj.videoMergeSrc;
-    },
-    handleScreen(type) {
-      this.$set(this.cameraObj[type], 'isFullScreen', !this.cameraObj[type].isFullScreen);
-      this.currentFullScreen = this.cameraObj[type].isFullScreen ? type : '';
     }
   },
   beforeDestroy() {
     this.answerPhoto.canvas = null;
-    this.answerPhoto.context = null;
+    this.answerPhoto.ctx = null;
+    this.destroyWorker();
+    this.destroyCanvasData();
   }
 });
-;// ./packages/components/videoCanvas.vue?vue&type=script&lang=js
- /* harmony default export */ var components_videoCanvasvue_type_script_lang_js = (videoCanvasvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoCanvas.vue?vue&type=style&index=0&id=50940904&prod&lang=scss&scoped=true
-var videoCanvasvue_type_style_index_0_id_50940904_prod_lang_scss_scoped_true = __webpack_require__(4185);
-;// ./packages/components/videoCanvas.vue?vue&type=style&index=0&id=50940904&prod&lang=scss&scoped=true
+;// ./packages/components/xjzhImgCanvas.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_xjzhImgCanvasvue_type_script_lang_js = (xjzhImgCanvasvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=450f21fe&prod&lang=scss&scoped=true
+var xjzhImgCanvasvue_type_style_index_0_id_450f21fe_prod_lang_scss_scoped_true = __webpack_require__(7011);
+;// ./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=450f21fe&prod&lang=scss&scoped=true
 
 ;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -2194,7 +2256,7 @@ function normalizeComponent(
   }
 }
 
-;// ./packages/components/videoCanvas.vue
+;// ./packages/components/xjzhImgCanvas.vue
 
 
 
@@ -2204,17 +2266,17 @@ function normalizeComponent(
 /* normalize component */
 
 var component = normalizeComponent(
-  components_videoCanvasvue_type_script_lang_js,
+  components_xjzhImgCanvasvue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
   null,
-  "50940904",
+  "450f21fe",
   null
   
 )
 
-/* harmony default export */ var videoCanvas = (component.exports);
+/* harmony default export */ var xjzhImgCanvas = (component.exports);
 ;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoRtsp.vue?vue&type=template&id=345d94c7
 var videoRtspvue_type_template_id_345d94c7_render = function render() {
   var _vm = this,
@@ -2293,7 +2355,7 @@ var videoWebGl_component = normalizeComponent(
 
 
 
-const components = [videoCanvas, videoRtsp, videoWebGl];
+const components = [xjzhImgCanvas, videoRtsp, videoWebGl];
 const install = function (Vue) {
   if (install.installed) return;
   components.map(component => Vue.component(component.name, component));

package/dist/xjzh-component.umd.600.js

@@ -16,6 +16,7 @@ self.onmessage = function (event) {
   } = event.data;
   let cameraNum = 0;
   let ws = new WebSocket(url);
+  console.log('object :>> ws', ws);
   // socket 连接
   ws.onopen = function () {
     self.postMessage({
@@ -26,6 +27,7 @@ self.onmessage = function (event) {
   ws.onmessage = async function ({
     data
   }) {
+    console.log('object :>> ws - data', data);
     if (data.size == 1) {
       // 摄像头数量  || 是否开启人脸
       cameraNum = await self.convertBlobToNumber(data);

package/dist/xjzh-component.umd.js

@@ -381,6 +381,27 @@ module.exports = function (passed, required) {
 };
 
 
+/***/ }),
+
+/***/ 2825:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1601);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".xjzh-img-canvas[data-v-450f21fe]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-450f21fe]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-450f21fe]{width:30px;height:30px;padding:0;margin:0;font-size:20px;border-radius:50%;text-align:center;line-height:30px;position:absolute;left:10px;top:10px;z-index:999;background-color:#fff;color:#0076f6}.xjzh-img-canvas .itemBox canvas[data-v-450f21fe]{margin:0;padding:0;width:100%;height:100%;will-change:transform;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.xjzh-img-canvas .itemBox[data-v-450f21fe]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-450f21fe]{width:100%!important;height:100%!important;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 2839:
@@ -618,22 +639,6 @@ if (params + '' !== 'a=2') {
 }
 
 
-/***/ }),
-
-/***/ 4707:
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(5807);
-if(content.__esModule) content = content.default;
-if(typeof content === 'string') content = [[module.id, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = (__webpack_require__(9548)/* ["default"] */ .A)
-var update = add("59b0a0b9", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 4901:
@@ -720,27 +725,6 @@ module.exports = function (key, value) {
 };
 
 
-/***/ }),
-
-/***/ 5807:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1601);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
-// Imports
-
-
-var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, ".video-canvas[data-v-50940904]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:16px}.video-canvas .itemBox[data-v-50940904]{border-radius:4px;transform:translateZ(0);margin-bottom:11px;position:relative;overflow:hidden}.video-canvas canvas[data-v-50940904]{margin:0;padding:0;width:100%;height:100%;will-change:transform;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.video-canvas .full-screen[data-v-50940904]{width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}", ""]);
-// Exports
-/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
-
-
 /***/ }),
 
 /***/ 5917:
@@ -1301,6 +1285,22 @@ module.exports = function (exec) {
 };
 
 
+/***/ }),
+
+/***/ 9101:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(2825);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(9548)/* ["default"] */ .A)
+var update = add("7e46c097", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 9297:
@@ -1855,12 +1855,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoCanvas.vue?vue&type=template&id=50940904&scoped=true
+;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/xjzhImgCanvas.vue?vue&type=template&id=450f21fe&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
-    staticClass: "video-canvas"
+    staticClass: "xjzh-img-canvas"
   }, _vm._l(_vm.cameraObj, function (item, index) {
     return _c('div', {
       key: index,
@@ -1896,15 +1896,15 @@ var web_url_search_params_delete = __webpack_require__(4603);
 var web_url_search_params_has = __webpack_require__(7566);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/web.url-search-params.size.js
 var web_url_search_params_size = __webpack_require__(8721);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoCanvas.vue?vue&type=script&lang=js
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/xjzhImgCanvas.vue?vue&type=script&lang=js
 
 
 
 
 
 
-/* harmony default export */ var videoCanvasvue_type_script_lang_js = ({
-  name: "VideoCanvas",
+/* harmony default export */ var xjzhImgCanvasvue_type_script_lang_js = ({
+  name: "XjzhImgCanvas",
   props: {
     videoUrl: {
       type: String,
@@ -1912,11 +1912,11 @@ var web_url_search_params_size = __webpack_require__(8721);
     },
     width: {
       type: String,
-      default: '640px'
+      default: '480px'
     },
     height: {
       type: String,
-      default: '360px'
+      default: '270px'
     },
     showTitle: {
       type: Boolean,
@@ -1925,15 +1925,15 @@ var web_url_search_params_size = __webpack_require__(8721);
     isSwitchSide: {
       type: Boolean,
       default: false
+    },
+    canvasSize: {
+      type: Array,
+      default: () => {
+        return [1920, 1080];
+      }
     }
   },
   watch: {
-    videoUrl: {
-      handler(val) {
-        console.log('object :>> ', val);
-        this.initWorker();
-      }
-    },
     isSwitchSide: {
       handler(val) {
         console.log('object :>> ', val);
@@ -1957,36 +1957,41 @@ var web_url_search_params_size = __webpack_require__(8721);
       currentFullScreen: '',
       answerPhoto: {
         canvas: null,
-        context: null,
-        isPhoto: false
+        ctx: null,
+        isPhoto: false,
+        canvasSize: [1920, 1080]
       },
-      canvasSize: [1920, 1080]
+      cameraObj: null
     };
   },
-  mounted() {},
+  mounted() {
+    this.initWorker();
+  },
   methods: {
     initAnswerPhoto() {
       this.answerPhoto.canvas = document.createElement('canvas');
-      this.answerPhoto.context = this.answerPhoto.canvas.getContext('2d');
+      this.answerPhoto.ctx = this.answerPhoto.canvas.getContext('2d');
       this.answerPhoto.canvas.width = this.canvasSize[0] * this.cameraNum;
       this.answerPhoto.canvas.height = this.canvasSize[1];
     },
     initCanvas() {
       for (let i = 0; i < this.cameraNum; i++) {
         let type = this.cameraType[i].value;
-        this.cameraObj[type].canvas = document.getElementById(this.cameraObj[type].domeId);
-        this.cameraObj[type].content = this.cameraObj[type].canvas.getContext('2d');
+        this.cameraObj[type].canvas = this.$refs[this.cameraObj[type].domeId][0];
+        this.cameraObj[type].ctx = this.cameraObj[type].canvas.getContext('2d');
         this.cameraObj[type].canvas.width = this.canvasSize[0];
         this.cameraObj[type].canvas.height = this.canvasSize[1];
         this.cameraObj[type].imgBox = new Image();
-        this.cameraObj[type].videoUrl = '';
       }
     },
     initWorker() {
       const url = `ws://${this.videoUrl}/socket`;
       let count = 0;
       this.destroyWorker();
+      this.destroyCanvasData();
+      console.log('object :>> url', url);
       this.worker = new Worker(new URL(/* worker import */ __webpack_require__.p + __webpack_require__.u(600), __webpack_require__.b));
+      console.log('object :>> this.worker', this.worker);
       this.worker.onmessage = async event => {
         const {
           type,
@@ -1998,35 +2003,43 @@ var web_url_search_params_size = __webpack_require__(8721);
         if (type === 'message') {
           if (typeof data === 'number') {
             this.cameraNum = data;
-            localStorage.setItem('cameraNum', this.cameraNum);
             for (let i = 0; i < this.cameraNum; i++) {
-              this.cameraObj[this.cameraType[i].value] = {
-                domeId: `canvas_${this.cameraType[i].value}`,
+              let typeVal = this.cameraType[i].value;
+              this.cameraObj[typeVal] = {
+                domeId: `canvas_${typeVal}`,
+                title: this.cameraType[i].label,
+                // 摄像头名称
                 canvas: null,
-                content: null,
-                videoUrl: '',
+                ctx: null,
                 totalFPS: 0,
+                // 单个摄像头 - 收到总帧数
                 showTotalFPS: 0,
-                frameSkip: 1,
+                // 单个摄像头 - 渲染总帧数
+                frameSkip: 0,
+                // 单个摄像头 - 跳帧 1（30），2（15），3（10）
+
                 imgBox: null,
+                allUrl: [],
+                // 所有图片地址
                 isLoading: false,
-                isFullScreen: false,
-                title: this.cameraType[i].label
+                // 图片是否加载完
+                isFullScreen: false // 画面是否全屏
               };
             }
+            this.$forceUpdate();
+            // 根据摄像头数量，初始化画布
             this.$nextTick(() => {
               this.initAnswerPhoto();
               this.initCanvas();
             });
             return;
           }
+
+          // 摄像头画面渲染
           count++;
           this.showCanvas(this.cameraType[count - 1].value, data);
           count = count >= this.cameraNum ? 0 : count;
         }
-        if (type === 'message') {
-          console.log('WebSocket open:');
-        }
         if (type === 'close') {
           console.log('WebSocket closed:', wsEvent);
         }
@@ -2050,61 +2063,110 @@ var web_url_search_params_size = __webpack_require__(8721);
         this.worker = null;
       }
     },
-    showVideoCanvas(type, blod) {
-      // 当其中一个全屏时，其它画面不做渲染操作,并且清理其他缓存
+    showCanvas(type, blod) {
+      this.cameraObj[type].totalFPS++;
+      if (!this.cameraObj[type] || !this.cameraObj[type].imgBox || !this.cameraObj[type].ctx) {
+        return;
+      }
       if (this.currentFullScreen && this.currentFullScreen !== type) {
-        if (this.cameraObj[type].videoUrl) {
-          URL.revokeObjectURL(this.cameraObj[type].videoUrl);
-          this.cameraObj[type].videoUrl = '';
-        }
+        this.destroyUrl(type);
         return;
       }
       if (this.cameraObj[type].isLoading) return;
-      this.cameraObj[type].videoUrl = URL.createObjectURL(blod);
       this.cameraObj[type].isLoading = true;
-      this.cameraObj[type].imgBox.src = this.cameraObj[type].videoUrl;
+      this.cameraObj[type].allUrl.unshift(URL.createObjectURL(blod));
+      this.cameraObj[type].imgBox.src = this.cameraObj[type].allUrl[0];
       this.cameraObj[type].imgBox.onload = () => {
+        if (!this.cameraObj[type].ctx) return;
+        this.cameraObj[type].ctx.drawImage(this.cameraObj[type].imgBox, 0, 0, this.canvasSize[0], this.canvasSize[1]);
         this.cameraObj[type].isLoading = false;
-        this.cameraObj[type].content.drawImage(this.cameraObj[type].imgBox, 0, 0, this.canvasSize[0], this.canvasSize[1]);
-        if (this.cameraObj[type].videoUrl) {
-          URL.revokeObjectURL(this.cameraObj[type].videoUrl);
-          this.cameraObj[type].videoUrl = '';
+        if (this.answerPhoto.isPhoto) {
+          // 拍照使用
+          if (this.cameraNum > 0) {
+            this.answerPhoto.ctx.drawImage(this.cameraObj.main.imgBox, this.answerPhoto.canvasSize[0] * 0, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+          }
+          if (this.cameraNum > 1) {
+            this.answerPhoto.ctx.drawImage(this.cameraObj.sub.imgBox, this.answerPhoto.canvasSize[0] * 1, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+          }
+          if (this.cameraNum > 2) {
+            this.answerPhoto.ctx.drawImage(this.cameraObj.side.imgBox, this.answerPhoto.canvasSize[0] * 2, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+          }
+          return;
         }
+        // 清除内存
+        this.cameraObj[type].imgBox.src = '';
+        this.destroyUrl(type, this.cameraObj[type].maxUrlNum);
       };
       this.cameraObj[type].imgBox.onerror = () => {
         this.cameraObj[type].isLoading = false;
-        // 清除内存
-        if (this.cameraObj[type].videoUrl) {
-          URL.revokeObjectURL(this.cameraObj[type].videoUrl);
-          this.cameraObj[type].videoUrl = '';
-        }
+        if (!this.cameraObj[type] || !this.cameraObj[type].imgBox) return;
+        this.cameraObj[type].imgBox.src = '';
+        this.destroyUrl(type, this.cameraObj[type].maxUrlNum);
       };
     },
-    AllPhoto() {
-      let type = this.cameraType[this.cameraNum - 1].value;
-      this.videoObj.videoSrc = this.cameraObj[type].canvas.toDataURL('image/jpeg');
-      return this.videoObj.videoSrc;
+    handleScreen(type) {
+      this.$set(this.cameraObj[type], 'isFullScreen', !this.cameraObj[type].isFullScreen);
+      this.currentFullScreen = this.cameraObj[type].isFullScreen ? type : '';
+      this.$forceUpdate();
     },
+    destroyCanvasData() {
+      for (let i = 0; i < this.cameraNum; i++) {
+        let type = this.cameraType[i].value;
+        this.destroyUrl(type);
+        this.destroyCanvas(type);
+      }
+    },
+    destroyUrl(type) {
+      for (let i = 0; i < this.cameraObj[type].allUrl.length; i++) {
+        URL.revokeObjectURL(this.cameraObj[type].allUrl[i]);
+        delete this.cameraObj[type].allUrl[i];
+      }
+      this.cameraObj[type].allUrl = [];
+    },
+    destroyCanvas(type) {
+      if (!this.cameraObj[type]) return;
+      for (let key in this.cameraObj[type]) {
+        if (typeof this.cameraObj[type][key] == 'object') {
+          this.cameraObj[type][key] = '';
+        }
+        delete this.cameraObj[type][key];
+      }
+    },
+    // 所有摄像头横向照片
+    allPhoto() {
+      this.answerPhoto.isPhoto = true;
+      let startTime = new Date().getTime();
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(this.answerPhoto.canvas.toDataURL('image/jpeg'));
+          let endTime = new Date().getTime();
+          let second = (endTime - startTime) / 1000;
+          this.cameraObj.main.totalFPS = this.cameraObj.main.totalFPS + ~~(second * 30);
+          this.cameraObj.sub.totalFPS = this.cameraObj.sub.totalFPS + ~~(second * 30);
+          this.cameraObj.side.totalFPS = this.cameraObj.side.totalFPS + ~~(second * 30);
+          this.answerPhoto.isPhoto = false;
+        }, 200);
+      });
+    },
+    // 单个摄像头照片
     selectPhoto(num) {
       let type = this.cameraType[num - 1].value;
       this.videoObj.videoMergeSrc = this.cameraObj[type].canvas.toDataURL('image/jpeg');
       return this.videoObj.videoMergeSrc;
-    },
-    handleScreen(type) {
-      this.$set(this.cameraObj[type], 'isFullScreen', !this.cameraObj[type].isFullScreen);
-      this.currentFullScreen = this.cameraObj[type].isFullScreen ? type : '';
     }
   },
   beforeDestroy() {
     this.answerPhoto.canvas = null;
-    this.answerPhoto.context = null;
+    this.answerPhoto.ctx = null;
+    this.destroyWorker();
+    this.destroyCanvasData();
   }
 });
-;// ./packages/components/videoCanvas.vue?vue&type=script&lang=js
- /* harmony default export */ var components_videoCanvasvue_type_script_lang_js = (videoCanvasvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoCanvas.vue?vue&type=style&index=0&id=50940904&prod&lang=scss&scoped=true
-var videoCanvasvue_type_style_index_0_id_50940904_prod_lang_scss_scoped_true = __webpack_require__(4707);
-;// ./packages/components/videoCanvas.vue?vue&type=style&index=0&id=50940904&prod&lang=scss&scoped=true
+;// ./packages/components/xjzhImgCanvas.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_xjzhImgCanvasvue_type_script_lang_js = (xjzhImgCanvasvue_type_script_lang_js); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=450f21fe&prod&lang=scss&scoped=true
+var xjzhImgCanvasvue_type_style_index_0_id_450f21fe_prod_lang_scss_scoped_true = __webpack_require__(9101);
+;// ./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=450f21fe&prod&lang=scss&scoped=true
 
 ;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -2204,7 +2266,7 @@ function normalizeComponent(
   }
 }
 
-;// ./packages/components/videoCanvas.vue
+;// ./packages/components/xjzhImgCanvas.vue
 
 
 
@@ -2214,17 +2276,17 @@ function normalizeComponent(
 /* normalize component */
 
 var component = normalizeComponent(
-  components_videoCanvasvue_type_script_lang_js,
+  components_xjzhImgCanvasvue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
   null,
-  "50940904",
+  "450f21fe",
   null
   
 )
 
-/* harmony default export */ var videoCanvas = (component.exports);
+/* harmony default export */ var xjzhImgCanvas = (component.exports);
 ;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/videoRtsp.vue?vue&type=template&id=345d94c7
 var videoRtspvue_type_template_id_345d94c7_render = function render() {
   var _vm = this,
@@ -2303,7 +2365,7 @@ var videoWebGl_component = normalizeComponent(
 
 
 
-const components = [videoCanvas, videoRtsp, videoWebGl];
+const components = [xjzhImgCanvas, videoRtsp, videoWebGl];
 const install = function (Vue) {
   if (install.installed) return;
   components.map(component => Vue.component(component.name, component));

package/dist/xjzh-component.umd.min.221.js

@@ -1,2 +1,2 @@
-(function(e,o){"object"===typeof exports&&"object"===typeof module?module.exports=o():"function"===typeof define&&define.amd?define([],o):"object"===typeof exports?exports["xjzh-component"]=o():e["xjzh-component"]=o()})("undefined"!==typeof self?self:this,function(){return function(){var e={};return self.onmessage=function(e){const{url:o}=e.data;let t=0,n=new WebSocket(o);n.onopen=function(){self.postMessage({type:"open"})},n.onmessage=async function({data:e}){if(1==e.size)t=await self.convertBlobToNumber(e),self.postMessage({type:"message",data:t});else{let o=new Blob([e],{type:"image/jpeg"});self.postMessage({type:"message",data:o}),o=null}e=null},n.onclose=function(e){self.postMessage({type:"close",event:e}),n=null,setTimeout(()=>{n=new WebSocket(o)},1e3)},n.onerror=function(e){self.postMessage({type:"error",error:e})}},self.convertBlobToNumber=function(e){return new Promise((o,t)=>{let n=new FileReader;n.onload=e=>{o(e.target.result.charCodeAt(0)),n=null},n.onerror=e=>{t(e)},n.readAsText(e)})},e}()});
+(function(e,o){"object"===typeof exports&&"object"===typeof module?module.exports=o():"function"===typeof define&&define.amd?define([],o):"object"===typeof exports?exports["xjzh-component"]=o():e["xjzh-component"]=o()})("undefined"!==typeof self?self:this,function(){return function(){var e={};return self.onmessage=function(e){const{url:o}=e.data;let t=0,n=new WebSocket(o);console.log("object :>> ws",n),n.onopen=function(){self.postMessage({type:"open"})},n.onmessage=async function({data:e}){if(console.log("object :>> ws - data",e),1==e.size)t=await self.convertBlobToNumber(e),self.postMessage({type:"message",data:t});else{let o=new Blob([e],{type:"image/jpeg"});self.postMessage({type:"message",data:o}),o=null}e=null},n.onclose=function(e){self.postMessage({type:"close",event:e}),n=null,setTimeout(()=>{n=new WebSocket(o)},1e3)},n.onerror=function(e){self.postMessage({type:"error",error:e})}},self.convertBlobToNumber=function(e){return new Promise((o,t)=>{let n=new FileReader;n.onload=e=>{o(e.target.result.charCodeAt(0)),n=null},n.onerror=e=>{t(e)},n.readAsText(e)})},e}()});
 //# sourceMappingURL=xjzh-component.umd.min.221.js.map

package/dist/xjzh-component.umd.min.js

@@ -1,2 +1,2 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["xjzh-component"]=e():t["xjzh-component"]=e()})("undefined"!==typeof self?self:this,function(){return function(){var t={34:function(t,e,r){"use strict";var n=r(4901);t.exports=function(t){return"object"==typeof t?null!==t:n(t)}},283:function(t,e,r){"use strict";var n=r(9504),o=r(9039),i=r(4901),a=r(9297),s=r(3724),c=r(350).CONFIGURABLE,u=r(3706),l=r(1181),f=l.enforce,d=l.get,p=String,h=Object.defineProperty,v=n("".slice),m=n("".replace),g=n([].join),b=s&&!o(function(){return 8!==h(function(){},"length",{value:8}).length}),y=String(String).split("String"),w=t.exports=function(t,e,r){"Symbol("===v(p(e),0,7)&&(e="["+m(p(e),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),r&&r.getter&&(e="get "+e),r&&r.setter&&(e="set "+e),(!a(t,"name")||c&&t.name!==e)&&(s?h(t,"name",{value:e,configurable:!0}):t.name=e),b&&r&&a(r,"arity")&&t.length!==r.arity&&h(t,"length",{value:r.arity});try{r&&a(r,"constructor")&&r.constructor?s&&h(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(o){}var n=f(t);return a(n,"source")||(n.source=g(y,"string"==typeof e?e:"")),t};Function.prototype.toString=w(function(){return i(this)&&d(this).source||u(this)},"toString")},350:function(t,e,r){"use strict";var n=r(3724),o=r(9297),i=Function.prototype,a=n&&Object.getOwnPropertyDescriptor,s=o(i,"name"),c=s&&"something"===function(){}.name,u=s&&(!n||n&&a(i,"name").configurable);t.exports={EXISTS:s,PROPER:c,CONFIGURABLE:u}},421:function(t){"use strict";t.exports={}},616:function(t,e,r){"use strict";var n=r(9039);t.exports=!n(function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")})},655:function(t,e,r){"use strict";var n=r(6955),o=String;t.exports=function(t){if("Symbol"===n(t))throw new TypeError("Cannot convert a Symbol value to a string");return o(t)}},757:function(t,e,r){"use strict";var n=r(7751),o=r(4901),i=r(1625),a=r(7040),s=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=n("Symbol");return o(e)&&i(e.prototype,s(t))}},1181:function(t,e,r){"use strict";var n,o,i,a=r(8622),s=r(4576),c=r(34),u=r(6699),l=r(9297),f=r(7629),d=r(6119),p=r(421),h="Object already initialized",v=s.TypeError,m=s.WeakMap,g=function(t){return i(t)?o(t):n(t,{})},b=function(t){return function(e){var r;if(!c(e)||(r=o(e)).type!==t)throw new v("Incompatible receiver, "+t+" required");return r}};if(a||f.state){var y=f.state||(f.state=new m);y.get=y.get,y.has=y.has,y.set=y.set,n=function(t,e){if(y.has(t))throw new v(h);return e.facade=t,y.set(t,e),e},o=function(t){return y.get(t)||{}},i=function(t){return y.has(t)}}else{var w=d("state");p[w]=!0,n=function(t,e){if(l(t,w))throw new v(h);return e.facade=t,u(t,w,e),e},o=function(t){return l(t,w)?t[w]:{}},i=function(t){return l(t,w)}}t.exports={set:n,get:o,has:i,enforce:g,getterFor:b}},1601:function(t){"use strict";t.exports=function(t){return t[1]}},1625:function(t,e,r){"use strict";var n=r(9504);t.exports=n({}.isPrototypeOf)},2106:function(t,e,r){"use strict";var n=r(283),o=r(4913);t.exports=function(t,e,r){return r.get&&n(r.get,e,{getter:!0}),r.set&&n(r.set,e,{setter:!0}),o.f(t,e,r)}},2140:function(t,e,r){"use strict";var n=r(8227),o=n("toStringTag"),i={};i[o]="z",t.exports="[object z]"===String(i)},2195:function(t,e,r){"use strict";var n=r(9504),o=n({}.toString),i=n("".slice);t.exports=function(t){return i(o(t),8,-1)}},2777:function(t,e,r){"use strict";var n=r(9565),o=r(34),i=r(757),a=r(5966),s=r(4270),c=r(8227),u=TypeError,l=c("toPrimitive");t.exports=function(t,e){if(!o(t)||i(t))return t;var r,c=a(t,l);if(c){if(void 0===e&&(e="default"),r=n(c,t,e),!o(r)||i(r))return r;throw new u("Can't convert object to primitive value")}return void 0===e&&(e="number"),s(t,e)}},2812:function(t){"use strict";var e=TypeError;t.exports=function(t,r){if(t<r)throw new e("Not enough arguments");return t}},2839:function(t,e,r){"use strict";var n=r(4576),o=n.navigator,i=o&&o.userAgent;t.exports=i?String(i):""},3392:function(t,e,r){"use strict";var n=r(9504),o=0,i=Math.random(),a=n(1.1.toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+a(++o+i,36)}},3435:function(t,e,r){"use strict";r.r(e);var n=r(1601),o=r.n(n),i=r(6314),a=r.n(i),s=a()(o());s.push([t.id,".video-canvas[data-v-50940904]{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:16px}.video-canvas .itemBox[data-v-50940904]{border-radius:4px;transform:translateZ(0);margin-bottom:11px;position:relative;overflow:hidden}.video-canvas canvas[data-v-50940904]{margin:0;padding:0;width:100%;height:100%;will-change:transform;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.video-canvas .full-screen[data-v-50940904]{width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}",""]),e["default"]=s},3706:function(t,e,r){"use strict";var n=r(9504),o=r(4901),i=r(7629),a=n(Function.toString);o(i.inspectSource)||(i.inspectSource=function(t){return a(t)}),t.exports=i.inspectSource},3724:function(t,e,r){"use strict";var n=r(9039);t.exports=!n(function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]})},4055:function(t,e,r){"use strict";var n=r(4576),o=r(34),i=n.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},4117:function(t){"use strict";t.exports=function(t){return null===t||void 0===t}},4270:function(t,e,r){"use strict";var n=r(9565),o=r(4901),i=r(34),a=TypeError;t.exports=function(t,e){var r,s;if("string"===e&&o(r=t.toString)&&!i(s=n(r,t)))return s;if(o(r=t.valueOf)&&!i(s=n(r,t)))return s;if("string"!==e&&o(r=t.toString)&&!i(s=n(r,t)))return s;throw new a("Can't convert object to primitive value")}},4495:function(t,e,r){"use strict";var n=r(9519),o=r(9039),i=r(4576),a=i.String;t.exports=!!Object.getOwnPropertySymbols&&!o(function(){var t=Symbol("symbol detection");return!a(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41})},4576:function(t,e,r){"use strict";var n=function(t){return t&&t.Math===Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||n("object"==typeof this&&this)||function(){return this}()||Function("return this")()},4603:function(t,e,r){"use strict";var n=r(6840),o=r(9504),i=r(655),a=r(2812),s=URLSearchParams,c=s.prototype,u=o(c.append),l=o(c["delete"]),f=o(c.forEach),d=o([].push),p=new s("a=1&a=2&b=3");p["delete"]("a",1),p["delete"]("b",void 0),p+""!=="a=2"&&n(c,"delete",function(t){var e=arguments.length,r=e<2?void 0:arguments[1];if(e&&void 0===r)return l(this,t);var n=[];f(this,function(t,e){d(n,{key:e,value:t})}),a(e,1);var o,s=i(t),c=i(r),p=0,h=0,v=!1,m=n.length;while(p<m)o=n[p++],v||o.key===s?(v=!0,l(this,o.key)):h++;while(h<m)o=n[h++],o.key===s&&o.value===c||u(this,o.key,o.value)},{enumerable:!0,unsafe:!0})},4901:function(t){"use strict";var e="object"==typeof document&&document.all;t.exports="undefined"==typeof e&&void 0!==e?function(t){return"function"==typeof t||t===e}:function(t){return"function"==typeof t}},4913:function(t,e,r){"use strict";var n=r(3724),o=r(5917),i=r(8686),a=r(8551),s=r(6969),c=TypeError,u=Object.defineProperty,l=Object.getOwnPropertyDescriptor,f="enumerable",d="configurable",p="writable";e.f=n?i?function(t,e,r){if(a(t),e=s(e),a(r),"function"===typeof t&&"prototype"===e&&"value"in r&&p in r&&!r[p]){var n=l(t,e);n&&n[p]&&(t[e]=r.value,r={configurable:d in r?r[d]:n[d],enumerable:f in r?r[f]:n[f],writable:!1})}return u(t,e,r)}:u:function(t,e,r){if(a(t),e=s(e),a(r),o)try{return u(t,e,r)}catch(n){}if("get"in r||"set"in r)throw new c("Accessors not supported");return"value"in r&&(t[e]=r.value),t}},5745:function(t,e,r){"use strict";var n=r(7629);t.exports=function(t,e){return n[t]||(n[t]=e||{})}},5917:function(t,e,r){"use strict";var n=r(3724),o=r(9039),i=r(4055);t.exports=!n&&!o(function(){return 7!==Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a})},5966:function(t,e,r){"use strict";var n=r(9306),o=r(4117);t.exports=function(t,e){var r=t[e];return o(r)?void 0:n(r)}},6119:function(t,e,r){"use strict";var n=r(5745),o=r(3392),i=n("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},6314:function(t){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r="",n="undefined"!==typeof e[5];return e[4]&&(r+="@supports (".concat(e[4],") {")),e[2]&&(r+="@media ".concat(e[2]," {")),n&&(r+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),r+=t(e),n&&(r+="}"),e[2]&&(r+="}"),e[4]&&(r+="}"),r}).join("")},e.i=function(t,r,n,o,i){"string"===typeof t&&(t=[[null,t,void 0]]);var a={};if(n)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(a[c]=!0)}for(var u=0;u<t.length;u++){var l=[].concat(t[u]);n&&a[l[0]]||("undefined"!==typeof i&&("undefined"===typeof l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=i),r&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=r):l[2]=r),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),e.push(l))}},e}},6368:function(t,e,r){var n=r(3435);n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[t.id,n,""]]),n.locals&&(t.exports=n.locals);var o=r(9548).A;o("bdf71b6a",n,!0,{sourceMap:!1,shadowMode:!1})},6395:function(t){"use strict";t.exports=!1},6699:function(t,e,r){"use strict";var n=r(3724),o=r(4913),i=r(6980);t.exports=n?function(t,e,r){return o.f(t,e,i(1,r))}:function(t,e,r){return t[e]=r,t}},6823:function(t){"use strict";var e=String;t.exports=function(t){try{return e(t)}catch(r){return"Object"}}},6840:function(t,e,r){"use strict";var n=r(4901),o=r(4913),i=r(283),a=r(9433);t.exports=function(t,e,r,s){s||(s={});var c=s.enumerable,u=void 0!==s.name?s.name:e;if(n(r)&&i(r,u,s),s.global)c?t[e]=r:a(e,r);else{try{s.unsafe?t[e]&&(c=!0):delete t[e]}catch(l){}c?t[e]=r:o.f(t,e,{value:r,enumerable:!1,configurable:!s.nonConfigurable,writable:!s.nonWritable})}return t}},6955:function(t,e,r){"use strict";var n=r(2140),o=r(4901),i=r(2195),a=r(8227),s=a("toStringTag"),c=Object,u="Arguments"===i(function(){return arguments}()),l=function(t,e){try{return t[e]}catch(r){}};t.exports=n?i:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=l(e=c(t),s))?r:u?i(e):"Object"===(n=i(e))&&o(e.callee)?"Arguments":n}},6969:function(t,e,r){"use strict";var n=r(2777),o=r(757);t.exports=function(t){var e=n(t,"string");return o(e)?e:e+""}},6980:function(t){"use strict";t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},7040:function(t,e,r){"use strict";var n=r(4495);t.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},7566:function(t,e,r){"use strict";var n=r(6840),o=r(9504),i=r(655),a=r(2812),s=URLSearchParams,c=s.prototype,u=o(c.getAll),l=o(c.has),f=new s("a=1");!f.has("a",2)&&f.has("a",void 0)||n(c,"has",function(t){var e=arguments.length,r=e<2?void 0:arguments[1];if(e&&void 0===r)return l(this,t);var n=u(this,t);a(e,1);var o=i(r),s=0;while(s<n.length)if(n[s++]===o)return!0;return!1},{enumerable:!0,unsafe:!0})},7629:function(t,e,r){"use strict";var n=r(6395),o=r(4576),i=r(9433),a="__core-js_shared__",s=t.exports=o[a]||i(a,{});(s.versions||(s.versions=[])).push({version:"3.45.1",mode:n?"pure":"global",copyright:"© 2014-2025 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.45.1/LICENSE",source:"https://github.com/zloirock/core-js"})},7750:function(t,e,r){"use strict";var n=r(4117),o=TypeError;t.exports=function(t){if(n(t))throw new o("Can't call method on "+t);return t}},7751:function(t,e,r){"use strict";var n=r(4576),o=r(4901),i=function(t){return o(t)?t:void 0};t.exports=function(t,e){return arguments.length<2?i(n[t]):n[t]&&n[t][e]}},8227:function(t,e,r){"use strict";var n=r(4576),o=r(5745),i=r(9297),a=r(3392),s=r(4495),c=r(7040),u=n.Symbol,l=o("wks"),f=c?u["for"]||u:u&&u.withoutSetter||a;t.exports=function(t){return i(l,t)||(l[t]=s&&i(u,t)?u[t]:f("Symbol."+t)),l[t]}},8551:function(t,e,r){"use strict";var n=r(34),o=String,i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not an object")}},8622:function(t,e,r){"use strict";var n=r(4576),o=r(4901),i=n.WeakMap;t.exports=o(i)&&/native code/.test(String(i))},8686:function(t,e,r){"use strict";var n=r(3724),o=r(9039);t.exports=n&&o(function(){return 42!==Object.defineProperty(function(){},"prototype",{value:42,writable:!1}).prototype})},8721:function(t,e,r){"use strict";var n=r(3724),o=r(9504),i=r(2106),a=URLSearchParams.prototype,s=o(a.forEach);n&&!("size"in a)&&i(a,"size",{get:function(){var t=0;return s(this,function(){t++}),t},configurable:!0,enumerable:!0})},8981:function(t,e,r){"use strict";var n=r(7750),o=Object;t.exports=function(t){return o(n(t))}},9039:function(t){"use strict";t.exports=function(t){try{return!!t()}catch(e){return!0}}},9297:function(t,e,r){"use strict";var n=r(9504),o=r(8981),i=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return i(o(t),e)}},9306:function(t,e,r){"use strict";var n=r(4901),o=r(6823),i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not a function")}},9433:function(t,e,r){"use strict";var n=r(4576),o=Object.defineProperty;t.exports=function(t,e){try{o(n,t,{value:e,configurable:!0,writable:!0})}catch(r){n[t]=e}return e}},9504:function(t,e,r){"use strict";var n=r(616),o=Function.prototype,i=o.call,a=n&&o.bind.bind(i,i);t.exports=n?a:function(t){return function(){return i.apply(t,arguments)}}},9519:function(t,e,r){"use strict";var n,o,i=r(4576),a=r(2839),s=i.process,c=i.Deno,u=s&&s.versions||c&&c.version,l=u&&u.v8;l&&(n=l.split("."),o=n[0]>0&&n[0]<4?1:+(n[0]+n[1])),!o&&a&&(n=a.match(/Edge\/(\d+)/),(!n||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/),n&&(o=+n[1]))),t.exports=o},9548:function(t,e,r){"use strict";function n(t,e){for(var r=[],n={},o=0;o<e.length;o++){var i=e[o],a=i[0],s=i[1],c=i[2],u=i[3],l={id:t+":"+o,css:s,media:c,sourceMap:u};n[a]?n[a].parts.push(l):r.push(n[a]={id:a,parts:[l]})}return r}r.d(e,{A:function(){return h}});var o="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},a=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,c=0,u=!1,l=function(){},f=null,d="data-vue-ssr-id",p="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(t,e,r,o){u=r,f=o||{};var a=n(t,e);return v(a),function(e){for(var r=[],o=0;o<a.length;o++){var s=a[o],c=i[s.id];c.refs--,r.push(c)}e?(a=n(t,e),v(a)):a=[];for(o=0;o<r.length;o++){c=r[o];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete i[c.id]}}}}function v(t){for(var e=0;e<t.length;e++){var r=t[e],n=i[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](r.parts[o]);for(;o<r.parts.length;o++)n.parts.push(g(r.parts[o]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{var a=[];for(o=0;o<r.parts.length;o++)a.push(g(r.parts[o]));i[r.id]={id:r.id,refs:1,parts:a}}}}function m(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function g(t){var e,r,n=document.querySelector("style["+d+'~="'+t.id+'"]');if(n){if(u)return l;n.parentNode.removeChild(n)}if(p){var o=c++;n=s||(s=m()),e=y.bind(null,n,o,!1),r=y.bind(null,n,o,!0)}else n=m(),e=w.bind(null,n),r=function(){n.parentNode.removeChild(n)};return e(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;e(t=n)}else r()}}var b=function(){var t=[];return function(e,r){return t[e]=r,t.filter(Boolean).join("\n")}}();function y(t,e,r,n){var o=r?"":n.css;if(t.styleSheet)t.styleSheet.cssText=b(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function w(t,e){var r=e.css,n=e.media,o=e.sourceMap;if(n&&t.setAttribute("media",n),f.ssrId&&t.setAttribute(d,e.id),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=r;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(r))}}},9565:function(t,e,r){"use strict";var n=r(616),o=Function.prototype.call;t.exports=n?o.bind(o):function(){return o.apply(o,arguments)}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={id:n,exports:{}};return t[n].call(i.exports,i,i.exports,r),i.exports}r.m=t,function(){r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,{a:e}),e}}(),function(){r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})}}(),function(){r.u=function(t){return"xjzh-component.umd.min."+t+".js"}}(),function(){r.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"===typeof window)return window}}()}(),function(){r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}}(),function(){r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}(),function(){r.p=""}(),function(){r.b=document.baseURI||self.location.href}();var n={};return function(){"use strict";if(r.r(n),r.d(n,{default:function(){return T}}),"undefined"!==typeof window){var t=window.document.currentScript,e=t&&t.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);e&&(r.p=e[1])}var o=function(){var t=this,e=t._self._c;return e("div",{staticClass:"video-canvas"},t._l(t.cameraObj,function(r,n){return e("div",{key:n,class:["itemBox",r.isFullScreen?"full-screen":""],style:{width:t.width,height:t.height},on:{click:function(e){return t.handleScreen(n)}}},[e("p",{directives:[{name:"show",rawName:"v-show",value:t.showTitle,expression:"showTitle"}],staticClass:"item-title"},[t._v(t._s(r.title))]),e("canvas",{ref:r.domeId,refInFor:!0})])}),0)},i=[],a=(r(4603),r(7566),r(8721),{name:"VideoCanvas",props:{videoUrl:{type:String,default:"localhost:56000"},width:{type:String,default:"640px"},height:{type:String,default:"360px"},showTitle:{type:Boolean,default:!0},isSwitchSide:{type:Boolean,default:!1}},watch:{videoUrl:{handler(t){console.log("object :>> ",t),this.initWorker()}},isSwitchSide:{handler(t){console.log("object :>> ",t),this.cameraType[2].label=this.isSwitchSide?"显":"侧"}}},data(){return{cameraNum:0,cameraType:[{label:"斜",value:"main"},{label:"俯",value:"sub"},{label:"侧",value:"side"}],currentFullScreen:"",answerPhoto:{canvas:null,context:null,isPhoto:!1},canvasSize:[1920,1080]}},mounted(){},methods:{initAnswerPhoto(){this.answerPhoto.canvas=document.createElement("canvas"),this.answerPhoto.context=this.answerPhoto.canvas.getContext("2d"),this.answerPhoto.canvas.width=this.canvasSize[0]*this.cameraNum,this.answerPhoto.canvas.height=this.canvasSize[1]},initCanvas(){for(let t=0;t<this.cameraNum;t++){let e=this.cameraType[t].value;this.cameraObj[e].canvas=document.getElementById(this.cameraObj[e].domeId),this.cameraObj[e].content=this.cameraObj[e].canvas.getContext("2d"),this.cameraObj[e].canvas.width=this.canvasSize[0],this.cameraObj[e].canvas.height=this.canvasSize[1],this.cameraObj[e].imgBox=new Image,this.cameraObj[e].videoUrl=""}},initWorker(){const t=`ws://${this.videoUrl}/socket`;let e=0;this.destroyWorker(),this.worker=new Worker(new URL(r.p+r.u(221),r.b)),this.worker.onmessage=async t=>{const{type:r,data:n,event:o,error:i}=t.data;if("message"===r){if("number"===typeof n){this.cameraNum=n,localStorage.setItem("cameraNum",this.cameraNum);for(let t=0;t<this.cameraNum;t++)this.cameraObj[this.cameraType[t].value]={domeId:`canvas_${this.cameraType[t].value}`,canvas:null,content:null,videoUrl:"",totalFPS:0,showTotalFPS:0,frameSkip:1,imgBox:null,isLoading:!1,isFullScreen:!1,title:this.cameraType[t].label};return void this.$nextTick(()=>{this.initAnswerPhoto(),this.initCanvas()})}e++,this.showCanvas(this.cameraType[e-1].value,n),e=e>=this.cameraNum?0:e}"message"===r&&console.log("WebSocket open:"),"close"===r&&console.log("WebSocket closed:",o),"error"===r&&console.log(`WebSocket error: ${i.message}`)},this.worker.onerror=t=>{console.log(`Worker error: ${t.message}`)},this.cameraObj={},this.worker.postMessage({url:t})},destroyWorker(){this.worker&&(this.worker.terminate(),this.worker=null)},showVideoCanvas(t,e){this.currentFullScreen&&this.currentFullScreen!==t?this.cameraObj[t].videoUrl&&(URL.revokeObjectURL(this.cameraObj[t].videoUrl),this.cameraObj[t].videoUrl=""):this.cameraObj[t].isLoading||(this.cameraObj[t].videoUrl=URL.createObjectURL(e),this.cameraObj[t].isLoading=!0,this.cameraObj[t].imgBox.src=this.cameraObj[t].videoUrl,this.cameraObj[t].imgBox.onload=()=>{this.cameraObj[t].isLoading=!1,this.cameraObj[t].content.drawImage(this.cameraObj[t].imgBox,0,0,this.canvasSize[0],this.canvasSize[1]),this.cameraObj[t].videoUrl&&(URL.revokeObjectURL(this.cameraObj[t].videoUrl),this.cameraObj[t].videoUrl="")},this.cameraObj[t].imgBox.onerror=()=>{this.cameraObj[t].isLoading=!1,this.cameraObj[t].videoUrl&&(URL.revokeObjectURL(this.cameraObj[t].videoUrl),this.cameraObj[t].videoUrl="")})},AllPhoto(){let t=this.cameraType[this.cameraNum-1].value;return this.videoObj.videoSrc=this.cameraObj[t].canvas.toDataURL("image/jpeg"),this.videoObj.videoSrc},selectPhoto(t){let e=this.cameraType[t-1].value;return this.videoObj.videoMergeSrc=this.cameraObj[e].canvas.toDataURL("image/jpeg"),this.videoObj.videoMergeSrc},handleScreen(t){this.$set(this.cameraObj[t],"isFullScreen",!this.cameraObj[t].isFullScreen),this.currentFullScreen=this.cameraObj[t].isFullScreen?t:""}},beforeDestroy(){this.answerPhoto.canvas=null,this.answerPhoto.context=null}}),s=a;r(6368);function c(t,e,r,n,o,i,a,s){var c,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=r,u._compiled=!0),n&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}var u=c(s,o,i,!1,null,"50940904",null),l=u.exports,f=function(){var t=this,e=t._self._c;return e("div")},d=[],p={name:"VideoRtsp",data(){return{}}},h=p,v=c(h,f,d,!1,null,null,null),m=v.exports,g=function(){var t=this,e=t._self._c;return e("div")},b=[],y={name:"VideoWebGl",data(){return{}}},w=y,x=c(w,g,b,!1,null,null,null),S=x.exports;const j=[l,m,S],O=function(t){O.installed||j.map(e=>t.component(e.name,e))};"undefined"!==typeof window&&window.Vue&&O(window.Vue);var U={install:O},T=U}(),n}()});
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["xjzh-component"]=e():t["xjzh-component"]=e()})("undefined"!==typeof self?self:this,function(){return function(){var t={34:function(t,e,r){"use strict";var n=r(4901);t.exports=function(t){return"object"==typeof t?null!==t:n(t)}},283:function(t,e,r){"use strict";var n=r(9504),i=r(9039),o=r(4901),a=r(9297),s=r(3724),c=r(350).CONFIGURABLE,u=r(3706),l=r(1181),f=l.enforce,h=l.get,p=String,d=Object.defineProperty,m=n("".slice),v=n("".replace),g=n([].join),b=s&&!i(function(){return 8!==d(function(){},"length",{value:8}).length}),y=String(String).split("String"),w=t.exports=function(t,e,r){"Symbol("===m(p(e),0,7)&&(e="["+v(p(e),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),r&&r.getter&&(e="get "+e),r&&r.setter&&(e="set "+e),(!a(t,"name")||c&&t.name!==e)&&(s?d(t,"name",{value:e,configurable:!0}):t.name=e),b&&r&&a(r,"arity")&&t.length!==r.arity&&d(t,"length",{value:r.arity});try{r&&a(r,"constructor")&&r.constructor?s&&d(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(i){}var n=f(t);return a(n,"source")||(n.source=g(y,"string"==typeof e?e:"")),t};Function.prototype.toString=w(function(){return o(this)&&h(this).source||u(this)},"toString")},350:function(t,e,r){"use strict";var n=r(3724),i=r(9297),o=Function.prototype,a=n&&Object.getOwnPropertyDescriptor,s=i(o,"name"),c=s&&"something"===function(){}.name,u=s&&(!n||n&&a(o,"name").configurable);t.exports={EXISTS:s,PROPER:c,CONFIGURABLE:u}},421:function(t){"use strict";t.exports={}},616:function(t,e,r){"use strict";var n=r(9039);t.exports=!n(function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")})},655:function(t,e,r){"use strict";var n=r(6955),i=String;t.exports=function(t){if("Symbol"===n(t))throw new TypeError("Cannot convert a Symbol value to a string");return i(t)}},757:function(t,e,r){"use strict";var n=r(7751),i=r(4901),o=r(1625),a=r(7040),s=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=n("Symbol");return i(e)&&o(e.prototype,s(t))}},1181:function(t,e,r){"use strict";var n,i,o,a=r(8622),s=r(4576),c=r(34),u=r(6699),l=r(9297),f=r(7629),h=r(6119),p=r(421),d="Object already initialized",m=s.TypeError,v=s.WeakMap,g=function(t){return o(t)?i(t):n(t,{})},b=function(t){return function(e){var r;if(!c(e)||(r=i(e)).type!==t)throw new m("Incompatible receiver, "+t+" required");return r}};if(a||f.state){var y=f.state||(f.state=new v);y.get=y.get,y.has=y.has,y.set=y.set,n=function(t,e){if(y.has(t))throw new m(d);return e.facade=t,y.set(t,e),e},i=function(t){return y.get(t)||{}},o=function(t){return y.has(t)}}else{var w=h("state");p[w]=!0,n=function(t,e){if(l(t,w))throw new m(d);return e.facade=t,u(t,w,e),e},i=function(t){return l(t,w)?t[w]:{}},o=function(t){return l(t,w)}}t.exports={set:n,get:i,has:o,enforce:g,getterFor:b}},1601:function(t){"use strict";t.exports=function(t){return t[1]}},1625:function(t,e,r){"use strict";var n=r(9504);t.exports=n({}.isPrototypeOf)},2106:function(t,e,r){"use strict";var n=r(283),i=r(4913);t.exports=function(t,e,r){return r.get&&n(r.get,e,{getter:!0}),r.set&&n(r.set,e,{setter:!0}),i.f(t,e,r)}},2140:function(t,e,r){"use strict";var n=r(8227),i=n("toStringTag"),o={};o[i]="z",t.exports="[object z]"===String(o)},2195:function(t,e,r){"use strict";var n=r(9504),i=n({}.toString),o=n("".slice);t.exports=function(t){return o(i(t),8,-1)}},2777:function(t,e,r){"use strict";var n=r(9565),i=r(34),o=r(757),a=r(5966),s=r(4270),c=r(8227),u=TypeError,l=c("toPrimitive");t.exports=function(t,e){if(!i(t)||o(t))return t;var r,c=a(t,l);if(c){if(void 0===e&&(e="default"),r=n(c,t,e),!i(r)||o(r))return r;throw new u("Can't convert object to primitive value")}return void 0===e&&(e="number"),s(t,e)}},2812:function(t){"use strict";var e=TypeError;t.exports=function(t,r){if(t<r)throw new e("Not enough arguments");return t}},2839:function(t,e,r){"use strict";var n=r(4576),i=n.navigator,o=i&&i.userAgent;t.exports=o?String(o):""},3392:function(t,e,r){"use strict";var n=r(9504),i=0,o=Math.random(),a=n(1.1.toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+a(++i+o,36)}},3706:function(t,e,r){"use strict";var n=r(9504),i=r(4901),o=r(7629),a=n(Function.toString);i(o.inspectSource)||(o.inspectSource=function(t){return a(t)}),t.exports=o.inspectSource},3724:function(t,e,r){"use strict";var n=r(9039);t.exports=!n(function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]})},4005:function(t,e,r){"use strict";r.r(e);var n=r(1601),i=r.n(n),o=r(6314),a=r.n(o),s=a()(i());s.push([t.id,".xjzh-img-canvas[data-v-450f21fe]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-450f21fe]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-450f21fe]{width:30px;height:30px;padding:0;margin:0;font-size:20px;border-radius:50%;text-align:center;line-height:30px;position:absolute;left:10px;top:10px;z-index:999;background-color:#fff;color:#0076f6}.xjzh-img-canvas .itemBox canvas[data-v-450f21fe]{margin:0;padding:0;width:100%;height:100%;will-change:transform;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.xjzh-img-canvas .itemBox[data-v-450f21fe]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-450f21fe]{width:100%!important;height:100%!important;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}",""]),e["default"]=s},4055:function(t,e,r){"use strict";var n=r(4576),i=r(34),o=n.document,a=i(o)&&i(o.createElement);t.exports=function(t){return a?o.createElement(t):{}}},4117:function(t){"use strict";t.exports=function(t){return null===t||void 0===t}},4270:function(t,e,r){"use strict";var n=r(9565),i=r(4901),o=r(34),a=TypeError;t.exports=function(t,e){var r,s;if("string"===e&&i(r=t.toString)&&!o(s=n(r,t)))return s;if(i(r=t.valueOf)&&!o(s=n(r,t)))return s;if("string"!==e&&i(r=t.toString)&&!o(s=n(r,t)))return s;throw new a("Can't convert object to primitive value")}},4495:function(t,e,r){"use strict";var n=r(9519),i=r(9039),o=r(4576),a=o.String;t.exports=!!Object.getOwnPropertySymbols&&!i(function(){var t=Symbol("symbol detection");return!a(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41})},4576:function(t,e,r){"use strict";var n=function(t){return t&&t.Math===Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||n("object"==typeof this&&this)||function(){return this}()||Function("return this")()},4603:function(t,e,r){"use strict";var n=r(6840),i=r(9504),o=r(655),a=r(2812),s=URLSearchParams,c=s.prototype,u=i(c.append),l=i(c["delete"]),f=i(c.forEach),h=i([].push),p=new s("a=1&a=2&b=3");p["delete"]("a",1),p["delete"]("b",void 0),p+""!=="a=2"&&n(c,"delete",function(t){var e=arguments.length,r=e<2?void 0:arguments[1];if(e&&void 0===r)return l(this,t);var n=[];f(this,function(t,e){h(n,{key:e,value:t})}),a(e,1);var i,s=o(t),c=o(r),p=0,d=0,m=!1,v=n.length;while(p<v)i=n[p++],m||i.key===s?(m=!0,l(this,i.key)):d++;while(d<v)i=n[d++],i.key===s&&i.value===c||u(this,i.key,i.value)},{enumerable:!0,unsafe:!0})},4901:function(t){"use strict";var e="object"==typeof document&&document.all;t.exports="undefined"==typeof e&&void 0!==e?function(t){return"function"==typeof t||t===e}:function(t){return"function"==typeof t}},4913:function(t,e,r){"use strict";var n=r(3724),i=r(5917),o=r(8686),a=r(8551),s=r(6969),c=TypeError,u=Object.defineProperty,l=Object.getOwnPropertyDescriptor,f="enumerable",h="configurable",p="writable";e.f=n?o?function(t,e,r){if(a(t),e=s(e),a(r),"function"===typeof t&&"prototype"===e&&"value"in r&&p in r&&!r[p]){var n=l(t,e);n&&n[p]&&(t[e]=r.value,r={configurable:h in r?r[h]:n[h],enumerable:f in r?r[f]:n[f],writable:!1})}return u(t,e,r)}:u:function(t,e,r){if(a(t),e=s(e),a(r),i)try{return u(t,e,r)}catch(n){}if("get"in r||"set"in r)throw new c("Accessors not supported");return"value"in r&&(t[e]=r.value),t}},5326:function(t,e,r){var n=r(4005);n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[t.id,n,""]]),n.locals&&(t.exports=n.locals);var i=r(9548).A;i("6d537929",n,!0,{sourceMap:!1,shadowMode:!1})},5745:function(t,e,r){"use strict";var n=r(7629);t.exports=function(t,e){return n[t]||(n[t]=e||{})}},5917:function(t,e,r){"use strict";var n=r(3724),i=r(9039),o=r(4055);t.exports=!n&&!i(function(){return 7!==Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a})},5966:function(t,e,r){"use strict";var n=r(9306),i=r(4117);t.exports=function(t,e){var r=t[e];return i(r)?void 0:n(r)}},6119:function(t,e,r){"use strict";var n=r(5745),i=r(3392),o=n("keys");t.exports=function(t){return o[t]||(o[t]=i(t))}},6314:function(t){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r="",n="undefined"!==typeof e[5];return e[4]&&(r+="@supports (".concat(e[4],") {")),e[2]&&(r+="@media ".concat(e[2]," {")),n&&(r+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),r+=t(e),n&&(r+="}"),e[2]&&(r+="}"),e[4]&&(r+="}"),r}).join("")},e.i=function(t,r,n,i,o){"string"===typeof t&&(t=[[null,t,void 0]]);var a={};if(n)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(a[c]=!0)}for(var u=0;u<t.length;u++){var l=[].concat(t[u]);n&&a[l[0]]||("undefined"!==typeof o&&("undefined"===typeof l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),r&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=r):l[2]=r),i&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=i):l[4]="".concat(i)),e.push(l))}},e}},6395:function(t){"use strict";t.exports=!1},6699:function(t,e,r){"use strict";var n=r(3724),i=r(4913),o=r(6980);t.exports=n?function(t,e,r){return i.f(t,e,o(1,r))}:function(t,e,r){return t[e]=r,t}},6823:function(t){"use strict";var e=String;t.exports=function(t){try{return e(t)}catch(r){return"Object"}}},6840:function(t,e,r){"use strict";var n=r(4901),i=r(4913),o=r(283),a=r(9433);t.exports=function(t,e,r,s){s||(s={});var c=s.enumerable,u=void 0!==s.name?s.name:e;if(n(r)&&o(r,u,s),s.global)c?t[e]=r:a(e,r);else{try{s.unsafe?t[e]&&(c=!0):delete t[e]}catch(l){}c?t[e]=r:i.f(t,e,{value:r,enumerable:!1,configurable:!s.nonConfigurable,writable:!s.nonWritable})}return t}},6955:function(t,e,r){"use strict";var n=r(2140),i=r(4901),o=r(2195),a=r(8227),s=a("toStringTag"),c=Object,u="Arguments"===o(function(){return arguments}()),l=function(t,e){try{return t[e]}catch(r){}};t.exports=n?o:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=l(e=c(t),s))?r:u?o(e):"Object"===(n=o(e))&&i(e.callee)?"Arguments":n}},6969:function(t,e,r){"use strict";var n=r(2777),i=r(757);t.exports=function(t){var e=n(t,"string");return i(e)?e:e+""}},6980:function(t){"use strict";t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},7040:function(t,e,r){"use strict";var n=r(4495);t.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},7566:function(t,e,r){"use strict";var n=r(6840),i=r(9504),o=r(655),a=r(2812),s=URLSearchParams,c=s.prototype,u=i(c.getAll),l=i(c.has),f=new s("a=1");!f.has("a",2)&&f.has("a",void 0)||n(c,"has",function(t){var e=arguments.length,r=e<2?void 0:arguments[1];if(e&&void 0===r)return l(this,t);var n=u(this,t);a(e,1);var i=o(r),s=0;while(s<n.length)if(n[s++]===i)return!0;return!1},{enumerable:!0,unsafe:!0})},7629:function(t,e,r){"use strict";var n=r(6395),i=r(4576),o=r(9433),a="__core-js_shared__",s=t.exports=i[a]||o(a,{});(s.versions||(s.versions=[])).push({version:"3.45.1",mode:n?"pure":"global",copyright:"© 2014-2025 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.45.1/LICENSE",source:"https://github.com/zloirock/core-js"})},7750:function(t,e,r){"use strict";var n=r(4117),i=TypeError;t.exports=function(t){if(n(t))throw new i("Can't call method on "+t);return t}},7751:function(t,e,r){"use strict";var n=r(4576),i=r(4901),o=function(t){return i(t)?t:void 0};t.exports=function(t,e){return arguments.length<2?o(n[t]):n[t]&&n[t][e]}},8227:function(t,e,r){"use strict";var n=r(4576),i=r(5745),o=r(9297),a=r(3392),s=r(4495),c=r(7040),u=n.Symbol,l=i("wks"),f=c?u["for"]||u:u&&u.withoutSetter||a;t.exports=function(t){return o(l,t)||(l[t]=s&&o(u,t)?u[t]:f("Symbol."+t)),l[t]}},8551:function(t,e,r){"use strict";var n=r(34),i=String,o=TypeError;t.exports=function(t){if(n(t))return t;throw new o(i(t)+" is not an object")}},8622:function(t,e,r){"use strict";var n=r(4576),i=r(4901),o=n.WeakMap;t.exports=i(o)&&/native code/.test(String(o))},8686:function(t,e,r){"use strict";var n=r(3724),i=r(9039);t.exports=n&&i(function(){return 42!==Object.defineProperty(function(){},"prototype",{value:42,writable:!1}).prototype})},8721:function(t,e,r){"use strict";var n=r(3724),i=r(9504),o=r(2106),a=URLSearchParams.prototype,s=i(a.forEach);n&&!("size"in a)&&o(a,"size",{get:function(){var t=0;return s(this,function(){t++}),t},configurable:!0,enumerable:!0})},8981:function(t,e,r){"use strict";var n=r(7750),i=Object;t.exports=function(t){return i(n(t))}},9039:function(t){"use strict";t.exports=function(t){try{return!!t()}catch(e){return!0}}},9297:function(t,e,r){"use strict";var n=r(9504),i=r(8981),o=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return o(i(t),e)}},9306:function(t,e,r){"use strict";var n=r(4901),i=r(6823),o=TypeError;t.exports=function(t){if(n(t))return t;throw new o(i(t)+" is not a function")}},9433:function(t,e,r){"use strict";var n=r(4576),i=Object.defineProperty;t.exports=function(t,e){try{i(n,t,{value:e,configurable:!0,writable:!0})}catch(r){n[t]=e}return e}},9504:function(t,e,r){"use strict";var n=r(616),i=Function.prototype,o=i.call,a=n&&i.bind.bind(o,o);t.exports=n?a:function(t){return function(){return o.apply(t,arguments)}}},9519:function(t,e,r){"use strict";var n,i,o=r(4576),a=r(2839),s=o.process,c=o.Deno,u=s&&s.versions||c&&c.version,l=u&&u.v8;l&&(n=l.split("."),i=n[0]>0&&n[0]<4?1:+(n[0]+n[1])),!i&&a&&(n=a.match(/Edge\/(\d+)/),(!n||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/),n&&(i=+n[1]))),t.exports=i},9548:function(t,e,r){"use strict";function n(t,e){for(var r=[],n={},i=0;i<e.length;i++){var o=e[i],a=o[0],s=o[1],c=o[2],u=o[3],l={id:t+":"+i,css:s,media:c,sourceMap:u};n[a]?n[a].parts.push(l):r.push(n[a]={id:a,parts:[l]})}return r}r.d(e,{A:function(){return d}});var i="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},a=i&&(document.head||document.getElementsByTagName("head")[0]),s=null,c=0,u=!1,l=function(){},f=null,h="data-vue-ssr-id",p="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function d(t,e,r,i){u=r,f=i||{};var a=n(t,e);return m(a),function(e){for(var r=[],i=0;i<a.length;i++){var s=a[i],c=o[s.id];c.refs--,r.push(c)}e?(a=n(t,e),m(a)):a=[];for(i=0;i<r.length;i++){c=r[i];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete o[c.id]}}}}function m(t){for(var e=0;e<t.length;e++){var r=t[e],n=o[r.id];if(n){n.refs++;for(var i=0;i<n.parts.length;i++)n.parts[i](r.parts[i]);for(;i<r.parts.length;i++)n.parts.push(g(r.parts[i]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{var a=[];for(i=0;i<r.parts.length;i++)a.push(g(r.parts[i]));o[r.id]={id:r.id,refs:1,parts:a}}}}function v(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function g(t){var e,r,n=document.querySelector("style["+h+'~="'+t.id+'"]');if(n){if(u)return l;n.parentNode.removeChild(n)}if(p){var i=c++;n=s||(s=v()),e=y.bind(null,n,i,!1),r=y.bind(null,n,i,!0)}else n=v(),e=w.bind(null,n),r=function(){n.parentNode.removeChild(n)};return e(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;e(t=n)}else r()}}var b=function(){var t=[];return function(e,r){return t[e]=r,t.filter(Boolean).join("\n")}}();function y(t,e,r,n){var i=r?"":n.css;if(t.styleSheet)t.styleSheet.cssText=b(e,i);else{var o=document.createTextNode(i),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function w(t,e){var r=e.css,n=e.media,i=e.sourceMap;if(n&&t.setAttribute("media",n),f.ssrId&&t.setAttribute(h,e.id),i&&(r+="\n/*# sourceURL="+i.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),t.styleSheet)t.styleSheet.cssText=r;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(r))}}},9565:function(t,e,r){"use strict";var n=r(616),i=Function.prototype.call;t.exports=n?i.bind(i):function(){return i.apply(i,arguments)}}},e={};function r(n){var i=e[n];if(void 0!==i)return i.exports;var o=e[n]={id:n,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.exports}r.m=t,function(){r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,{a:e}),e}}(),function(){r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})}}(),function(){r.u=function(t){return"xjzh-component.umd.min."+t+".js"}}(),function(){r.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"===typeof window)return window}}()}(),function(){r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}}(),function(){r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}(),function(){r.p=""}(),function(){r.b=document.baseURI||self.location.href}();var n={};return function(){"use strict";if(r.r(n),r.d(n,{default:function(){return T}}),"undefined"!==typeof window){var t=window.document.currentScript,e=t&&t.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);e&&(r.p=e[1])}var i=function(){var t=this,e=t._self._c;return e("div",{staticClass:"xjzh-img-canvas"},t._l(t.cameraObj,function(r,n){return e("div",{key:n,class:["itemBox",r.isFullScreen?"full-screen":""],style:{width:t.width,height:t.height},on:{click:function(e){return t.handleScreen(n)}}},[e("p",{directives:[{name:"show",rawName:"v-show",value:t.showTitle,expression:"showTitle"}],staticClass:"item-title"},[t._v(t._s(r.title))]),e("canvas",{ref:r.domeId,refInFor:!0})])}),0)},o=[],a=(r(4603),r(7566),r(8721),{name:"XjzhImgCanvas",props:{videoUrl:{type:String,default:"localhost:56000"},width:{type:String,default:"480px"},height:{type:String,default:"270px"},showTitle:{type:Boolean,default:!0},isSwitchSide:{type:Boolean,default:!1},canvasSize:{type:Array,default:()=>[1920,1080]}},watch:{isSwitchSide:{handler(t){console.log("object :>> ",t),this.cameraType[2].label=this.isSwitchSide?"显":"侧"}}},data(){return{cameraNum:0,cameraType:[{label:"斜",value:"main"},{label:"俯",value:"sub"},{label:"侧",value:"side"}],currentFullScreen:"",answerPhoto:{canvas:null,ctx:null,isPhoto:!1,canvasSize:[1920,1080]},cameraObj:null}},mounted(){this.initWorker()},methods:{initAnswerPhoto(){this.answerPhoto.canvas=document.createElement("canvas"),this.answerPhoto.ctx=this.answerPhoto.canvas.getContext("2d"),this.answerPhoto.canvas.width=this.canvasSize[0]*this.cameraNum,this.answerPhoto.canvas.height=this.canvasSize[1]},initCanvas(){for(let t=0;t<this.cameraNum;t++){let e=this.cameraType[t].value;this.cameraObj[e].canvas=this.$refs[this.cameraObj[e].domeId][0],this.cameraObj[e].ctx=this.cameraObj[e].canvas.getContext("2d"),this.cameraObj[e].canvas.width=this.canvasSize[0],this.cameraObj[e].canvas.height=this.canvasSize[1],this.cameraObj[e].imgBox=new Image}},initWorker(){const t=`ws://${this.videoUrl}/socket`;let e=0;this.destroyWorker(),this.destroyCanvasData(),console.log("object :>> url",t),this.worker=new Worker(new URL(r.p+r.u(221),r.b)),console.log("object :>> this.worker",this.worker),this.worker.onmessage=async t=>{const{type:r,data:n,event:i,error:o}=t.data;if("message"===r){if("number"===typeof n){this.cameraNum=n;for(let t=0;t<this.cameraNum;t++){let e=this.cameraType[t].value;this.cameraObj[e]={domeId:`canvas_${e}`,title:this.cameraType[t].label,canvas:null,ctx:null,totalFPS:0,showTotalFPS:0,frameSkip:0,imgBox:null,allUrl:[],isLoading:!1,isFullScreen:!1}}return this.$forceUpdate(),void this.$nextTick(()=>{this.initAnswerPhoto(),this.initCanvas()})}e++,this.showCanvas(this.cameraType[e-1].value,n),e=e>=this.cameraNum?0:e}"close"===r&&console.log("WebSocket closed:",i),"error"===r&&console.log(`WebSocket error: ${o.message}`)},this.worker.onerror=t=>{console.log(`Worker error: ${t.message}`)},this.cameraObj={},this.worker.postMessage({url:t})},destroyWorker(){this.worker&&(this.worker.terminate(),this.worker=null)},showCanvas(t,e){this.cameraObj[t].totalFPS++,this.cameraObj[t]&&this.cameraObj[t].imgBox&&this.cameraObj[t].ctx&&(this.currentFullScreen&&this.currentFullScreen!==t?this.destroyUrl(t):this.cameraObj[t].isLoading||(this.cameraObj[t].isLoading=!0,this.cameraObj[t].allUrl.unshift(URL.createObjectURL(e)),this.cameraObj[t].imgBox.src=this.cameraObj[t].allUrl[0],this.cameraObj[t].imgBox.onload=()=>{if(this.cameraObj[t].ctx){if(this.cameraObj[t].ctx.drawImage(this.cameraObj[t].imgBox,0,0,this.canvasSize[0],this.canvasSize[1]),this.cameraObj[t].isLoading=!1,this.answerPhoto.isPhoto)return this.cameraNum>0&&this.answerPhoto.ctx.drawImage(this.cameraObj.main.imgBox,0*this.answerPhoto.canvasSize[0],0,this.answerPhoto.canvasSize[0],this.answerPhoto.canvasSize[1]),this.cameraNum>1&&this.answerPhoto.ctx.drawImage(this.cameraObj.sub.imgBox,1*this.answerPhoto.canvasSize[0],0,this.answerPhoto.canvasSize[0],this.answerPhoto.canvasSize[1]),void(this.cameraNum>2&&this.answerPhoto.ctx.drawImage(this.cameraObj.side.imgBox,2*this.answerPhoto.canvasSize[0],0,this.answerPhoto.canvasSize[0],this.answerPhoto.canvasSize[1]));this.cameraObj[t].imgBox.src="",this.destroyUrl(t,this.cameraObj[t].maxUrlNum)}},this.cameraObj[t].imgBox.onerror=()=>{this.cameraObj[t].isLoading=!1,this.cameraObj[t]&&this.cameraObj[t].imgBox&&(this.cameraObj[t].imgBox.src="",this.destroyUrl(t,this.cameraObj[t].maxUrlNum))}))},handleScreen(t){this.$set(this.cameraObj[t],"isFullScreen",!this.cameraObj[t].isFullScreen),this.currentFullScreen=this.cameraObj[t].isFullScreen?t:"",this.$forceUpdate()},destroyCanvasData(){for(let t=0;t<this.cameraNum;t++){let e=this.cameraType[t].value;this.destroyUrl(e),this.destroyCanvas(e)}},destroyUrl(t){for(let e=0;e<this.cameraObj[t].allUrl.length;e++)URL.revokeObjectURL(this.cameraObj[t].allUrl[e]),delete this.cameraObj[t].allUrl[e];this.cameraObj[t].allUrl=[]},destroyCanvas(t){if(this.cameraObj[t])for(let e in this.cameraObj[t])"object"==typeof this.cameraObj[t][e]&&(this.cameraObj[t][e]=""),delete this.cameraObj[t][e]},allPhoto(){this.answerPhoto.isPhoto=!0;let t=(new Date).getTime();return new Promise(e=>{setTimeout(()=>{e(this.answerPhoto.canvas.toDataURL("image/jpeg"));let r=(new Date).getTime(),n=(r-t)/1e3;this.cameraObj.main.totalFPS=this.cameraObj.main.totalFPS+~~(30*n),this.cameraObj.sub.totalFPS=this.cameraObj.sub.totalFPS+~~(30*n),this.cameraObj.side.totalFPS=this.cameraObj.side.totalFPS+~~(30*n),this.answerPhoto.isPhoto=!1},200)})},selectPhoto(t){let e=this.cameraType[t-1].value;return this.videoObj.videoMergeSrc=this.cameraObj[e].canvas.toDataURL("image/jpeg"),this.videoObj.videoMergeSrc}},beforeDestroy(){this.answerPhoto.canvas=null,this.answerPhoto.ctx=null,this.destroyWorker(),this.destroyCanvasData()}}),s=a;r(5326);function c(t,e,r,n,i,o,a,s){var c,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=r,u._compiled=!0),n&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),a?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):i&&(c=s?function(){i.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:i),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}var u=c(s,i,o,!1,null,"450f21fe",null),l=u.exports,f=function(){var t=this,e=t._self._c;return e("div")},h=[],p={name:"VideoRtsp",data(){return{}}},d=p,m=c(d,f,h,!1,null,null,null),v=m.exports,g=function(){var t=this,e=t._self._c;return e("div")},b=[],y={name:"VideoWebGl",data(){return{}}},w=y,x=c(w,g,b,!1,null,null,null),j=x.exports;const S=[l,v,j],O=function(t){O.installed||S.map(e=>t.component(e.name,e))};"undefined"!==typeof window&&window.Vue&&O(window.Vue);var P={install:O},T=P}(),n}()});
 //# sourceMappingURL=xjzh-component.umd.min.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xjzh-component",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "main": "dist/xjzh-component.umd.min.js",
   "scripts": {