xjzh-component 0.1.10 → 0.1.12

package/dist/xjzh-component.common.js

@@ -448,22 +448,6 @@ module.exports = {};
 
 /***/ }),
 
-/***/ 564:
-/***/ (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__(3022);
-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("2a44b768", content, true, {"sourceMap":false,"shadowMode":false});
-
-/***/ }),
-
 /***/ 616:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -1575,7 +1559,23 @@ module.exports = userAgent ? String(userAgent) : '';
 
 /***/ }),
 
-/***/ 3022:
+/***/ 2998:
+/***/ (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__(8628);
+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("411494e9", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 3038:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -1589,7 +1589,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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, ".XjzhVideoList[data-v-652406a6]{display:flex;flex-wrap:wrap;justify-content:center}.XjzhVideoList[data-v-652406a6],.XjzhVideoList .videoItem .video-js[data-v-652406a6],.XjzhVideoList .videoItem .video-js video[data-v-652406a6]{width:100%;height:100%}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".xjzh-img-canvas[data-v-117b9ec4]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-117b9ec4]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-117b9ec4]{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-117b9ec4]{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-117b9ec4]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-117b9ec4]{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___);
 
@@ -2646,22 +2646,6 @@ module.exports = function (METHOD_NAME, ExpectedError) {
 };
 
 
-/***/ }),
-
-/***/ 4561:
-/***/ (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__(8643);
-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("03dc9351", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 4576:
@@ -5586,6 +5570,22 @@ module.exports = function (V, P) {
 };
 
 
+/***/ }),
+
+/***/ 6016:
+/***/ (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__(3038);
+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("9d2dde00", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 6080:
@@ -7214,6 +7214,22 @@ module.exports = function (cssWithMappingToString) {
 
 /***/ }),
 
+/***/ 6384:
+/***/ (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__(7862);
+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("5230f298", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 6395:
 /***/ (function(module) {
 
@@ -10059,6 +10075,27 @@ module.exports = function (namespace, method) {
 };
 
 
+/***/ }),
+
+/***/ 7862:
+/***/ (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, ".XjzhVideoList[data-v-5576a592]{width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:center}.XjzhVideoList .videoItem[data-v-5576a592]{overflow:hidden}.XjzhVideoList .videoItem .video-js[data-v-5576a592],.XjzhVideoList .videoItem .video-js video[data-v-5576a592]{width:100%;height:100%}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 8014:
@@ -10234,7 +10271,7 @@ module.exports = isCallable(WeakMap) && /native code/.test(String(WeakMap));
 
 /***/ }),
 
-/***/ 8643:
+/***/ 8628:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -10248,7 +10285,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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-90d07380]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-90d07380]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-90d07380]{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-90d07380]{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-90d07380]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-90d07380]{width:100%!important;height:100%!important;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".xjzh-img-canvas[data-v-6842db6e]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-6842db6e]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-6842db6e]{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-6842db6e]{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-6842db6e]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-6842db6e]{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___);
 
@@ -11311,7 +11348,7 @@ 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/xjzhImgCanvas.vue?vue&type=template&id=90d07380&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=117b9ec4&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -11586,7 +11623,7 @@ const InlineWorker = __webpack_require__(1161);
         this.worker = null;
       }
     },
