vue jessibuca视频监控

一 ：在官网下载最新的js 文件

decoder.js 、 decoder.wasm 、 jessibuca.js

Jessibuca官网

 二 ：将三个文件放到public下跟index.html同级。

       以下是组件页面：

html：
   我这里是放在循环中
 <div :id="'tc-player' + n" :ref="'container' + n" class="player" style="width: 100%;     
  height: 100%"></div>
methods:{
    create(id) {
          let that = this
           let flag = false
           this.jessibuca = null
           var showOperateBtns = true // 是否显示按钮
           var $container = document.getElementById('tc-player' + id)
           this.jessibuca = new window.Jessibuca({
           container: $container, // 播放器容器
           videoBuffer: Number(0.2), // 缓存时长
           isResize: false,
           useWCS: true, // 是否开启Webcodecs硬解码
           loadingText: '加载中...',
           hasAudio: false,
           debug: false,
           supportDblclickFullscreen: showOperateBtns, // 是否支持屏幕的双击事件
           showBandwidth: showOperateBtns, // 显示网速    
                operateBtns: { // 配置操作按钮
                    fullscreen: true, // 是否显示全屏按钮
                    screenshot: true, // 是否显示截图按钮
                    play: true, // 是否显示播放暂停按钮
                    audio: true // 是否显示声音按钮

                },
            forceNoOffscreen: true, // 是否不使用离屏模式（提升渲染能力）
                isNotMute: false, // 是否开启声音，默认是关闭声音播放的
                timeout: 10 // 设置超时时长, 单位秒
             })
            this.jessibuca.on('log', function(msg) {
                console.log(msg, '信息，包含错误信息')
            })

            this.jessibuca.on('record', function(msg) {
                console.log('on record:', msg)
            })

            this.jessibuca.on('pause', function(msg) {
                console.log(msg, '触发暂停事件')
            })
             this.jessibuca.on('fullscreen', function(msg) {
                console.log(msg, '是否全屏')
                that.fullscreen = msg
                let doc = document.querySelector('.jessibuca-controls-right')
                if (!flag && that.isFlag) {
                let cloud = `
                <div class="jessibuca-controls-item jessibuca-record" id="cloudShow"                                     
                      style="display: flex;">
                 <i class="jessibuca-icon jessibuca-icon-record"></i>
                 <span class="icon-title-tips"><span class="icon-title">云台</span</span>
                    </div>
                    `
                  doc.insertAdjacentHTML('afterbegin', cloud)
                }

                document.getElementById('cloudShow').addEventListener('click', function() {
                    that.cloudShow = !that.cloudShow
                })

                flag = true
                if (msg == false) {
                    document.querySelector('.jessibuca-record').remove()
                    flag = false
                }
            })
            console.log(this.jessibuca, '初始化完成')
                this.playList.push(this.jessibuca)

            },
         // 销毁
        destroys() {
            if (this.playList != false) {
                for (let i = 0; i < this.playList.length; i++) {
                    this.playList[i].destroy()
                }
            }
        },
}

然后在业务层：

 // 请求接口后遍历
 this.$refs.supPlayer.create(index + 1)
 this.$refs.supPlayer.jessibuca.play(Response.data.flv)

如果是APP(uni-app)，以下是我个人做法

我是将三个文件放入自己业务层目录下：

mounted() {
	this.create(this.playUrl)
},
destroyed() {
	this.jessibuca.destroy()
},
create(url) {
    let that = this
	var $container = document.getElementById('container');
	this.jessibuca = new Jessibuca({
	container: $container,
	videoBuffer: 0.2, // 缓存时长
	isResize: false,
	loadingText: "加载中",
	debug: false,
	showBandwidth: true, // 显示网速
	operateBtns: {
		fullscreen: true,
			screenshot: false,
			play: true,
			audio: true,
	},
	forceNoOffscreen: false,
	useMSE: true,
	hasAudio: false
	});
	that.jessibuca.on('fullscreen', function(msg) {
	if (msg) {
		that.jessibuca.setRotate(90)
	} else {
		that.jessibuca.setRotate(0)
	}
	})
	that.jessibuca.play(url)
}