xjzh-component 0.1.18 → 0.1.19

package/dist/xjzh-component.common.js

@@ -35,27 +35,6 @@ module.exports = function (argument, usingIterator) {
 };
 
 
-/***/ }),
-
-/***/ 167:
-/***/ (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-video-list[data-v-02fd09c1]{display:flex;flex-wrap:wrap;justify-content:center}.xjzh-video-list[data-v-02fd09c1],.xjzh-video-list .videoItem .video-js[data-v-02fd09c1],.xjzh-video-list .videoItem .video-js video[data-v-02fd09c1]{width:100%;height:100%}", ""]);
-// Exports
-/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
-
-
 /***/ }),
 
 /***/ 184:
@@ -349,6 +328,27 @@ VTTCue.prototype.getCueAsHTML = function() {
 module.exports = VTTCue;
 
 
+/***/ }),
+
+/***/ 230:
+/***/ (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-bitmap-canvas[data-v-01c7d3f4]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-bitmap-canvas .itemBox[data-v-01c7d3f4]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-bitmap-canvas .itemBox .item-title[data-v-01c7d3f4]{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-bitmap-canvas .itemBox canvas[data-v-01c7d3f4]{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-bitmap-canvas .itemBox[data-v-01c7d3f4]:last-child{margin-bottom:0}.xjzh-bitmap-canvas .full-screen[data-v-01c7d3f4]{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___);
+
+
 /***/ }),
 
 /***/ 283:
@@ -450,6 +450,22 @@ var getBuiltIn = __webpack_require__(7751);
 module.exports = getBuiltIn('document', 'documentElement');
 
 
+/***/ }),
+
+/***/ 398:
+/***/ (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__(5208);
+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("22ba3b68", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 421:
@@ -581,6 +597,27 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ 1030:
+/***/ (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-set-canvas[data-v-5d178756]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.xjzh-set-canvas .video-item[data-v-5d178756]{width:640px;height:360px;background-color:#eee;border-radius:8px;margin-bottom:24px;position:relative;overflow:hidden}.xjzh-set-canvas .video-item .item-head[data-v-5d178756]{display:flex;justify-content:space-between;align-items:center;position:absolute;top:12px;right:12px;left:12px;z-index:99}.xjzh-set-canvas .video-item .item-head span[data-v-5d178756]{background-color:#fff;color:#0076f6;font-size:18px;padding:5px 8px;border-radius:6px}.xjzh-set-canvas .video-item .set-screen[data-v-5d178756]{width:20px;height:20px;cursor:pointer;position:absolute;right:12px;bottom:8px;font-size:18px}.xjzh-set-canvas .video-item .set-screen img[data-v-5d178756]{width:100%;height:100%}.xjzh-set-canvas .video-item .set-full-screen[data-v-5d178756]{width:48px;height:48px}.xjzh-set-canvas .video-item canvas[data-v-5d178756]{width:100%;height:100%}.xjzh-set-canvas .full-screen[data-v-5d178756]{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___);
+
+
 /***/ }),
 
 /***/ 1036:
@@ -1215,6 +1252,22 @@ module.exports = function (object, names) {
 };
 
 
+/***/ }),
+
+/***/ 2048:
+/***/ (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__(230);
+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("6b7ffce0", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 2106:
@@ -1283,27 +1336,6 @@ module.exports = !fails(function () {
 });
 
 
-/***/ }),
-
-/***/ 2285:
-/***/ (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-bitmap-canvas[data-v-9125dc2c]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-bitmap-canvas .itemBox[data-v-9125dc2c]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-bitmap-canvas .itemBox .item-title[data-v-9125dc2c]{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-bitmap-canvas .itemBox canvas[data-v-9125dc2c]{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-bitmap-canvas .itemBox[data-v-9125dc2c]:last-child{margin-bottom:0}.xjzh-bitmap-canvas .full-screen[data-v-9125dc2c]{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___);
-
-
 /***/ }),
 
 /***/ 2360:
@@ -1641,6 +1673,27 @@ module.exports = function (key) {
 };
 
 
+/***/ }),
+
+/***/ 3430:
+/***/ (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-set-canvas[data-v-8665cefa]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.xjzh-set-canvas .video-item[data-v-8665cefa]{width:640px;height:360px;background-color:#eee;border-radius:8px;margin-bottom:24px;position:relative;overflow:hidden}.xjzh-set-canvas .video-item .item-head[data-v-8665cefa]{display:flex;justify-content:space-between;align-items:center;position:absolute;top:12px;right:12px;left:12px;z-index:99}.xjzh-set-canvas .video-item .item-head span[data-v-8665cefa]{background-color:#fff;color:#0076f6;font-size:18px;padding:5px 8px;border-radius:6px}.xjzh-set-canvas .video-item .set-screen[data-v-8665cefa]{width:20px;height:20px;cursor:pointer;position:absolute;right:12px;bottom:8px;font-size:18px}.xjzh-set-canvas .video-item .set-screen img[data-v-8665cefa]{width:100%;height:100%}.xjzh-set-canvas .video-item .set-full-screen[data-v-8665cefa]{width:48px;height:48px}.xjzh-set-canvas .video-item canvas[data-v-8665cefa]{width:100%;height:100%}.xjzh-set-canvas .full-screen[data-v-8665cefa]{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___);
+
+
 /***/ }),
 
 /***/ 3479:
@@ -1657,6 +1710,27 @@ if(content.locals) module.exports = content.locals;
 var add = (__webpack_require__(9548)/* ["default"] */ .A)
 var update = add("669c5145", content, true, {"sourceMap":false,"shadowMode":false});
 
+/***/ }),
+
+/***/ 3612:
+/***/ (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-video-list[data-v-098960cc]{display:flex;flex-wrap:wrap;justify-content:center}.xjzh-video-list[data-v-098960cc],.xjzh-video-list .videoItem .video-js[data-v-098960cc],.xjzh-video-list .videoItem .video-js video[data-v-098960cc]{width:100%;height:100%}", ""]);
+// Exports
+/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 3626:
@@ -5038,6 +5112,27 @@ module.exports = getBuiltIn('Reflect', 'ownKeys') || function ownKeys(it) {
 };
 
 
+/***/ }),
+
+/***/ 5208:
+/***/ (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-bc833fa2]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-bc833fa2]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-bc833fa2]{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-bc833fa2]{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-bc833fa2]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-bc833fa2]{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___);
+
+
 /***/ }),
 
 /***/ 5360:
