feat: 播放增加限制条件

h5/src/components/vionPlayer/index.vue

@@ -38,6 +38,7 @@ export default {
     return {
     return {
       // eslint-disable-next-line
       // eslint-disable-next-line
       _jessibuca: null,
       _jessibuca: null,
+      playing: false,
 
 
       player: {
       player: {
         height: 0,
         height: 0,
@@ -48,6 +49,9 @@ export default {
   mounted() {
   mounted() {
     this.init();
     this.init();
   },
   },
+  unmounted() {
+    this.destroy();
+  },
   methods:{
   methods:{
     init(params = {}) {
     init(params = {}) {
       const options = Object.assign({
       const options = Object.assign({
@@ -115,6 +119,15 @@ export default {
         this.player.height = data.height;
         this.player.height = data.height;
       });
       });
 
 
+      playerIns.on('play', (flag) => {
+        console.log('on-play', flag);
+        this.playing = true;
+      });
+      playerIns.on('pause', (flag) => {
+        console.log('on-pause', flag);
+        this.playing = false;
+      });
+
       playerIns.on('ptz', (arrow) => {
       playerIns.on('ptz', (arrow) => {
         // console.log('ptz', arrow);
         // console.log('ptz', arrow);
         this.$emit('ptz-control', arrow);
         this.$emit('ptz-control', arrow);
@@ -144,19 +157,14 @@ export default {
       if (this._jessibuca) {
       if (this._jessibuca) {
         this._jessibuca.destroy().then(() => {
         this._jessibuca.destroy().then(() => {
           this._jessibuca = null;
           this._jessibuca = null;
+          this.playing = false;
         });
         });
       }
       }
     },
     },
-    screenshot2(filename = '', format = 'png', quality = 0.92, type = 'base64') {
-      // TODO: 必须播放状态，才可获取水印
-      const originData = this._jessibuca.screenshot(filename, format, quality, type);
-      // TODO: 动态获取宽高
-      return getWatermarkCanvasImg(800, 480, '文安智能', originData);
-    },
     screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
     screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
       return new Promise((resolve, reject) => {
       return new Promise((resolve, reject) => {
         // 如果是播放状态
         // 如果是播放状态
-        if (!this.player.height || !this.player.width ) {
+        if (!this.player.height || !this.player.width || !this.playing) {
           reject(new Error('invaild data'));
           reject(new Error('invaild data'));
         }
         }
 
 
@@ -166,7 +174,7 @@ export default {
         // 当图像加载完成后执行
         // 当图像加载完成后执行
         image.onload = () => {
         image.onload = () => {
           // 创建一个 Canvas 元素
           // 创建一个 Canvas 元素
-          const canvas = getWatermarkCanvasImg(this.player.width, this.player.height, '文安智能', image);;
+          const canvas = getWatermarkCanvasImg(this.player.width, this.player.height, this.watermarkText, image);;
 
 
           // 将带有水印的 Canvas 转换回 base64
           // 将带有水印的 Canvas 转换回 base64
           const watermarkedBase64 = canvas.toDataURL('image/png');
           const watermarkedBase64 = canvas.toDataURL('image/png');

h5/src/views/player/vionPlayerDemo.vue

@@ -5,7 +5,7 @@
       <vion-player ref="vionPlayer"
       <vion-player ref="vionPlayer"
         :type="playerType"
         :type="playerType"
         :datetime-range="datetimeRange"
         :datetime-range="datetimeRange"
-        watermarkText="方案智能"
+        watermarkText="文安智能123"
         @ptz-control="handlePtz"
         @ptz-control="handlePtz"
       />
       />
     </div>
     </div>
@@ -68,7 +68,9 @@ export default {
         console.log('handleScreenshot', data);
         console.log('handleScreenshot', data);
         this.base64Url = data;
         this.base64Url = data;
         this.dialogVisible = true;
         this.dialogVisible = true;
-      });
+      }).catch(err => {
+        console.error(err);
+      })
     },
     },
     handlePause() {
     handlePause() {
       this.$refs.vionPlayer.pause();
       this.$refs.vionPlayer.pause();