-    showCanvas(type, blod) {
+    showCanvas(type, blob) {
       this.cameraObj[type].totalFPS++;
       if (!this.cameraObj[type] || !this.cameraObj[type].imgBox || !this.cameraObj[type].ctx) {
         return;
@@ -11597,7 +11634,7 @@ const InlineWorker = __webpack_require__(1161);
       }
       if (this.cameraObj[type].isLoading) return;
       this.cameraObj[type].isLoading = true;
-      this.cameraObj[type].allUrl.unshift(URL.createObjectURL(blod));
+      this.cameraObj[type].allUrl.unshift(URL.createObjectURL(blob));
       this.cameraObj[type].imgBox.src = this.cameraObj[type].allUrl[0];
       this.cameraObj[type].imgBox.onload = () => {
         if (!this.cameraObj[type].ctx) return;
@@ -11687,9 +11724,9 @@ const InlineWorker = __webpack_require__(1161);
 });
 ;// ./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=90d07380&prod&lang=scss&scoped=true
-var xjzhImgCanvasvue_type_style_index_0_id_90d07380_prod_lang_scss_scoped_true = __webpack_require__(4561);
-;// ./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=90d07380&prod&lang=scss&scoped=true
+// 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=117b9ec4&prod&lang=scss&scoped=true
+var xjzhImgCanvasvue_type_style_index_0_id_117b9ec4_prod_lang_scss_scoped_true = __webpack_require__(6016);
+;// ./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=117b9ec4&prod&lang=scss&scoped=true
 
 ;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -11804,14 +11841,14 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "90d07380",
+  "117b9ec4",
   null
   
 )
 
 /* 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/xjzhVideoList.vue?vue&type=template&id=652406a6&scoped=true
-var xjzhVideoListvue_type_template_id_652406a6_scoped_true_render = function render() {
+;// ./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/xjzhVideoList.vue?vue&type=template&id=5576a592&scoped=true
+var xjzhVideoListvue_type_template_id_5576a592_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -11841,7 +11878,7 @@ var xjzhVideoListvue_type_template_id_652406a6_scoped_true_render = function ren
     })]);
   }), 0);
 };
-var xjzhVideoListvue_type_template_id_652406a6_scoped_true_staticRenderFns = [];
+var xjzhVideoListvue_type_template_id_5576a592_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
@@ -74952,11 +74989,11 @@ function utils_debounce(func, wait, immediate) {
     },
     width: {
       type: String,
-      default: '480px'
+      default: '100%'
     },
     height: {
       type: String,
-      default: '270px'
+      default: '100px'
     },
     loop: {
       type: Boolean,
@@ -74977,15 +75014,26 @@ function utils_debounce(func, wait, immediate) {
       default: false
     }
   },
+  watch: {
+    'videoList': {
+      deep: true,
+      // true 深度监听
+      // 深度监听，可监听到对象、数组的变化
+      handler() {
+        this.$nextTick(() => {
+          this.videoList.forEach((item, index) => {
+            let id = `video${item.id}${index}`;
+            this.initPlayer(id, item.src, index);
+          });
+        });
+      }
+    }
+  },
   data() {
     return {
       playerList: [],
       isModifyArr: [],
-      fullScreenObj: {
-        0: false,
-        1: false,
-        2: false
-      }
+      isPlay: true
     };
   },
   mounted() {
@@ -75005,18 +75053,30 @@ function utils_debounce(func, wait, immediate) {
         this.playerList[i] = videojs(id, this.setOption(url), () => {});
         this.playerList[i].index = i;
       }
-      this.playerList[i].on('play', function () {
+      this.playerList[i].on('play', utils_debounce(function () {
         // 播放
-        _this.synchronize('play', i);
-      });
-      this.playerList[i].on('pause', function () {
+        if (!_this.playerList[i]) return;
+        _this.isPlay = true;
+        _this.handleIsModify(i);
+        for (let j = 0; j < _this.playerList.length; j++) {
+          if (_this.isModifyArr.includes(j)) continue;
+          _this.playerList[j].play();
+        }
+      }, 300));
+      this.playerList[i].on('pause', utils_debounce(function () {
         // 暂停
+        // 播放结束，不统一暂停
+        if (!_this.playerList[i]) return;
+        _this.isPlay = false;
         let currentTime = _this.playerList[i].currentTime(); // 获取当前播放时间
         let duration = _this.playerList[i].duration(); // 获取视频总时长
-        // 播放结束，不统一暂停
         if (currentTime === duration) return;
-        _this.synchronize('pause', i);
-      });
+        _this.handleIsModify(i);
+        for (let j = 0; j < _this.playerList.length; j++) {
+          if (_this.isModifyArr.includes(j)) continue;
+          _this.playerList[j].pause();
+        }
+      }, 300));
       this.playerList[i].on('ratechange', function () {
         // 倍数
         _this.handleIsModify(i);
@@ -75025,26 +75085,27 @@ function utils_debounce(func, wait, immediate) {
           _this.playerList[j].playbackRate(_this.playerList[i].playbackRate());
         }
       });
-      this.playerList[i].on('ended', function () {
-        // 播放结束
+
+      // this.playerList[i].on('ended', function() { // 
+      //   if (!_this.playerList[i]) return
+      //   _this.handleIsModify(i)
+      //   for (let j = 0; j < _this.playerList.length; j++) {
+      //     let currentTime = _this.playerList[j].currentTime() // 获取当前播放时间
+      //     let duration = _this.playerList[j].duration() // 获取视频总时长
+      //     if (_this.isModifyArr.includes(j) || currentTime !== duration) continue
+      //     _this.playerList[j].ended(_this.playerList[i].ended())
+      //   }
+      // })
+
+      this.playerList[i].on('seeking', utils_throttle(function () {
+        // 播放进度条同步
+        if (!_this.playerList[i]) return;
         _this.handleIsModify(i);
         for (let j = 0; j < _this.playerList.length; j++) {
-          let currentTime = _this.playerList[j].currentTime(); // 获取当前播放时间
-          let duration = _this.playerList[j].duration(); // 获取视频总时长
-          if (_this.isModifyArr.includes(j) || currentTime !== duration) continue;
-          _this.playerList[j].ended(_this.playerList[i].ended());
+          if (_this.isModifyArr.includes(j)) continue;
+          _this.playerList[j].currentTime(_this.playerList[i].currentTime());
         }
-      });
-      if (this.isSynchronizeTime) {
-        this.playerList[i].on('seeking', utils_throttle(function () {
-          // 播放进度条同步
-          _this.handleIsModify(i);
-          for (let j = 0; j < _this.playerList.length; j++) {
-            if (_this.isModifyArr.includes(j)) continue;
-            _this.playerList[j].currentTime(_this.playerList[i].currentTime());
-          }
-        }, 500));
-      }
+      }, 500));
     },
     setOption(src) {
       return {
@@ -75090,12 +75151,6 @@ function utils_debounce(func, wait, immediate) {
       }
       this.isModifyArr.push(index);
     },
-    synchronize(type, index) {
-      for (let i = 0; i < this.playerList.length; i++) {
-        if (index === i) continue;
-        this.playerList[i][type]();
-      }
-    },
     clearPlay() {
       if (this.playerList.length > 0) {
         for (let i = 0; i < this.playerList.length; i++) {
@@ -75113,9 +75168,9 @@ function utils_debounce(func, wait, immediate) {
 });
 ;// ./packages/components/xjzhVideoList.vue?vue&type=script&lang=js
  /* harmony default export */ var components_xjzhVideoListvue_type_script_lang_js = (xjzhVideoListvue_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/xjzhVideoList.vue?vue&type=style&index=0&id=652406a6&prod&lang=scss&scoped=true
-var xjzhVideoListvue_type_style_index_0_id_652406a6_prod_lang_scss_scoped_true = __webpack_require__(564);
-;// ./packages/components/xjzhVideoList.vue?vue&type=style&index=0&id=652406a6&prod&lang=scss&scoped=true
+// 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/xjzhVideoList.vue?vue&type=style&index=0&id=5576a592&prod&lang=scss&scoped=true
+var xjzhVideoListvue_type_style_index_0_id_5576a592_prod_lang_scss_scoped_true = __webpack_require__(6384);
+;// ./packages/components/xjzhVideoList.vue?vue&type=style&index=0&id=5576a592&prod&lang=scss&scoped=true
 
 ;// ./packages/components/xjzhVideoList.vue
 
@@ -75128,96 +75183,406 @@ var xjzhVideoListvue_type_style_index_0_id_652406a6_prod_lang_scss_scoped_true =
 
 var xjzhVideoList_component = normalizeComponent(
   components_xjzhVideoListvue_type_script_lang_js,
-  xjzhVideoListvue_type_template_id_652406a6_scoped_true_render,
-  xjzhVideoListvue_type_template_id_652406a6_scoped_true_staticRenderFns,
+  xjzhVideoListvue_type_template_id_5576a592_scoped_true_render,
+  xjzhVideoListvue_type_template_id_5576a592_scoped_true_staticRenderFns,
   false,
   null,
-  "652406a6",
+  "5576a592",
   null
   
 )
 
 /* harmony default export */ var xjzhVideoList = (xjzhVideoList_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() {
+;// ./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/xjzhImageBitmapCanvas.vue?vue&type=template&id=6842db6e&scoped=true
+var xjzhImageBitmapCanvasvue_type_template_id_6842db6e_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('div');
+  return _c('div', {
+    staticClass: "xjzh-img-canvas"
+  }, _vm._l(_vm.cameraObj, function (item, index) {
+    return _c('div', {
+      key: index,
+      class: ['itemBox', item.isFullScreen ? 'full-screen' : ''],
+      style: {
+        'width': _vm.width,
+        'height': _vm.height
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.handleScreen(index);
+        }
+      }
+    }, [_c('p', {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: _vm.showTitle,
+        expression: "showTitle"
+      }],
+      staticClass: "item-title"
+    }, [_vm._v(_vm._s(item.title))]), _c('canvas', {
+      ref: item.domeId,
+      refInFor: true
+    })]);
+  }), 0);
 };
