【Uni-app 引入海康h5player并接入ws视频流】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Uni-app 引入海康h5player并接入ws视频流】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

内容简介
采用uni-app中的renderjs 引入海康H5 SDK
后端接入海康综合安防平台的开放API获取预览流
海康H5 SDK 下载地址

接入原因
因在移动端接入不管是hls flv rtsp rtmp流的播放稳定性和速度均很慢，特采用ws直连流来播放，效率很稳定性均显著提高。因采用前者流可以直接使用原生的播放组件，所以会比较便捷不用进行封装。后者ws流需要引入专用开发包。
海康官网也提供了其它的SDK比如直连摄像头的，但是需要映射多个摄像头或者单独的硬盘录像机，接入方式也是采用renderjs的办法接入。而我们采购了安防平台提供了开放API所以采用接口的形式获取。

准备工作
下载开发包放置项目static目录下
【Uni-app 引入海康h5player并接入ws视频流】

源码如下
引入h5player.min.js 注意点 src地址要采用相对路径。
JS部分此处代码均在renderjs中 renderjs使用方法请研究官网示例或看掘金中这位大哥的用法地址

mounted(){
	if (typeof window.JSPlugin === 'function') {
		this.intWindow();
	} else {
		const script = document.createElement('script')
		script.src = 'static/HK/h5player.min.js' //h5player.min.js 相对路径
		script.onload = this.intWindow.bind(this)
		document.head.appendChild(script)
	};	
},

methods：{
	// 初始化播放窗口
	intWindow(){
		let that = this;
		this.rPlay = new JSPlugin({
			szId: "play_window", //需要英文字母开头 必填
			szBasePath: "static/HK", // 必填,引用H5player.min.js的js相对路径
			oStyle: {
			  border: "none",
			  borderSelect: "none",
			  background: "#000",
			}
		});
	},
	// 接收逻辑层发送的播放地址
	receiveUrl(newValue, oldValue, ownerVm, vm) {
		let that = this
		if(newValue.url){
			let playUrl = newValue.url
			that.rPlay.JS_Play(playUrl,{
				playURL:playUrl,										
			}).then(
				()=>{
					that.$ownerInstance.callMethod('playStatus',{
						type:"success",
						msg:"播放成功"
					})
				},
				(e)=>{
					that.loading = false;
					that.$ownerInstance.callMethod('playStatus',{
						type:"error",
						msg:e
					})
				}
			)
		}
	}	
}

Html代码如下因为是单独抽了的播放组件所以播放地址是从外部传递过来的，故使用watch监听一下，如果是在一个组件里面只用获取到播放地址后直接给player中的url赋值即可

//此处js代码均在逻辑层中
//播放窗口dom元素  高度  info:player 用来传递播放地址 stop:stopPlay 用来控制销毁播放器 其它方法请自行封装原理类似
<view id='play_window' 
	:style="{'height':height + 'px'}" 
	:info='player'
	:stop='stopPlay'
	:change:info='hk.receiveUrl'
	:change:stop='hk.receiveStop'>	
</view>

data() {
	return {
		//接收播放地址
		player:{
			url:""
		},
		//销毁播放窗口状态
		stopPlay:false,
		
	}
},

methods:{
	playStatus(val){
		if(val.type === 'success'){
			console.log('播放成功');	
		}else{
			console.log('播放失败')
			console.log(val.msg)
		}
	},
}

watch:{
	playUrl(newValue,oldValue){
		if(newValue){
			this.loading = true;
			this.player.url = newValue;
		}
	}
}