@@ -5602,6 +5697,22 @@ module.exports = !DESCRIPTORS && !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ 5960:
+/***/ (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__(1030);
+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("8f89561e", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 5966:
@@ -5795,22 +5906,6 @@ module.exports = function (obj) {
 };
 
 
-/***/ }),
-
-/***/ 6201:
-/***/ (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__(167);
-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("d6ea4be6", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 6269:
@@ -9537,6 +9632,22 @@ module.exports = DESCRIPTORS ? function (object, key, value) {
 };
 
 
+/***/ }),
+
+/***/ 6774:
+/***/ (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__(3612);
+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("816f6580", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ 6801:
@@ -10137,27 +10248,6 @@ module.exports = function (argument) {
 };
 
 
-/***/ }),
-
-/***/ 8022:
-/***/ (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-2f1f85c3]{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-wrap:wrap}.xjzh-img-canvas .itemBox[data-v-2f1f85c3]{border-radius:4px;transform:translateZ(0);position:relative;overflow:hidden}.xjzh-img-canvas .itemBox .item-title[data-v-2f1f85c3]{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-2f1f85c3]{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-2f1f85c3]:last-child{margin-bottom:0}.xjzh-img-canvas .full-screen[data-v-2f1f85c3]{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___);
-
-
 /***/ }),
 
 /***/ 8111:
@@ -10268,19 +10358,19 @@ module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACN
 
 /***/ }),
 
-/***/ 8464:
+/***/ 8448:
 /***/ (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__(8022);
+var content = __webpack_require__(3430);
 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("3e360232", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("216e8c2a", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -10302,22 +10392,6 @@ exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) {
 };
 
 
-/***/ }),
-
-/***/ 8511:
-/***/ (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__(2285);
-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("865e63ce", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 8551:
@@ -10583,27 +10657,6 @@ exports.f = NASHORN_BUG ? function propertyIsEnumerable(V) {
 } : $propertyIsEnumerable;
 
 
-/***/ }),
-
-/***/ 8779:
-/***/ (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-set-canvas[data-v-19dc6be0]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.xjzh-set-canvas .video-item[data-v-19dc6be0]{width:640px;height:360px;background-color:#eee;border-radius:4px 4px 4px 4px;margin-bottom:24px;position:relative}.xjzh-set-canvas .video-item .item-head[data-v-19dc6be0]{display:flex;justify-content:space-between;align-items:center;position:absolute;top:12px;right:12px;left:12px;z-index:99}.xjzh-set-canvas .video-item .item-head span[data-v-19dc6be0]{background-color:#fff;color:#0076f6;font-size:18px;padding:5px 8px;border-radius:6px}.xjzh-set-canvas .video-item .set-screen[data-v-19dc6be0]{width:20px;height:20px;cursor:pointer;position:absolute;right:12px;bottom:8px;font-size:18px}.xjzh-set-canvas .video-item .set-screen img[data-v-19dc6be0]{width:100%;height:100%}.xjzh-set-canvas .video-item .set-full-screen[data-v-19dc6be0]{width:48px;height:48px}.xjzh-set-canvas .video-item canvas[data-v-19dc6be0]{width:100%;height:100%}.xjzh-set-canvas .full-screen[data-v-19dc6be0]{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___);
-
-
 /***/ }),
 
 /***/ 8962:
