海康视频H5插件 v2.0.0开发总结

---

前言

h5插件同样对浏览器有限制以及编码支持情况请看官方文档，其中媒体网关要求:mgc_V5.11.101003 或 mgc_V5.13.100版本及以上

---

一、效果图

---

二、插件使用步骤总结

1.new 一个插件实例
2. 绑定消息回调
3.通过插件实例调用API方法操作功能（预览，回放，抓图、录像等）

---

三、具体步骤分析

html:

<div id="player"></div>

1.new 一个插件实例

              //实例化
				let player = new window.JSPlugin({
					szId: 'player',//容器id
					szBasePath:  "/dist",// 必填,引用H5player.min.js的js相对路径，根据实际修改
					iMaxSplit: 4,// 分屏播放，默认最大分屏4*4
					iCurrentSplit:  2,//当前分屏2:2x2布局
					oStyle: {// 样式
						borderSelect: '#FFCC00',//选中边框颜色
						background: '#4C4C4C'//背景色
					}
				})

2. 绑定消息回调

                     // 事件回调绑定
						player.JS_SetWindowControlCallback({
							windowEventSelect: function(iWndIndex) { //插件选中窗口回调
								console.log('windowSelect callback: ', iWndIndex);
							},
							pluginErrorHandler: function(iWndIndex, iErrorCode, oError) { //插件错误回调
								console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
							},
							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: ');
							}
						});

3.通过插件实例调用API方法操作功能（预览，回放，抓图、录像等）

预览：

                 //预览
                   player.JS_Play(url, {
						playURL: url,//从海康提供接口获取
						mode: 1, //解码类型：0=普通模式; 1=高级模式 默认为0,h5高级模式才能播放
						//....其他播放配置
					},
					 windowIndex//窗口号
					 ).then(() => {
						console.log('play success')
					}).catch(e => {
						console.log(e)
					})

分屏设置

          //2x2分屏
              player.JS_ArrangeWindow(2).then(() => {
                console.log('success')
              }).catch(e => {
				console.log(e)
			})

其他功能对着文档API调用就行了

---

四、uniapp集成插件

把资源包里的playctrl1、playctrl2、playctrl3、talk、talkW、transform、h5player.min.js复制到static目录下，在自定义模板文件template.html引入h5player.min.js

五、注意事项

1.调用获取预览流url接口时protocol参数传递ws协议，http->ws,https->wss
2.云控功能需单独调用海康提供的接口实现
3.对讲功能需部署在https环境下才能生效
4.所有海康接口请求需要ak\sk认证，ak\sk签名获取可让后端提供接口，ak\sk认证请看开发文档
5.预览api参数mode传递高级模式
6. new JSPlugin时候必填szBasePath: ‘./dist’, // 必填,引用H5player.min.js的js路径，否则会引起内部加载解码库异常
7.需要在web服务器返回的响应头增加跨域隔离字段：Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin 并在https环境下使用。否则高级模式无法使用
8.h5player.min.js必须在自定义模版文件引入，在默认的index.html引入无效，自定义模版点击查看

---

六、uniapp版本开箱即用组件

传送门1:uniapp-hk-video-h5
传送门2:uniapp插件市场-海康视频H5播放器组件

---

七、官方插件包和开发文档下载

传送门：插件包和文档下载