hikyun-player v1.0.1

hikyun-player

功能

海康云曜视频插件播放器(npm版本) 支持H265，目前需配合海康云曜web视频控件使用，控件下载地址：https://help.hikyun.com/developerResource?tab=sdk

效果展示

预览

不带组织树：

带组织树：

回放

也有带组织树和不带组织树两种场景，这里只截图带组织树场景作为示例。

接入前提

使用前需先接入海康云曜平台，注册开发者账号，创建产品项目，将设备添加到项目上。

1、平台接入

1、访问控制台（https://console.hikyun.com) 注册账号；如果已有账号，跳过该步。

2、创建产品 注册成功后用创建的账号登录平台(https://console.hikyun.com)，在平台首页的资源概览点击产品跳转到产品管理页面

点击创建产品进入产品添加页

填写产品信息后保存

3、创建项目 上一步产品创建成功后会回到产品管理页，在创建的产品下点击添加，进入项目添加页 在项目添加页填写项目基本信息后保存

2、添加设备

项目创建成功后会进入项目管理页面，点击项目最右侧的跳转按钮，输入密码进入租户平台。

在租户平台的资源中心-设备管理页面，点击添加按钮，进入添加设备页面去添加设备。

保存后会跳回设备管理页面，点击监控点tab, 能看到添加的设备对应监控点的名称、编号、通道号等信息。

3、获取插件必填参数

不带组织树场景下需要下面的第1小点和第2小点中的参数，可忽略第3小点。带组织树场景下需要下面的所有参数

1、productCode(产品标识)、projectId(项目编号)

在资源概览点击项目进入项目管理

然后，在项目管理中查看所需项目的产品标识和项目编号

2、access_token

首先，在用户信息-开发者账户，获取ak、sk

然后调用下面的接口去获取access_token

调用接口：https://open.hikyun.com/artemis/oauth/token/v2

请求方式：POST

参数格式：JSON

请求示例：

{
	"accessKey":"16103338774176569",
	"secretKey":"LcQAOQ2PUcMWcKdZdMSl",
	"productCode":"1644903247366160",
	"projectId":80195034570224
}

返回示例

{
	"code":"200",
	"msg":"操作成功",
	"data": {
		"access_token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhY2Nlc3NfdG9rZW4iLCJwYXlsb2FkIjoie1wiYWNjZXNzS2V5XCI6XCIxNjUwMjUyNDM5ODIwNTQzOFwiLFwiZXhwaXJlZFwiOjQzMjAwLFwicHJvZHVjdENvZGVcIjpcIjE2NzIxMDc1MjEyNDczOTNcIixcInByb2plY3RJZFwiOjE1ODUzNzU0MzU4Nzg5MjB9IiwiZXhwIjoxNjc5NTk3MjE2fQ.cgBj16U01qbWu2vv6tPc9TFPx7soFEnQSp83U1Q_Ib7pzXqTzRBnqT_7Xfz2fU1liugTWLYgttMBZp9exuQKPw",
		"expires_in": 43200
	}
}

3、 authorization（用户token）、userId(用户id)

(1) 获取authorization

调用接口：https://open.hikyun.com/artemis/api/eits/v1/global/login/without/password

请求方式：POST

请求头：access_token={上一步获取到的access_token}

请求体：JSON

{
	loginKeyword: {项目用户名},
	projectId: {项目名},
	type: 1
}

返回示例

{
	"code":"200",
	"msg":"操作成功",
	"data": {
		Authorization: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJBdXRob3JpemF0aW9uIiwicGF5bG9hZCI6IntcImRlcGFydG1lbnRJZFwiOjE1ODM1MjAwMTAwMDcwNDgsXCJleHBpcmVkXCI6MzAsXCJwcm9kdWN0Q29kZVwiOlwiMTY3MjEwNzUyMTI0NzM5M1wiLFwicHJvamVjdElkXCI6MTU4NTM3NTQzNTg3ODkyMCxcInJlbGF0aW9uVHlwZVwiOjAsXCJzaG93UHJpdmFjeUFndFwiOmZhbHNlLFwic2hvd1RyaWFsQWd0XCI6ZmFsc2UsXCJ0aW1lXCI6XCIxNjc5NTUzOTY0OTAyXCIsXCJ0eXBlXCI6MSxcInVzZXJJZFwiOjE1ODQ5OTc0Nzg3NTY4NzIsXCJ1c2VyTmFtZVwiOlwiYWRtaW5cIixcInVzZXJUeXBlXCI6MH0ifQ.eafWE6kH9BJeCI6zoUTJNUVWpFcus-a5NnRzMUNNg_wOgcxzzh-c_uJ8PtRRqOXgzohdmSk5MkrCngAl-eXwgQ"
		RefreshToken: null
	}
}

（2）获取userid

调用接口：https://open.hikyun.com/artemis/api/eits/v1/user/basic/get

请求方式：POST

请求头：access_token={上一步获取到的access_token}

请求体：无

返回示例：

{
    "code": "200",
    "msg": "操作成功",
    "data": {
        "id": "1584997478756872", // userid(用户id)
        "userName": "admin",
        "nickName": null,
        "phoneNo": "18357109763",
        "phoneCheck": "未认证",
        "departmentName": "test",
        "userIcon": null,
        "email": null,
        "reallyName": null,
        "province": null,
        "provinceName": null,
        "city": null,
        "cityName": null,
        "county": null,
        "countyName": null,
        "address": null,
        "idCard": null,
        "enterprise": null
    }
}

使用

获取hikyun-player

npm install hikyun-player

引入

浏览器端：

import HikyunPlayer from 'hikyun-player';

或使用script标签

<script src="https://unpkg.com/hikyun-player@1.0.1/dist/hikyun-player.js"></script>

客户端:

const HikyunPlayer = require('hikyun-player');

开始使用

创建容器，用于装载插件

<div id="hikyun-video-plugin-player-container"></div>

播放器初始化

// 完整插件配置见下面的插件配置部分；
const options = {
  accessToken: 'xx', // access_token
  productCode: 'xx', // 产品编码
  projectId: 'xx', // 项目编号
};

// 第一个参数为容器id，第二个参数为插件配置
const hikyunPlayer = new HikyunPlayer('hikyun-video-plugin-player-container', options);

插件配置

预览回放按钮配置

预览配置到m_LiveviewTools里面，回放配置到m_PlaybackTools里面

视频预览

hikyunPlayer.startPlayReal([
    {
        deviceType: 'xx', // 设备类型，32表示萤石设备(直连萤石的设备)，64表示边缘服务设备(通过边缘服务接入的设备)
        cameraType: 'xx', // 监控点类型0 枪机；1半球；2快球
        cameraName: 'xx', // 监控点名称
        deviceSerial: 'xx', // 设备序列号
        channum: 1 // 监控点通道号
    }
]);

视频回放

hikyunPlayer.startPlayBack([
    {
        deviceType: 'xx',
        cameraType: 'xx',
        cameraName: 'xx',
        deviceSerial: 'xx',
        channum: 1
    }
]);

api

setPluginWindowOffset 设置插件偏移

setPluginWindowOffset (left=0, top=0)

参数说明：

left: number 左侧偏移

top: number 上侧偏移

返回值: void

wakeUp 唤醒插件

wakeUp(path='WebControlPlugin://')

参数说明：

path:string 插件协议

返回值: void

showWnd 重新展示插件窗口

showWnd ()

返回值: void

hideWnd 隐藏插件窗口

hideWnd ()

返回值: void

close 关闭插件

close (success, error)

参数说明：

success: function 成功回调

error: funtion 失败回调

返回值：void

使用示例：

hikyunPlayer.close(()=>{
	console.log('成功关闭插件')
}, (err)=>{
	console.log('关闭插件失败');
	console.log(err);
})

cutDom 在插件中切割和dom元素相交的部分

cutDom (srcDom, position, iframeOffset = { left: 0, top: 0 })

参数说明:

srcDom: HTMLElement 指定dom

position: {left: number, top: numner, width: number, height: number} dom位置,若同时设置了这个和srcDom,srcDom无效

iframeOffset: {left: number, top: number} iframe偏移值，用于iframe嵌入模式

返回值：void

cut 切割部分插件

cut (left, top, width, height)

参数说明:

left: 切割起始位置x坐标，默认0

top: 切割起始位置y坐标，默认0

width: 切割宽度，默认为插件配置的width 或 容器width

height: 切割高度，默认为插件配置的height 或 容器height

返回值：void

repair 恢复部分插件

repair (left, top, width, height)

参数同cut

resize 插件重新计算大小和位置

resize ()

返回值：void

switchPlayMode 切换播放模式

switchPlayMode (moduleIndex)

参数说明：

moduleIndex: number ; 0表示预览，1表示回放

返回值：Promise , res.errorCode 为'0'表示调用成功

startPlayBack 开始播放某些监控点录像回放

startPlayBack(deviceList)

参数说明：

deviceList为设备列表，每个设备中的字段如下：

deviceType: number 必填。设备类型，32表示萤石设备(直连萤石的设备)，64表示边缘服务设备(通过边缘服务接入的设备)

cameraType: number 必填。监控点类型0 枪机；1半球；2快球

cameraName: string 必填。监控点名称

deviceSerial: string 必填。设备序列号

channum: number 必填。监控点通道号

validateCode: string 非必填。设备验证码

talkIndexCode: string 非必填。监控点的对讲通道编号

返回值：Promise res.errorCode为'0',表示调用成功

示例:

hikyunPlayer.startPlayBack([
	{
		deviceType: 32,
		cameraType: 0,
		cameraName: '监控点1',
		deviceSerial: 'J9032022',
		channum: 1
	},
	{
		deviceType: 32,
		cameraType: 0,
		cameraName: '监控点2',
		deviceSerial: 'J9032023',
		channum: 1
	},
])

stopPlayBack 停止所有录像回放

stopPlayBack ()

返回值：Promise res.errorCode 为'0'表示调用成功

setPlayBackLayoutType 设置录像回放窗口布局

setPlayBackLayoutType ()

参数说明：

设置录像回放窗口布局,支持4种窗口布局1（ 11）、2（ 22）、4（ 33）、8（44）

返回值：Promise res.errorCode 为'0'表示调用成功

getPlayBackWindowCount 查询录像回放模式窗口数

getPlayBackWindowCount ()

返回值：Promise res.errorCode 为'0'表示调用成功，通过res.windowCount获取

seekPlayBack 跳到指定时刻开始录像回放

seekPlayBack (seekTime)

参数说明：

seekTime: string 指定时刻,格式：“2020-11-03T12:10:10”

返回值：Promise res.errorCode 为'0'表示调用成功

startPlayReal 开始播放某些监控点实时视频

startPlayReal(deviceList)

参数说明：deviceList同startPlayBack

返回值：Promise res.errorCode为'0',表示调用成功

stopPlayReal 停止所有预览

stopPlayReal ()

返回值：Promise res.errorCode为'0',表示调用成功

setPlayRealLayoutType 设置实时预览窗口布局

setPlayRealLayoutType(layoutType)

参数说明：

设置实时预览窗口布局,支持 18种窗口布局1（11）、61（12）、53（14）、 20（1+1+12）、 51（1+2）、3（1+5）、 5（1+7）、21（1+8）、9（1+9）、22（1+12）、12（1+16）、60（21）、2（22）、4（33）、24（3+4）、8（44）、 25（46）、10（4+9）、15（5*5）

返回值：Promise; res.errorCode 为'0'表示调用成功

getPlayRealWindowCount 查询实时预览模式窗口数

getPlayRealWindowCount()

参数说明：

返回值：Promise; res.errorCode 为'0'表示调用成功，通过res.windowCount获取

getVersion 查询控件版本号

getVersion()

返回值：void

createWnd 创建窗口

createWnd(options)

参数说明:

包括artemisToken,artemisUrl,productCode,projectId,keepLiveUrl,showMode,moduleIndex,defaultStreamType,needPictureResult,notifyPlayBackTimes,playRealAdaptiveLayout,playBackAdaptiveLayout,numHideToolControl,showToolButton,timeBarLevel

返回值: Promise

setWndStyle 设置窗口样式

setWndStyle(options) 需要在创建窗口前调用

参数说明:

options.bEmbed 手动指定窗口模式，如果浏览器本身不支持嵌入模式，此参数无效。true 表示嵌入，false 表示跟随

options.bActiveXParentWnd 手动指定是否以 ActiveX 为父窗口，仅在 IE10 下有效。在 Win10 下如果遇到窗口闪烁严重，可以使用此参数。true 表示以 ActiveX 为父窗口。

options.cbSetDocTitle 客户端是通过浏览器标题（document.title）来匹配对应标签页窗口的，在发请求时，web-control 会在 document.title 中设置一个 uuid，请求结束后还原。当 iframe 跨域嵌套时，可以自行实现这个逻辑，把回调参数（uuid）通过 postMessage 传递给顶层窗口，在顶层窗口设置 document.title = document.title + ' '.repeat(36) + uuid

options.cbUnsetDocTitle 取消设置浏览器标题，请求结束后会调用

options.HWND 窗口句柄。在网页嵌在业务客户端里的情况下，网页的标题不会显示到业务客户端窗口标题上，web-control 客户端无法找到对应的窗口。此时可以由业务客户端直接把网页所在窗口的句柄告诉前端，通过设置这个字段，web-control 客户端直接根据窗口句柄来找到窗口。该参数仅在支持的该功能的 web-control 客户端版本中生效。

常见问题

1、嵌入模式下如何接入视频插件？A页面使用了视频插件，B页面中嵌入A页面，B页面无法显示视频插件，如何配置？

设置options.hWndOptions,在cbSetDocTitle中通知父级修改document.title，在cbUnsetDocTitle通知父级恢复document.title

hWndOptions可参考下面配置:

{
  bEmbed: true,
  cbSetDocTitle: (uuid)=>{
	if (isBembed) { // 嵌入模式通知父级修改document.title
	  window.parent.postMessage({ type: 'settings', data: {uuid} }, '*');
	} else {
	  document.title = documentTitle + ' '.repeat(36) + uuid;
	}
  },
  cbUnsetDocTitle: ()=>{ // 嵌入模式通知父级恢复document.title
	if (isBembed) {
	  window.parent.postMessage({ type: 'settings', data: {uuid: ''} }, '*');
	} else {
	  document.title = documentTitle;
	}
  }
}

同时父级需要监听消息去修改document.title

window.addEventListener('message', (event) => {
	const data = event.data;
	if (data.type === 'settings') {
		console.log('set uuid');
		if (data.data.uuid) {
			document.title = this.title + ' '.repeat(36) + data.data.uuid;
		} else {
			document.title = this.title;
		}
	}
});

2、页面中存在弹窗，会遮挡插件，如何处理？

使用cutDom去切割该弹窗。

3、页面中存在滚动条，如何处理？

options.scrollElement 中传入滚动容器。

4、插件显示异常如何排查？

(1) 如果是webcontrol初始化失败，具体信息需查看日志排查，默认日志目录为C:\Users\xxx\WebControlThird\log\WebControl.log (2) 如果webcontrol初始化成功，具体浏览器与插件通信信息可查看network。