@@ -10820,22 +10873,6 @@ if (!version && userAgent) {
 module.exports = version;
 
 
-/***/ }),
-
-/***/ 9525:
-/***/ (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__(8779);
-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("3b96abe8", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ 9539:
@@ -11447,7 +11484,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=2f1f85c3&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=bc833fa2&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -11655,6 +11692,16 @@ function initWorker() {
       default: () => {
         return [1920, 1080];
       }
+    },
+    // 每秒帧数
+    framesPerSecond: {
+      type: Number,
+      default: 30
+    },
+    // 一秒渲染多少帧
+    frameRate: {
+      type: Number,
+      default: 30
     }
   },
   watch: {
@@ -11744,7 +11791,7 @@ function initWorker() {
                 // 单个摄像头 - 收到总帧数
                 showTotalFPS: 0,
                 // 单个摄像头 - 渲染总帧数
-                frameSkip: 0,
+                frameRate: 0,
                 // 单个摄像头 - 跳帧 1（30），2（15），3（10）
 
                 imgBox: null,
@@ -11783,9 +11830,9 @@ function initWorker() {
     },
     showCanvas(type, blob) {
       this.cameraObj[type].totalFPS++;
-      if (!this.cameraObj[type] || !this.cameraObj[type].imgBox || !this.cameraObj[type].ctx) {
-        return;
-      }
+      if (!this.cameraObj[type] || !this.cameraObj[type].imgBox || !this.cameraObj[type].ctx) return;
+      if (this.cameraObj[type].totalFPS % (this.framesPerSecond / this.frameRate).toFixed(1) !== 0) return; // 跳帧处理
+
       if (this.currentFullScreen && this.currentFullScreen !== type) {
         this.destroyUrl(type);
         return;
@@ -11887,9 +11934,9 @@ function initWorker() {
 });
 ;// ./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=2f1f85c3&prod&lang=scss&scoped=true
-var xjzhImgCanvasvue_type_style_index_0_id_2f1f85c3_prod_lang_scss_scoped_true = __webpack_require__(8464);
-;// ./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=2f1f85c3&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=bc833fa2&prod&lang=scss&scoped=true
+var xjzhImgCanvasvue_type_style_index_0_id_bc833fa2_prod_lang_scss_scoped_true = __webpack_require__(398);
+;// ./packages/components/xjzhImgCanvas.vue?vue&type=style&index=0&id=bc833fa2&prod&lang=scss&scoped=true
 
 ;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -12004,14 +12051,359 @@ var component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "2f1f85c3",
+  "bc833fa2",
   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=02fd09c1&scoped=true
-var xjzhVideoListvue_type_template_id_02fd09c1_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/xjzhBitmapCanvas.vue?vue&type=template&id=01c7d3f4&scoped=true
+var xjzhBitmapCanvasvue_type_template_id_01c7d3f4_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "xjzh-bitmap-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 xjzhBitmapCanvasvue_type_template_id_01c7d3f4_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/xjzhBitmapCanvas.vue?vue&type=script&lang=js
+
+/* harmony default export */ var xjzhBitmapCanvasvue_type_script_lang_js = ({
+  name: "XjzhBitmapCanvas",
+  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];
+      }
+    },
+    // 每秒帧数
+    framesPerSecond: {
+      type: Number,
+      default: 30
+    },
+    // 一秒渲染多少帧
+    frameRate: {
+      type: Number,
+      default: 30
+    }
+  },
+  watch: {
+    isSwitchSide: {
+      handler() {
+        if (this.cameraType[2]) {
+          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: false,
+        canvasSize: [1920, 1080]
+      },
+      cameraObj: null,
+      worker: null
+    };
+  },
+  created() {
+    this.destroyWorker();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      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 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() {
+      this.worker = 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）
+
+                allUrl: [],
+                // 所有图片地址
+                isLoading: false,
+                // 图片是否加载完
+                isFullScreen: false // 画面是否全屏
+              };
+            }
+            this.$forceUpdate();
+            // 根据摄像头数量，初始化画布
+            this.$nextTick(() => {
+              this.initAnswerPhoto();
+              this.initCanvas();
+            });
+            return;
+          }
+          // 摄像头画面渲染
+          count++;
+          if (count == 1) {
+            this.showCanvas('main', data);
+          }
+          if (count == 2) {
+            this.showCanvas('sub', data);
+          }
+          if (count == 3) {
+            this.showCanvas('side', 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;
+      }
+      this.destroyCanvasData();
+    },
+    showCanvas(type, blob) {
+      this.cameraObj[type].totalFPS++;
+      if (!this.cameraObj[type] || !this.cameraObj[type].ctx) return;
+      if (this.cameraObj[type].totalFPS % (this.framesPerSecond / this.frameRate).toFixed(1) !== 0) 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 => {
+        if (this.cameraObj[type].allUrl) {
+          this.cameraObj[type].allUrl.unshift(res);
+          this.cameraObj[type].isLoading = false;
+        }
+      }).catch(err => {
+        console.log('object :>> createImageBitmap', err);
+        this.cameraObj[type].isLoading = false;
+      });
+      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])
+        this.cameraObj[type].ctx.drawImage(this.cameraObj[type].allUrl[0], 0, 0);
+      }
+      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) {
+      if (!this.cameraObj[type]) return;
+      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];
+      }
+      if (this.cameraObj[type].allUrl.length > 100) {
+        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();
+  }
+});
+;// ./packages/components/xjzhBitmapCanvas.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_xjzhBitmapCanvasvue_type_script_lang_js = (xjzhBitmapCanvasvue_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/xjzhBitmapCanvas.vue?vue&type=style&index=0&id=01c7d3f4&prod&lang=scss&scoped=true
+var xjzhBitmapCanvasvue_type_style_index_0_id_01c7d3f4_prod_lang_scss_scoped_true = __webpack_require__(2048);
+;// ./packages/components/xjzhBitmapCanvas.vue?vue&type=style&index=0&id=01c7d3f4&prod&lang=scss&scoped=true
+
+;// ./packages/components/xjzhBitmapCanvas.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var xjzhBitmapCanvas_component = normalizeComponent(
+  components_xjzhBitmapCanvasvue_type_script_lang_js,
+  xjzhBitmapCanvasvue_type_template_id_01c7d3f4_scoped_true_render,
+  xjzhBitmapCanvasvue_type_template_id_01c7d3f4_scoped_true_staticRenderFns,
+  false,
+  null,
+  "01c7d3f4",
+  null
+  
+)
+
+/* harmony default export */ var xjzhBitmapCanvas = (xjzhBitmapCanvas_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=098960cc&scoped=true
+var xjzhVideoListvue_type_template_id_098960cc_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -12041,7 +12433,7 @@ var xjzhVideoListvue_type_template_id_02fd09c1_scoped_true_render = function ren
     })]);
   }), 0);
 };
