首页 前端知识 vue实现海康H5视频插件播放视频的实例,实现取流失败了之后重新获取新的流播放视频

vue实现海康H5视频插件播放视频的实例,实现取流失败了之后重新获取新的流播放视频

2024-05-12 17:05:45 前端知识 前端哥 239 949 我要收藏

vue实现海康H5视频插件播放视频的实例,实现取流失败了之后重新获取新的流播放视频

h5player是一个基于HTML5的流式网络视频播放器,无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。

首先去海康开发平台,把插件包给下载下来。但是这个包需要登录下才可以获取到

地址:https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20

不想登录可以去这里拿:https://download.csdn.net/download/lu6545311/88562387

在这里插入图片描述

一、引入插件包

因为目前项目用的是vue2.5,所以我的资源包是放在了static目录下面

在这里插入图片描述

然后在index.html里面再引入

<script src="/static/js/h5player/h5player.min.js"></scrip>

二、使用

(1)因为我们项目有多个地方使用这个播放器,所以是做成了组件的形式,然后进行引入使用
//子组件
<template>
    <div id="H5Play"></div>
</template>

//父组件引入
<HKH5Player ref="hkH5Player" @resetVideoMax="resetVideoH5" @getWndPk="getWndPk"></HKH5Player>
(2)初始化
let that = this
//设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
    this.player.JS_Resize()
})

this.player = new window.JSPlugin({
    szId: 'H5Play',
    szBasePath: "../../static/js/h5player",
    //在集成过程中new JSPlugin时候必填szBasePath: './dist', // 必填,引用H5player.min.js的js相对路径,否则会引起内部加载解码库异常
    iMaxSplit: this.maxSplit, //分屏播放,默认最大分屏4*4
    iCurrentSplit: 1,
    openDebug: true,
    oStyle: {
        borderSelect: '#FFCC00', //选中窗口的边框颜色
    },
    // 当容器div#play_window有固定宽高时,可不传iWidth和iHeight,窗口大小将自适应容器宽高
	// iWidth: 600,
	// iHeight: 400,
})
(3)事件回调绑定(实现取流失败了之后重新获取新的流播放视频)
this.player.JS_SetWindowControlCallback({
    windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
        console.log('windowSelect callback: ', iWndIndex);
        //每一次窗口变化都会触发这个,用来记录窗口,方便后面进行取流失败了针对对应的窗口视频进行再次播放------------
        that.$emit('getWndPk',iWndIndex)  //调用父组件的方法,并且把当前的窗口传过去,为了记录当前视频的pk
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
        console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
        //视频爆发错误之后,进行想要的逻辑操作,这里是为了再次取流播放视频------------
        that.showErrror(iErrorCode,iWndIndex)  //iErrorCode 错误码  iWndIndex 错误的视频窗口,对应上面获取到的是窗口来进行操作
    },
    windowEventOver: function (iWndIndex) {  //鼠标移过回调
        //console.log(iWndIndex);
    },
    windowEventOut: function (iWndIndex) {  //鼠标移出回调
        //console.log(iWndIndex);
    },
    windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
        //console.log(iWndIndex);
    },
    windowFullCcreenChange: function (bFull) {  //全屏切换回调
        console.log('fullScreen callback: ', bFull);
    },
    firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
        console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
    },
    performanceLack: function () {  //性能不足回调
        // console.log('performanceLack callback: ');
    }
});
(4) 开始播放视频
//playURL:播放地址  ws://1111111
// mode 0 普通模式  1 高级模式  这里用的是高级模式
//index : 窗口
this.player.JS_Play(playURL, { playURL, mode }, index).then(
    () => { console.log('realplay success') },
    e => { console.error(e) }
)
//自动跳转下一个窗口
index = index + 1;
if (index == this.maxSplit) { index = 0 }
player.JS_SelectWnd(index);
(5)停止播放视频、销毁视频
this.player.JS_StopRealPlayAll(); //全部
this.player.JS_Stop(); //单个
(6)切换窗口数
//splitNum  最大 4 
this.player.JS_ArrangeWindow(splitNum).then(
    () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
    e => { console.error(e) }
)
(7)获取错误码,然后进行提醒

在上面的第三点中,事件的回调,我们可以获取到视频播放错误的错误码,然后官网下载的开发文档里面有对应的错误码,但是好像是不完整的,但是够用。

