七牛云监控摄像头直播流web端显示

• 七牛云监控摄像头自己带有一个 qn-rtplayer-web 的npm包。点击跳转官网地址

• 具体使用方法

import { QNRTPlayer } from "qn-rtplayer-web";

    /**
     * 页面加载加载video
     * */

    initPlayer() {
      if (this.videotimer) {
        clearTimeout(this.videotimer);
        this.videotimer = null;
      }
        this.videotimer = setTimeout(() => {
          let url ="XXXXXXXXXXXXXXXXXXXXXXXXXXX";
          this.initQNRTPlayer(url);
        }, 500);
    },

    /**
     * 播放视频
     * @url 视频流的地址
     * @this.$refs.playerRef 播放容器 <div class="video" ref="playerRef"></div>
     * */

    initQNRTPlayer(url) {
      this.qnPlayer = new QNRTPlayer();
      this.qnPlayer.init({
        volumn: 0.5, //音量
        controls: true, //控制条
        width: "1100px",
        height: "580px",
        objectFit: "fill",
      });
      
      /**
       * 这里是播放视频,但是由于浏览器的限制,不再允许视频自动播放
       * 必须需要用户有操作,点击或者别的任何动作
       * 如果播放失败,弹框提示用户点击,点击后再次播放
       * */ 

      this.qnPlayer
        .play(url, this.$refs.playerRef)
        .then((result) => {})
        .catch((err) => {
          this.$alert("视频加载完成，请允许浏览器播放", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.qnPlayer.play(url, this.$refs.playerRef);
            },
          });
        });
    },

• 如果还有什么不明白的地方，可以参考文档： 官方文档在此
• 以下是关闭

    /**
     * 释放状态，如果想要再次播放，需要重新调用 init 方法
     * */

    releasePlayer() {
      if (this.qnPlayer) {
        this.qnPlayer.release();
        this.qnPlayer = null;
      }
    },
    
  /**
   * 页面销毁前
   * */

  beforeDestroy() {
    this.releasePlayer();
    clearTimeout(this.videotimer);
    this.videotimer = null;
  },