-var xjzhVideoListvue_type_template_id_02fd09c1_scoped_true_staticRenderFns = [];
+var xjzhVideoListvue_type_template_id_098960cc_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
@@ -75098,7 +75490,7 @@ var video_js = __webpack_require__(3479);
     },
     loop: {
       type: Boolean,
-      default: false
+      default: true
     },
     isFullscreen: {
       type: Boolean,
@@ -75120,6 +75512,7 @@ var video_js = __webpack_require__(3479);
       // 深度监听，可监听到对象、数组的变化
       handler() {
         this.$nextTick(() => {
+          this.clearPlay();
           this.videoList.forEach((item, index) => {
             let id = `video${index}`;
             if (!this.ids.includes(id)) {
@@ -75262,6 +75655,10 @@ var video_js = __webpack_require__(3479);
       if (this.playerList.length > 0) {
         for (let i = 0; i < this.playerList.length; i++) {
           this.playerList[i].pause();
+          this.playerList[i].off('play');
+          this.playerList[i].off('pause');
+          this.playerList[i].off('ratechange');
+          this.playerList[i].off('seeking');
           this.playerList[i].dispose();
           this.playerList[i] = null;
         }
@@ -75275,9 +75672,9 @@ var video_js = __webpack_require__(3479);
 });
 ;// ./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=02fd09c1&prod&lang=scss&scoped=true
-var xjzhVideoListvue_type_style_index_0_id_02fd09c1_prod_lang_scss_scoped_true = __webpack_require__(6201);
-;// ./packages/components/xjzhVideoList.vue?vue&type=style&index=0&id=02fd09c1&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=098960cc&prod&lang=scss&scoped=true
+var xjzhVideoListvue_type_style_index_0_id_098960cc_prod_lang_scss_scoped_true = __webpack_require__(6774);
+;// ./packages/components/xjzhVideoList.vue?vue&type=style&index=0&id=098960cc&prod&lang=scss&scoped=true
 
 ;// ./packages/components/xjzhVideoList.vue
 
@@ -75290,140 +75687,239 @@ var xjzhVideoListvue_type_style_index_0_id_02fd09c1_prod_lang_scss_scoped_true =
 
 var xjzhVideoList_component = normalizeComponent(
   components_xjzhVideoListvue_type_script_lang_js,
-  xjzhVideoListvue_type_template_id_02fd09c1_scoped_true_render,
-  xjzhVideoListvue_type_template_id_02fd09c1_scoped_true_staticRenderFns,
+  xjzhVideoListvue_type_template_id_098960cc_scoped_true_render,
+  xjzhVideoListvue_type_template_id_098960cc_scoped_true_staticRenderFns,
   false,
   null,
-  "02fd09c1",
+  "098960cc",
   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/xjzhBitmapCanvas.vue?vue&type=template&id=9125dc2c&scoped=true
-var xjzhBitmapCanvasvue_type_template_id_9125dc2c_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/xjzhSetCanvas.vue?vue&type=template&id=5d178756&scoped=true
+var xjzhSetCanvasvue_type_template_id_5d178756_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
-    staticClass: "xjzh-bitmap-canvas"
-  }, _vm._l(_vm.cameraObj, function (item, index) {
+    staticClass: "xjzh-set-canvas"
+  }, _vm._l(_vm.cameraArr, function (item, index) {
     return _c('div', {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: item.isShow,
+        expression: "item.isShow"
+      }],
       key: index,
-      class: ['itemBox', item.isFullScreen ? 'full-screen' : ''],
-      style: {
-        'width': _vm.width,
-        'height': _vm.height
+      staticClass: "video-item",
+      class: [item.isFullScreen ? ' full-screen' : '']
+    }, [_c('div', {
+      staticClass: "item-head"
+    }, [_c('span', [_vm._v(_vm._s(item.name))]), _c('el-select', {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: _vm.initPosition.length > 0,
+        expression: "initPosition.length > 0"
+      }],
+      staticClass: "item-select",
+      attrs: {
+        "placeholder": "请选择设备",
+        "disabled": item.isFullScreen
+      },
+      on: {
+        "change": function ($event) {
+          return _vm.handleSelect(index);
+        }
+      },
+      model: {
+        value: item.selectVal,
+        callback: function ($$v) {
+          _vm.$set(item, "selectVal", $$v);
+        },
+        expression: "item.selectVal"
+      }
+    }, _vm._l(_vm.videoList, function (it) {
+      return _c('el-option', {
+        key: it.value,
+        attrs: {
+          "label": it.label,
+          "disabled": item.disabled,
+          "value": it.value
+        }
+      });
+    }), 1)], 1), _c('canvas', {
+      attrs: {
+        "id": item.domeId
       },
       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
-    })]);
+    }), _c('div', {
+      class: ['set-screen', item.isFullScreen ? 'set-full-screen' : ''],
+      on: {
+        "click": function ($event) {
+          return _vm.handleScreen(index);
+        }
+      }
+    }, [_c('img', {
+      attrs: {
+        "src": item.isFullScreen ? _vm.screen : _vm.fullScreen,
+        "alt": ""
+      }
+    })])]);
   }), 0);
 };
-var xjzhBitmapCanvasvue_type_template_id_9125dc2c_scoped_true_staticRenderFns = [];
+var xjzhSetCanvasvue_type_template_id_5d178756_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/xjzhBitmapCanvas.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/xjzhSetCanvas.vue?vue&type=script&lang=js
 