showErrror(val,iWndIndex){
    let list = {
        '0x12f900005':'高级模式不支持该功能',
        '0x12f900006':'高级模式的解码库加载失败',
        '0x12f900008':'url格式错误',
        '0x12f900009':'取流超时错误',
        '0x12f900010':'设置或者是获取音量失败,因为没有开启音频的窗口',
        '0x12f900011':'设置的音量不在1-100范围',
        '0x12f910000':'websocket连接失败,请检查网络是否通畅,URL是否正确',
        '0x12f910010':'取流失败',
        '0x12f910011':'流中断,电脑配置过低,程序卡主线程都可能导致流中断',
        '0x12f910014':'没有音频数据',
        '0x12f910015':'未找到对应websocket,取流套接字被动关闭的报错',
        '0x12f910016':'websocket不在连接状态',
        '0x12f910017':'不支持智能信息展示',
        '0x12f910018':'websocket长时间未收到message',
        '0x12f910019':'WSS连接失败,原因:端口尚未开通、证书未安装、证书不安全',
        '0x12f910020':'单帧回放时不能暂停',
        '0x12f910021':'已是最大倍速',
        '0x12f910022':'已是最小倍速',
        '0x12f910023':'ws/wss连接超时,默认6s超时时间,原因:网络异常,网络不通',
        '0x12f910026':'jsdecoder1.0解码报错视频编码格式不支持',
        '0x12f910027':'后端取流超时,主动关闭连接(设备突然离线或重启,网络传输超时20s)',
        '0x12f910028':'设置的缓冲区大小无效,大小0-510241024,不在该范围的报错',
        '0x12f910029':'普通模式的报错,码流异常导致黑屏,尝试重新取流',
        '0x12f910031':'普通模式下播放卡主会出现',
        '0x12f910032':'码流编码格式普通模式下不支持,可切换高级模式尝试播放',
        '0x12f920015':'未调用停止录像,再次调用开始录像',
        '0x12f920016':'未开启录像调用停止录像接口错误',
        '0x12f920017':'紧急录像目标格式不支持,非ps/mp4',
        '0x12f920018':'紧急录像文件名为null',
        '0x12f930010':'内存不足',
        '0x12f930011':'首帧显示之前无法抓图,请稍后重试',
        '0x12f950000':'采集音频失败,可能是在非https域下使用对讲导致',
        '0x12f950001':'对讲不支持这种音频编码格式',
        '0x12f900001':'接口调用参数错误',
        '0x12f900002':'不在播放状态',
        '0x12f900003':'仅回放支持该功能',
        '0x12f900004':'普通模式不支持该功能'
    }
    if (list[val]) {
        this.$message.error(list[val])
        console.error(list[val]);
    }
    //防止一直在请求,我们只给你两个错误进行再次取流,各自根据业务进行调整
    if (['0x12f910011','0x12f910027'].includes(val)) {
        this.$emit('resetVideoMax',iWndIndex);  //调用父组件的方法,并且把发生错误的窗口闯过去
        this.player.JS_SelectWnd(iWndIndex); // 把当前窗口选择到发生错误的窗口
    }
},

三、父组件的写法

主要是写了怎么视频取流失败后,再次请求获取到流进行视频播放的操作

(1)在父组件调用插件初始化方法
mounted() {
    setTimeout(function (){
          that.$refs.hkH5Player.初始化方法();
          that.$refs.hkH5Player.初始化方法();
          that.$refs.hkH5Player.初始窗口数量(1);
    },200)
}
(2)记录视频窗口的getWndPk方法
getWndPk(index){
      // h5窗口变化的时候进行
      // 播放视频的时候记录窗口对应的pk
    //这里是把对应窗口的pk记录起来,计算你手动切换的窗口也可以记录到的
      this.h5WndIndex = index;
},
    
//记录到当前的窗口,然后在播放视频的时候把pk存起来
playVideo(pk){
    this.$axios.post('',{pk:pk,protocol:'ws'}).then(res => {
        this.h5PkList[this.h5WndIndex] = pk; //记录对应窗口的视频pk,为后面视频失败再次取流做准备
        //调用子组件的播放视频的方法,具体逻辑自行处理
        .....
        this.$refs.hkH5Player.播放视频(url);
    })
}

(3)取流失败后,调用方法再次取流
resetVideoH5(index){
      // 取流失败重新获取流
      let pk = this.h5PkList[index]
      this.playVideo(pk)
},
(4)初始播放多个视频
getList(){
    list = [...pk]
    //先判断有多少个视频,然后来展示多少个窗口,最多16个 即num最大是4
    if (that.videoList.length > 4 && that.videoList.length <= 9) {
    	num = 3;
  	} else if (that.videoList.length > 9) {
    	num = 4;
  	} else {
    	num = 2;
  	}
    that.$refs.hkH5Player.初始窗口数量(num);
    //拿到多个视频pk后,循环调用播放方法
    for (let index = 0; index < list.length; index++) {
     	this.playVideo(list[index].pk)
    }
}

这样就可以实现视频播放失败之后再次取流进行播放

tip:重点

(1)窗口变化的记录,触发父组件播放视频的时候,接口窗口数把pk(或者你再次取流的参数等等)存起来,方便后面再次取流
(2)发生错误之后,触发父组件找到对应窗口的错误视频的pk,然后再次请求

效果

在这里插入图片描述

功能(一些具体的功能没有使用到,如果想要使用,可以去看看下载包里面的开发文档)

这样就可以实现视频播放失败之后再次取流进行播放

功能(一些具体的功能没有使用到,如果想要使用,可以去看看下载包里面的开发文档)

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8373.html
标签
音视频
评论
发布的文章

Newtonsoft.Json

2024-05-23 20:05:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!