-var videoRtspvue_type_template_id_345d94c7_staticRenderFns = [];
+var xjzhImageBitmapCanvasvue_type_template_id_6842db6e_scoped_true_staticRenderFns = [];
 
-;// ./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/videoRtsp.vue?vue&type=script&lang=js
-/* harmony default export */ var videoRtspvue_type_script_lang_js = ({
-  name: "VideoRtsp",
+;// ./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/xjzhImageBitmapCanvas.vue?vue&type=script&lang=js
+const xjzhImageBitmapCanvasvue_type_script_lang_js_InlineWorker = __webpack_require__(1161);
+/* harmony default export */ var xjzhImageBitmapCanvasvue_type_script_lang_js = ({
+  name: "XjzhImgCanvas",
+  props: {
+    videoUrl: {
+      type: String,
+      default: 'localhost:56000'
+    },
+    width: {
+      type: String,
+      default: '480px'
+    },
+    height: {
+      type: String,
+      default: '270px'
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    isSwitchSide: {
+      type: Boolean,
+      default: false
+    },
+    canvasSize: {
+      type: Array,
+      default: () => {
+        return [1920, 1080];
+      }
+    }
+  },
+  watch: {
+    isSwitchSide: {
+      handler(val) {
+        console.log('object :>> ', val);
+        this.cameraType[2].label = this.isSwitchSide ? '显' : '侧';
+      }
+    }
+  },
   data() {
-    return {};
-  }
-});
-;// ./packages/components/videoRtsp.vue?vue&type=script&lang=js
- /* harmony default export */ var components_videoRtspvue_type_script_lang_js = (videoRtspvue_type_script_lang_js); 
-;// ./packages/components/videoRtsp.vue
-
-
-
-
-
-/* normalize component */
-;
-var videoRtsp_component = normalizeComponent(
-  components_videoRtspvue_type_script_lang_js,
-  videoRtspvue_type_template_id_345d94c7_render,
-  videoRtspvue_type_template_id_345d94c7_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
+    return {
+      cameraNum: 0,
+      cameraType: [{
+        label: '斜',
+        value: 'main'
+      }, {
+        label: '俯',
+        value: 'sub'
+      }, {
+        label: '侧',
+        value: 'side'
+      }],
+      currentFullScreen: '',
+      answerPhoto: {
+        canvas: null,
+        ctx: null,
+        isPhoto: false,
+        canvasSize: [1920, 1080]
+      },
+      cameraObj: null,
+      worker: null
+    };
+  },
+  created() {
+    this.destroyWorker();
+    this.destroyCanvasData();
+    this.createdWorker();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initWorker();
+    });
+  },
+  methods: {
+    createdWorker() {
+      this.worker = new xjzhImageBitmapCanvasvue_type_script_lang_js_InlineWorker(function () {
+        self.onmessage = function (event) {
+          if (!event.data) return;
+          const {
+            url
+          } = event.data;
+          if (!url) return;
+          let cameraNum = 0;
+          let ws = new WebSocket(url);
+          // socket 连接
+          ws.onopen = function () {
+            self.postMessage({
+              type: 'open'
+            });
+          };
+          // socket 接收数据
+          ws.onmessage = function ({
+            data
+          }) {
+            if (data.size === 1) {
+              // 摄像头数量  || 是否开启人脸
+              let reader = new FileReader();
+              reader.onload = event => {
+                cameraNum = event.target.result.charCodeAt(0);
+                self.postMessage({
+                  type: 'message',
+                  data: cameraNum
+                });
+                reader = null;
+              };
+              reader.readAsText(data);
+            } else {
+              // 摄像头画面 数据
+              let newBlob = new Blob([data], {
+                type: 'image/jpeg'
+              });
+              self.postMessage({
+                type: 'message',
+                data: newBlob
+              });
+            }
+          };
+          // socket 断开
+          ws.onclose = function (event) {
+            self.postMessage({
+              type: 'close',
+              event: event
+            });
+            ws = null;
+            setTimeout(() => {
+              ws = new WebSocket(url);
+            }, 1000);
+          };
+          // socket 错误
+          ws.onerror = function (error) {
+            self.postMessage({
+              type: 'error',
+              error: error
+            });
+          };
+        };
+      });
+    },
+    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 i = 0; i < this.cameraNum; i++) {
+        let type = this.cameraType[i].value;
+        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];
+      }
+    },
+    initWorker() {
+      if (!this.videoUrl) return;
+      const url = `ws://${this.videoUrl}/socket`;
+      let count = 0;
+      this.worker.onmessage = event => {
+        const {
+          type,
+          data,
+          event: wsEvent,
+          error
+        } = event.data;
+        if (type === 'open') {
+          console.log('WebSocket open:');
+        }
+        if (type === 'message') {
+          if (typeof data === 'number') {
+            this.cameraNum = data;
+            for (let i = 0; i < this.cameraNum; i++) {
+              let typeVal = this.cameraType[i].value;
+              this.cameraObj[typeVal] = {
+                domeId: `canvas_${typeVal}`,
+                title: this.cameraType[i].label,
+                // 摄像头名称
+                canvas: null,
+                ctx: null,
+                totalFPS: 0,
+                // 单个摄像头 - 收到总帧数
+                showTotalFPS: 0,
+                // 单个摄像头 - 渲染总帧数
+                frameSkip: 0,
+                // 单个摄像头 - 跳帧 1（30），2（15），3（10）
 
-/* harmony default export */ var videoRtsp = (videoRtsp_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/videoWebGl.vue?vue&type=template&id=7a3612f3
-var videoWebGlvue_type_template_id_7a3612f3_render = function render() {
-  var _vm = this,
-    _c = _vm._self._c;
-  return _c('div');
-};
-var videoWebGlvue_type_template_id_7a3612f3_staticRenderFns = [];
+                allUrl: [],
+                // 所有图片地址
+                isLoading: false,
+                // 图片是否加载完
+                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 === 'close') {
+          console.log('WebSocket closed:', wsEvent);
+        }
+        if (type === 'error') {
+          console.log(`Worker error: ${error.message}`);
+        }
+      };
+      // worker 建立连接
+      this.cameraObj = {};
+      this.worker.postMessage({
+        url
+      });
+    },
+    // 销毁摄像头，worker
+    destroyWorker() {
+      if (this.worker) {
+        this.worker.terminate();
+        this.worker = null;
+      }
+    },
+    showCanvas(type, blob) {
+      this.cameraObj[type].totalFPS++;
+      if (!this.cameraObj[type] || !this.cameraObj[type].ctx) {
+        return;
+      }
+      if (this.currentFullScreen && this.currentFullScreen !== type) {
+        this.destroyUrl(type);
+        return;
+      }
+      if (this.cameraObj[type].isLoading) return;
+      this.cameraObj[type].isLoading = true;
+      createImageBitmap(blob, {
+        imageSmoothingQuality: 'low'
+      }).then(res => {
+        this.cameraObj[type].allUrl.unshift(res);
+        this.cameraObj[type].isLoading = false;
+      });
+      // this.cameraObj[type].allUrl.unshift(URL.createObjectURL(blob))
 
-;// ./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/videoWebGl.vue?vue&type=script&lang=js
-/* harmony default export */ var videoWebGlvue_type_script_lang_js = ({
-  name: "VideoWebGl",
-  data() {
-    return {};
+      if (this.cameraObj[type].ctx && this.cameraObj[type].ctx.drawImage && this.cameraObj[type].allUrl[0]) {
+        this.cameraObj[type].ctx.drawImage(this.cameraObj[type].allUrl[0], 0, 0, this.canvasSize[0], this.canvasSize[1]);
+      }
+      if (this.answerPhoto.isPhoto && this.cameraObj[type].allUrl[0]) {
+        // 拍照使用
+        if (this.cameraNum > 0) {
+          this.answerPhoto.ctx.drawImage(this.cameraObj.main.allUrl[0], 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.allUrl[0], 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.allUrl[0], this.answerPhoto.canvasSize[0] * 2, 0, this.answerPhoto.canvasSize[0], this.answerPhoto.canvasSize[1]);
+        }
+        return;
+      }
+      this.destroyUrl(type, this.cameraObj[type].maxUrlNum);
+    },
+    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++) {
+        if (this.cameraObj[type].allUrl[i]) {
+          this.cameraObj[type].allUrl[i].close();
+        }
+        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;
+    }
+  },
+  beforeDestroy() {
+    this.answerPhoto.canvas = null;
+    this.answerPhoto.ctx = null;
+    // this.destroyWorker()
+    // this.destroyCanvasData()
   }
 });
-;// ./packages/components/videoWebGl.vue?vue&type=script&lang=js
- /* harmony default export */ var components_videoWebGlvue_type_script_lang_js = (videoWebGlvue_type_script_lang_js); 
-;// ./packages/components/videoWebGl.vue
+;// ./packages/components/xjzhImageBitmapCanvas.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_xjzhImageBitmapCanvasvue_type_script_lang_js = (xjzhImageBitmapCanvasvue_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/xjzhImageBitmapCanvas.vue?vue&type=style&index=0&id=6842db6e&prod&lang=scss&scoped=true
+var xjzhImageBitmapCanvasvue_type_style_index_0_id_6842db6e_prod_lang_scss_scoped_true = __webpack_require__(2998);
+;// ./packages/components/xjzhImageBitmapCanvas.vue?vue&type=style&index=0&id=6842db6e&prod&lang=scss&scoped=true
+
+;// ./packages/components/xjzhImageBitmapCanvas.vue
 
 
 
+;
 
 
 /* normalize component */
-;
-var videoWebGl_component = normalizeComponent(
-  components_videoWebGlvue_type_script_lang_js,
-  videoWebGlvue_type_template_id_7a3612f3_render,
-  videoWebGlvue_type_template_id_7a3612f3_staticRenderFns,
+
+var xjzhImageBitmapCanvas_component = normalizeComponent(
+  components_xjzhImageBitmapCanvasvue_type_script_lang_js,
+  xjzhImageBitmapCanvasvue_type_template_id_6842db6e_scoped_true_render,
+  xjzhImageBitmapCanvasvue_type_template_id_6842db6e_scoped_true_staticRenderFns,
   false,
   null,
-  null,
+  "6842db6e",
   null
   
 )
 
-/* harmony default export */ var videoWebGl = (videoWebGl_component.exports);
+/* harmony default export */ var xjzhImageBitmapCanvas = (xjzhImageBitmapCanvas_component.exports);
 ;// ./packages/index.js
 
 
 
-
-const components = [xjzhImgCanvas, xjzhVideoList, videoRtsp, videoWebGl];
+const components = [xjzhImgCanvas, xjzhVideoList, xjzhImageBitmapCanvas];
 const install = function (Vue) {
   if (install.installed) return;
   components.map(component => Vue.component(component.name, component));