-/* harmony default export */ var xjzhBitmapCanvasvue_type_script_lang_js = ({
-  name: "XjzhBitmapCanvas",
+
+
+
+
+
+
+
+
+/* harmony default export */ var xjzhSetCanvasvue_type_script_lang_js = ({
+  name: 'XjzhSetCanvas',
   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
     },
+    storeCameraInfo: {
+      type: Object,
+      default: () => {
+        return {
+          cameras: 3,
+          // 摄像头数量（不包含人脸摄像头） 2-斜、俯 | 3-斜、俯、侧、
+          enableFace: 1 // 是否启动人脸 0-未启用 | 1-启动
+        };
+      }
+    },
+    // 每秒帧数
+    framesPerSecond: {
+      type: Number,
+      default: 30
+    },
+    // 一秒渲染多少帧
+    frameRate: {
+      type: Number,
+      default: 30
+    },
     canvasSize: {
       type: Array,
       default: () => {
         return [1920, 1080];
       }
-    }
-  },
-  watch: {
-    isSwitchSide: {
-      handler() {
-        if (this.cameraType[2]) {
-          this.cameraType[2].label = this.isSwitchSide ? '显' : '侧';
-        }
+    },
+    initPosition: {
+      type: Array,
+      default: () => {
+        return [0, 1, 2, 3];
       }
     }
   },
   data() {
     return {
+      ip: '',
       cameraNum: 0,
+      cameraArr: [],
       cameraType: [{
-        label: '斜',
+        label: '斜视摄像头',
         value: 'main'
       }, {
-        label: '俯',
+        label: '俯视摄像头',
         value: 'sub'
       }, {
-        label: '侧',
+        label: '侧视摄像头',
         value: 'side'
+      }, {
+        label: '人脸识别摄像头',
+        value: 'face'
+      }],
+      initVideoList: [{
+        value: '0',
+        label: '摄像头设备1',
+        disabled: false
+      }, {
+        value: '1',
+        label: '摄像头设备2',
+        disabled: false
+      }, {
+        value: '2',
+        label: '摄像头设备3',
+        disabled: false
+      }, {
+        value: '3',
+        label: '摄像头设备4',
+        disabled: false
       }],
+      position: [],
+      isSwicth: false,
       currentFullScreen: '',
-      answerPhoto: {
-        canvas: null,
-        ctx: null,
-        isPhoto: false,
-        canvasSize: [1920, 1080]
-      },
-      cameraObj: null,
-      worker: null
+      videoList: [],
+      worker: null,
+      faceWorker: null,
+      isEnable: false,
+      fullScreen: __webpack_require__(8382),
+      screen: __webpack_require__(3102)
     };
   },
   created() {
-    this.destroyWorker();
+    this.createdCamera();
   },
   mounted() {
+    this.getCameraConfig();
     this.$nextTick(() => {
       this.initWorker();
+      if (this.storeCameraInfo.enableFace == 1) {
+        this.initWorkerFace();
+      }
     });
+    this.isSwicth = false;
   },
   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];
+    // 获取摄像头下拉
+    getCameraConfig() {
+      this.position = [];
+      this.position = this.initPosition ? JSON.parse(JSON.stringify(this.initPosition)) : [];
+      this.$nextTick(() => {
+        for (let i = 0; i < this.position.length; i++) {
+          this.cameraArr[i].selectVal = String(this.position[i]);
+        }
+      });
     },
-    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];
+    // 初始化摄像头数据
+    createdCamera() {
+      this.cameraArr = [];
+      for (let i = 0; i < this.cameraType.length; i++) {
+        this.cameraArr.push({
+          selectVal: '',
+          type: this.cameraType[i].value,
+          name: this.cameraType[i].label,
+          domeId: `${this.cameraType[i].value}Canvas`,
+          canvas: null,
+          ctx: null,
+          allUrl: [],
+          totalFPS: 0,
+          imgBox: new Image(),
+          isLoading: false,
+          isFullScreen: false,
+          isShow: true
+        });
       }
     },
+    // 斜，俯，侧摄像头socket
     initWorker() {
       this.worker = initWorker();
       if (!this.videoUrl) return;
@@ -75442,48 +75938,47 @@ var xjzhBitmapCanvasvue_type_template_id_9125dc2c_scoped_true_staticRenderFns =
         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）
-
-                allUrl: [],
-                // 所有图片地址
-                isLoading: false,
-                // 图片是否加载完
-                isFullScreen: false // 画面是否全屏
-              };
+            if (this.videoList.length === 0) {
+              for (let i = 0; i < this.cameraNum; i++) {
+                if (this.storeCameraInfo.cameras < i + 1) {
+                  this.initVideoList[i].disabled = true;
+                }
+                this.videoList.push(this.initVideoList[i]);
+              }
             }
-            this.$forceUpdate();
             // 根据摄像头数量，初始化画布
             this.$nextTick(() => {
-              this.initAnswerPhoto();
               this.initCanvas();
             });
             return;
           }
           // 摄像头画面渲染
           count++;
-          if (count == 1) {
-            this.showCanvas('main', data);
-          }
-          if (count == 2) {
-            this.showCanvas('sub', data);
-          }
-          if (count == 3) {
-            this.showCanvas('side', data);
+          if (this.isSwicth) {
+            if (count == this.initPosition.indexOf(this.position[0]) + 1) {
+              this.showCanvas(0, data);
+            }
+            if (count == this.initPosition.indexOf(this.position[1]) + 1) {
+              this.showCanvas(1, data);
+            }
+            if (count == this.initPosition.indexOf(this.position[2]) + 1) {
+              this.showCanvas(2, data);
+            }
+            if (count == this.initPosition.indexOf(this.position[3]) + 1) {
+              this.showCanvas(3, data);
+            }
+          } else {
+            if (count == 1) {
+              this.showCanvas(0, data);
+            }
+            if (count == 2) {
+              this.showCanvas(1, data);
+            }
+            if (count == 3) {
+              this.showCanvas(2, data);
+            }
           }
-          // this.showCanvas(this.cameraType[count - 1].value, data)
+          // this.showCanvas(count - 1, data)
           count = count >= this.cameraNum ? 0 : count;
         }
         if (type === 'close') {
@@ -75499,120 +75994,182 @@ var xjzhBitmapCanvasvue_type_template_id_9125dc2c_scoped_true_staticRenderFns =
         url
       });
     },
-    // 销毁摄像头，worker
-    destroyWorker() {
-      if (this.worker) {
-        this.worker.terminate();
-        this.worker = null;
-      }
-      this.destroyCanvasData();
-    },
-    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))
-
-      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]);
+    // 人脸摄像头socket
+    initWorkerFace() {
+      this.faceWorker = initWorker();
+      if (!this.videoUrl) return;
+      const url = `ws://${this.videoUrl}/face`;
+      this.faceWorker.onmessage = event => {
+        const {
+          type,
+          data,
+          event: wsEvent,
+          error
+        } = event.data;
+        if (type === 'open') {
+          console.log('WebSocket open:');
         }
-        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 (type === 'message') {
+          // 摄像头数据及摄像头画面数据读取
+          if (typeof data === 'number') {
+            // data 0 隐藏人脸， 1显示人脸
+            if (data == 0) {
+              this.isEnable = false;
+              return;
+            }
+            if (!this.faceTimer) {
+              this.clearFaceTimer();
+              this.faceTimer = setTimeout(() => {
+                if (this.videoList.length == 0) {
+                  this.initVideoList[this.cameraNum].disabled = !this.isEnable;
+                  this.videoList = [this.initVideoList[this.cameraNum]];
+                } else if (this.videoList.length !== this.cameraNum + 1 && this.cameraNum > 0) {
+                  this.initVideoList[this.cameraNum].disabled = !this.isEnable;
+                  this.videoList = [...this.videoList, this.initVideoList[this.cameraNum]];
+                }
+              }, 100);
+            }
+            return;
+          }
+          if (this.isSwicth && this.initPosition.indexOf(this.position[3]) < 4) {
+            if (this.initPosition.indexOf(this.position[0]) == 3) {
+              this.showCanvas(0, data);
+            }
+            if (this.initPosition.indexOf(this.position[1]) == 3) {
+              this.showCanvas(1, data);
+            }
+            if (this.initPosition.indexOf(this.position[2]) == 3) {
+              this.showCanvas(2, data);
+            }
+            if (this.initPosition.indexOf(this.position[3]) == 3) {
+              this.showCanvas(3, data);
+            }
+          } else {
+            this.showCanvas(3, data);
+          }
         }
-        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]);
+        if (type === 'close') {
+          console.log('WebSocket closed:', wsEvent);
         }
