index.vue

<template>
  <div class="vion-player" ref="container"></div>
</template>

<script>
// import { watermarkBase64 } from './data';
import { getWatermarkCanvasImg } from './utils';

export default {
  name: 'VionPlayer',
  props: {
    type: {
      type: String,
      default: 'live', // playback
    },
    playUrl: {
      type: String,
      default: '', // 若配置，则播放器加载后，自动播放
    },
    datetimeRange: {
      type: Array,
      default: null,
    },
    watermarkText: {
      type: String,
      default: '',
    },
    controlAutoHide: {
      type: Boolean,
      default: true,
    },
    showPtz: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // eslint-disable-next-line
      _jessibuca: null,
      playing: false,

      player: {
        height: 0,
        width: 0,
      },
    }
  },
  mounted() {
		console.log("this.playUrl", this.playUrl);
    this.init();
  },
  unmounted() {
    this.destroy();
  },
  methods:{
    init(params = {}) {
			console.log("this.playUrl", this.playUrl);
      const options = Object.assign({
        container: this.$refs.container,
        decoder: '/jessibuca-pro/decoder-pro.js',
        isResize: false,
        text: '', // TODO: 功能暂不清楚
        useMSE: true,
        useWCS: false,
        isNotMute: false,
        timeout: 10,
        keepScreenOn: true, // 屏幕常亮
        debug: false, // 是否开启控制台调试打印

        // 按钮和界面
        loadingText: '加载中...',
        controlAutoHide: this.controlAutoHide,
        supportDblclickFullscreen: false,
        showBandwidth: false, // 显示网速
        // TODO: 水印功能暂不可用
        /* watermarkConfig: {
          image: {
            src: this.getWatermarkBase64(),
            width: 150,
            height: 48
          },
          right: 10,
          top: 30
        }, */
        operateBtns: {
          fullscreen: true,
          screenshot: false,
          play: true,
          audio: true,
          ptz: true, // 云台
          zoom: true,
          performance: false,
        },
        extendOperateBtns: [],
        // 云台控制
        ptzClickType: 'click', // click mouseDownAndUp
        ptzZoomShow: true,
        ptzMoreArrowShow: true,
        ptzApertureShow: true,
        ptzFocusShow: true,
      });

      this._jessibuca = new window.JessibucaPro(options);

      this.registerEvent(this._jessibuca);
			console.log("this.playUrl", this.playUrl);
      if (this.playUrl) {
        // 示例上有延迟写法
        setTimeout(this.play(this.playUrl), 150);
      }
    },
    registerEvent(playerIns) {
      playerIns.on("log", msg => {
        console.log("on-log", msg);
      });

      playerIns.on("videoInfo", (data) => {
        console.log('width:', data.width, 'height:', data.height);
        this.player.width = data.width;
        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) => {
        // console.log('ptz', arrow);
        this.$emit('ptz-control', arrow);
      });
    },
    getWatermarkBase64() {

      const data = getWatermarkCanvasImg(150, 48, '文安智能');
      console.log('getWatermarkBase64', data);
    },

    // 暴露方法
    play(url) {
      if (url) {
        this._jessibuca.play(url);
      } else {
        console.error('The url is not valid');
      }
    },
    pause() {
      this._jessibuca.pause();
    },
    stop() {
      this._jessibuca.pause(true);
    },
    destroy() {
      if (this._jessibuca) {
        this._jessibuca.destroy().then(() => {
          this._jessibuca = null;
          this.playing = false;
        });
      }
    },
    screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
      return new Promise((resolve, reject) => {
        // 如果是播放状态
        if (!this.player.height || !this.player.width || !this.playing) {
          reject(new Error('invaild data'));
        }

        // 创建一个新的图片对象
        const image = new Image();

        // 当图像加载完成后执行
        image.onload = () => {
          // 创建一个 Canvas 元素
          const canvas = getWatermarkCanvasImg(this.player.width, this.player.height, this.watermarkText, image);;

          // 将带有水印的 Canvas 转换回 base64
          const watermarkedBase64 = canvas.toDataURL('image/png');

          // 现在，watermarkedBase64 包含了带有水印的 base64 图像数据
          // console.log(watermarkedBase64);
          resolve(watermarkedBase64);
        };
        image.error = function() {
          reject(new Error('image loade fail'));
        }

        // 设置图像的 src 属性，加载图像
        image.src = this._jessibuca.screenshot(filename, format, quality, type);
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.vion-player {
  background-color: rgba(13, 14, 27, 0.7);
}
</style>