+        if (type === 'error') {
+          console.log(`WebSocket error: ${error.message}`);
+        }
+      };
+      this.faceWorker.onerror = error => {
+        console.log(`Worker error: ${error.message}`);
+      };
+      this.faceWorker.postMessage({
+        url
+      });
+    },
+    clearFaceTimer() {
+      if (this.faceTimer) {
+        clearTimeout(this.faceTimer);
+        this.faceTimer = null;
+      }
+    },
+    // 初始化canvas数据
+    initCanvas() {
+      for (let i = 0; i < this.cameraType.length; i++) {
+        this.cameraArr[i].canvas = document.getElementById(this.cameraArr[i].domeId);
+        this.cameraArr[i].ctx = this.cameraArr[i].canvas.getContext('2d');
+        this.cameraArr[i].canvas.width = this.canvasSize[0];
+        this.cameraArr[i].canvas.height = this.canvasSize[1];
+        this.cameraArr[i].imgBox = new Image();
+      }
+    },
+    // 渲染摄像头画面
+    showCanvas(i, blob) {
+      this.cameraArr[i].totalFPS++;
+      if (!this.cameraArr[i] || !this.cameraArr[i].imgBox || !this.cameraArr[i].ctx) return; // 跳过没有canvas对象画面
+      if (this.cameraArr[i].totalFPS % (this.framesPerSecond / this.frameRate).toFixed(1) !== 0) return; // 跳帧处理
+      if (this.currentFullScreen && this.currentFullScreen !== i) {
+        // 全屏 其他画面不做处理
+        this.destroyUrl(i);
         return;
       }
-      this.destroyUrl(type, this.cameraObj[type].maxUrlNum);
+      if (this.cameraArr[i].isLoading) return;
+      this.cameraArr[i].isLoading = true;
+      this.cameraArr[i].allUrl.unshift(URL.createObjectURL(blob));
+      this.cameraArr[i].imgBox.src = this.cameraArr[i].allUrl[0];
+      this.cameraArr[i].imgBox.onload = () => {
+        if (!this.cameraArr[i].ctx) return;
+        this.cameraArr[i].ctx.drawImage(this.cameraArr[i].imgBox, 0, 0, this.canvasSize[0], this.canvasSize[1]);
+        this.cameraArr[i].isLoading = false;
+        // 清除内存
+        this.cameraArr[i].imgBox.src = '';
+        this.destroyUrl(i, this.cameraArr[i].maxUrlNum);
+      };
+      this.cameraArr[i].imgBox.onerror = () => {
+        this.cameraArr[i].isLoading = false;
+        if (!this.cameraArr[i] || !this.cameraArr[i].imgBox) return;
+        this.cameraArr[i].imgBox.src = '';
+        this.destroyUrl(i, this.cameraArr[i].maxUrlNum);
+      };
     },
-    handleScreen(type) {
-      this.$set(this.cameraObj[type], 'isFullScreen', !this.cameraObj[type].isFullScreen);
-      this.currentFullScreen = this.cameraObj[type].isFullScreen ? type : '';
+    // 切换摄像头画面
+    handleSelect(i) {
+      this.isSwicth = true;
+      this.currentType = this.cameraArr[i].selectVal;
+      this.position[i] = Number(this.cameraArr[i].selectVal);
+    },
+    // 全屏视频画面
+    handleScreen(index) {
+      this.cameraArr[index].isFullScreen = !this.cameraArr[index].isFullScreen;
+      this.currentFullScreen = this.cameraArr[index].isFullScreen ? index : '';
       this.$forceUpdate();
     },
-    destroyCanvasData() {
-      for (let i = 0; i < this.cameraNum; i++) {
-        let type = this.cameraType[i].value;
-        this.destroyUrl(type);
-        this.destroyCanvas(type);
-      }
+    // 侧视，显微镜画面切换
+    switchVideo() {
+      if (!this.cameraArr[3]) return;
+      let plugOut = JSON.parse(localStorage.getItem('plugOut'));
+      this.cameraArr[3].title = plugOut == 0 ? '显微镜画面' : '侧视画面';
     },
-    destroyUrl(type) {
-      if (!this.cameraObj[type]) return;
-      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];
+    // 销毁摄像头，worker
+    destroyWorker() {
+      if (this.worker) {
+        this.worker.terminate();
+        this.worker = null;
       }
-      if (this.cameraObj[type].allUrl.length > 100) {
-        this.cameraObj[type].allUrl = [];
+      if (this.faceWorker) {
+        this.faceWorker.terminate();
+        this.faceWorker = null;
       }
-    },
-    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] = '';
+      this.$nextTick(() => {
+        for (let i = 0; i < this.cameraArr.length; i++) {
+          this.destroyUrl(i);
+          this.destroyCanvas(i);
         }
-        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;
+    destroyUrl(index) {
+      for (let i = 0; i < this.cameraArr[index].allUrl.length; i++) {
+        URL.revokeObjectURL(this.cameraArr[index].allUrl[i]);
+        delete this.cameraArr[index].allUrl[i];
+      }
+      this.cameraArr[index].allUrl = [];
+    },
+    destroyCanvas(index) {
+      if (!this.cameraArr[index]) return;
+      for (let key in this.cameraArr[index]) {
+        if (typeof this.cameraArr[index][key] == 'object') {
+          this.cameraArr[index][key] = '';
+        }
+        delete this.cameraArr[index][key];
+      }
     }
   },
   beforeDestroy() {
-    this.answerPhoto.canvas = null;
-    this.answerPhoto.ctx = null;
     this.destroyWorker();
   }
 });
-;// ./packages/components/xjzhBitmapCanvas.vue?vue&type=script&lang=js
- /* harmony default export */ var components_xjzhBitmapCanvasvue_type_script_lang_js = (xjzhBitmapCanvasvue_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/xjzhBitmapCanvas.vue?vue&type=style&index=0&id=9125dc2c&prod&lang=scss&scoped=true
-var xjzhBitmapCanvasvue_type_style_index_0_id_9125dc2c_prod_lang_scss_scoped_true = __webpack_require__(8511);
-;// ./packages/components/xjzhBitmapCanvas.vue?vue&type=style&index=0&id=9125dc2c&prod&lang=scss&scoped=true
+;// ./packages/components/xjzhSetCanvas.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_xjzhSetCanvasvue_type_script_lang_js = (xjzhSetCanvasvue_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/xjzhSetCanvas.vue?vue&type=style&index=0&id=5d178756&prod&lang=scss&scoped=true
+var xjzhSetCanvasvue_type_style_index_0_id_5d178756_prod_lang_scss_scoped_true = __webpack_require__(5960);
+;// ./packages/components/xjzhSetCanvas.vue?vue&type=style&index=0&id=5d178756&prod&lang=scss&scoped=true
 
-;// ./packages/components/xjzhBitmapCanvas.vue
+;// ./packages/components/xjzhSetCanvas.vue
 
 
 
@@ -75621,20 +76178,20 @@ var xjzhBitmapCanvasvue_type_style_index_0_id_9125dc2c_prod_lang_scss_scoped_tru
 
 /* normalize component */
 
-var xjzhBitmapCanvas_component = normalizeComponent(
-  components_xjzhBitmapCanvasvue_type_script_lang_js,
-  xjzhBitmapCanvasvue_type_template_id_9125dc2c_scoped_true_render,
-  xjzhBitmapCanvasvue_type_template_id_9125dc2c_scoped_true_staticRenderFns,
+var xjzhSetCanvas_component = normalizeComponent(
+  components_xjzhSetCanvasvue_type_script_lang_js,
+  xjzhSetCanvasvue_type_template_id_5d178756_scoped_true_render,
+  xjzhSetCanvasvue_type_template_id_5d178756_scoped_true_staticRenderFns,
   false,
   null,
-  "9125dc2c",
+  "5d178756",
   null
   
 )
 
-/* harmony default export */ var xjzhBitmapCanvas = (xjzhBitmapCanvas_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/xjzhSetCanvas.vue?vue&type=template&id=19dc6be0&scoped=true
-var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_render = function render() {
+/* harmony default export */ var xjzhSetCanvas = (xjzhSetCanvas_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/xjzhSetBitmapCanvas.vue?vue&type=template&id=8665cefa&scoped=true
+var xjzhSetBitmapCanvasvue_type_template_id_8665cefa_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -75709,19 +76266,13 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_render = function ren
     })])]);
   }), 0);
 };
-var xjzhSetCanvasvue_type_template_id_19dc6be0_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/xjzhSetCanvas.vue?vue&type=script&lang=js
-
-
+var xjzhSetBitmapCanvasvue_type_template_id_8665cefa_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/xjzhSetBitmapCanvas.vue?vue&type=script&lang=js
 
 
 
-
-
-
-/* harmony default export */ var xjzhSetCanvasvue_type_script_lang_js = ({
+/* harmony default export */ var xjzhSetBitmapCanvasvue_type_script_lang_js = ({
   name: 'XjzhSetCanvas',
   props: {
     videoUrl: {
@@ -75738,14 +76289,20 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns = [];
         return {
           cameras: 3,
           // 摄像头数量（不包含人脸摄像头） 2-斜、俯 | 3-斜、俯、侧、
-          enableFace: 1,
-          // 是否启动人脸 0-未启用 | 1-启动
-          frameRate: 0,
-          // 视频画面帧数
-          socketCameras: 0
+          enableFace: 1 // 是否启动人脸 0-未启用 | 1-启动
         };
       }
     },
+    // 每秒帧数
+    framesPerSecond: {
+      type: Number,
+      default: 30
+    },
+    // 一秒渲染多少帧
+    frameRate: {
+      type: Number,
+      default: 30
+    },
     canvasSize: {
       type: Array,
       default: () => {
@@ -75841,7 +76398,7 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns = [];
           canvas: null,
           ctx: null,
           allUrl: [],
-          imgBox: new Image(),
+          totalFPS: 0,
           isLoading: false,
           isFullScreen: false,
           isShow: true
@@ -75851,6 +76408,7 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns = [];
     // 斜，俯，侧摄像头socket
     initWorker() {
       this.worker = initWorker();
+      console.log('object :>> ', this.videoUrl);
       if (!this.videoUrl) return;
       const url = `ws://${this.videoUrl}/socket`;
       let count = 0;
@@ -76004,36 +76562,44 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns = [];
         this.cameraArr[i].ctx = this.cameraArr[i].canvas.getContext('2d');
         this.cameraArr[i].canvas.width = this.canvasSize[0];
         this.cameraArr[i].canvas.height = this.canvasSize[1];
-        this.cameraArr[i].imgBox = new Image();
       }
     },
     // 渲染摄像头画面
     showCanvas(i, blob) {
-      if (!this.cameraArr[i] || !this.cameraArr[i].imgBox || !this.cameraArr[i].ctx) {
-        return;
-      }
+      this.cameraArr[i].totalFPS++;
+      if (!this.cameraArr[i] || !this.cameraArr[i].ctx) return; // 跳过没有canvas对象画面
+      if (this.cameraArr[i].totalFPS % (this.framesPerSecond / this.frameRate).toFixed(1) !== 0) return; // 跳帧处理
       if (this.currentFullScreen && this.currentFullScreen !== i) {
+        // 全屏 其他画面不做处理
         this.destroyUrl(i);
         return;
       }
-      if (this.cameraArr[i].isLoading) return;
-      this.cameraArr[i].isLoading = true;
-      this.cameraArr[i].allUrl.unshift(URL.createObjectURL(blob));
-      this.cameraArr[i].imgBox.src = this.cameraArr[i].allUrl[0];
-      this.cameraArr[i].imgBox.onload = () => {
-        if (!this.cameraArr[i].ctx) return;
-        this.cameraArr[i].ctx.drawImage(this.cameraArr[i].imgBox, 0, 0, this.canvasSize[0], this.canvasSize[1]);
-        this.cameraArr[i].isLoading = false;
-        // 清除内存
-        this.cameraArr[i].imgBox.src = '';
-        this.destroyUrl(i, this.cameraArr[i].maxUrlNum);
-      };
-      this.cameraArr[i].imgBox.onerror = () => {
-        this.cameraArr[i].isLoading = false;
-        if (!this.cameraArr[i] || !this.cameraArr[i].imgBox) return;
-        this.cameraArr[i].imgBox.src = '';
-        this.destroyUrl(i, this.cameraArr[i].maxUrlNum);
-      };
+      if (!this.cameraArr[i].isLoading) {
+        this.cameraArr[i].isLoading = true;
+        createImageBitmap(blob, {
+          imageSmoothingQuality: 'low'
+        }).then(res => {
+          if (this.cameraArr[i].allUrl) {
+            this.cameraArr[i].allUrl.unshift(res);
+            this.cameraArr[i].isLoading = false;
+          }
+        }).catch(err => {
+          console.log('object :>> createImageBitmap', err);
+          this.cameraArr[i].isLoading = false;
+        });
+      }
+      if (this.cameraArr[i].allUrl[0]) {
+        this.cameraArr[i].ctx.drawImage(this.cameraArr[i].allUrl[0], 0, 0, this.canvasSize[0], this.canvasSize[1]);
+      }
+      for (let j = 0; j < this.cameraArr[i].allUrl.length; j++) {
+        if (this.cameraArr[i].allUrl[j]) {
+          this.cameraArr[i].allUrl[j].close();
+        }
+        delete this.cameraArr[i].allUrl[j];
+      }
+      if (this.cameraArr[i].allUrl.length > 100) {
+        this.cameraArr[i].allUrl = [];
+      }
     },
     // 切换摄像头画面
     handleSelect(i) {
@@ -76072,7 +76638,9 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns = [];
     },
     destroyUrl(index) {
       for (let i = 0; i < this.cameraArr[index].allUrl.length; i++) {
-        URL.revokeObjectURL(this.cameraArr[index].allUrl[i]);
+        if (this.cameraArr[index].allUrl[i]) {
+          this.cameraArr[index].allUrl[i].close();
+        }
         delete this.cameraArr[index].allUrl[i];
       }
       this.cameraArr[index].allUrl = [];
@@ -76091,13 +76659,13 @@ var xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns = [];
     this.destroyWorker();
   }
 });
-;// ./packages/components/xjzhSetCanvas.vue?vue&type=script&lang=js
- /* harmony default export */ var components_xjzhSetCanvasvue_type_script_lang_js = (xjzhSetCanvasvue_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/xjzhSetCanvas.vue?vue&type=style&index=0&id=19dc6be0&prod&lang=scss&scoped=true
-var xjzhSetCanvasvue_type_style_index_0_id_19dc6be0_prod_lang_scss_scoped_true = __webpack_require__(9525);
-;// ./packages/components/xjzhSetCanvas.vue?vue&type=style&index=0&id=19dc6be0&prod&lang=scss&scoped=true
+;// ./packages/components/xjzhSetBitmapCanvas.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_xjzhSetBitmapCanvasvue_type_script_lang_js = (xjzhSetBitmapCanvasvue_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/xjzhSetBitmapCanvas.vue?vue&type=style&index=0&id=8665cefa&prod&lang=scss&scoped=true
+var xjzhSetBitmapCanvasvue_type_style_index_0_id_8665cefa_prod_lang_scss_scoped_true = __webpack_require__(8448);
+;// ./packages/components/xjzhSetBitmapCanvas.vue?vue&type=style&index=0&id=8665cefa&prod&lang=scss&scoped=true
 
-;// ./packages/components/xjzhSetCanvas.vue
+;// ./packages/components/xjzhSetBitmapCanvas.vue
 
 
 
@@ -76106,18 +76674,18 @@ var xjzhSetCanvasvue_type_style_index_0_id_19dc6be0_prod_lang_scss_scoped_true =
 
 /* normalize component */
 
-var xjzhSetCanvas_component = normalizeComponent(
-  components_xjzhSetCanvasvue_type_script_lang_js,
-  xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_render,
-  xjzhSetCanvasvue_type_template_id_19dc6be0_scoped_true_staticRenderFns,
+var xjzhSetBitmapCanvas_component = normalizeComponent(
+  components_xjzhSetBitmapCanvasvue_type_script_lang_js,
+  xjzhSetBitmapCanvasvue_type_template_id_8665cefa_scoped_true_render,
+  xjzhSetBitmapCanvasvue_type_template_id_8665cefa_scoped_true_staticRenderFns,
   false,
   null,
-  "19dc6be0",
+  "8665cefa",
   null
   
 )
 
-/* harmony default export */ var xjzhSetCanvas = (xjzhSetCanvas_component.exports);
+/* harmony default export */ var xjzhSetBitmapCanvas = (xjzhSetBitmapCanvas_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/xjzhSignature.vue?vue&type=template&id=7bb6a096&scoped=true
 var xjzhSignaturevue_type_template_id_7bb6a096_scoped_true_render = function render() {
   var _vm = this,
@@ -76304,7 +76872,8 @@ var xjzhSignature_component = normalizeComponent(
 
 
 
-const components = [xjzhImgCanvas, xjzhVideoList, xjzhBitmapCanvas, xjzhSetCanvas, xjzhSignature];
+
+const components = [xjzhImgCanvas, xjzhBitmapCanvas, xjzhVideoList, xjzhSetCanvas, xjzhSetBitmapCanvas, xjzhSignature];
 const install = function (Vue) {
   if (install.installed) return;
   components.map(component => Vue.component(component.name, component));