海康威视的开放平台的API地址#xff0c;相关插件和文档都可以下…最近前端的一个项目大屏需要摄像头播放摄像头厂家是海康威视的网上找了一圈都没有React集成的特别是没有使用UmiJS搭脚手架搭建的所以记录一下。

海康威视综合安防管理平台【海康开放平台】

下载下来后核心需要的包如下其中xxx.wasm文件是官方使用C编写的WebAssembly文件是基于堆栈的虚拟机的二进制指令格式一种低级汇编语言旨在非常接近已编译的机器代码并且非常接近本机性能。

其中集成的难点是在于官方开发包的引入因为下载下来的demo是用HTML写的直接可以在Head标签中导入所以没什么问题但UmiJS框架搭建的组件化项目直接就没有了HTML文件所以得找到额外script脚本引入的地方不同框架搭建的项目建议去看官方文档。

那里是最直接的说明书。

UmiJS框架的引入最终在官方文档中找到了入口。

配置

找到之后在配置中引入即可注意引用的路径整个JS包是放在了public文件夹下。

然后就可以引用了直接上代码HFivePlayer.ts其中用了AntD的部分组件自己导入或更换

import

必填,引用H5player.min.js的js相对路径szBasePath:

/js/h5player/,//

当容器div#play_window有固定宽高时可不传iWidth和iHeight窗口大小将自适应容器宽高iWidth:

100%,iHeight:

设置播放容器的宽高并监听窗口大小变化window.addEventListener(resize,

{setTimeout(()

{player.JS_SetWindowControlCallback({windowEventSelect(iWindIndex:

any)

iWindIndex)//点击视频全屏显示wholeFullScreen()},pluginErrorHandler(iWindIndex:

any,

console.error(window-${iWindIndex},

errorCode:

VideoPlayerException[iErrorCode])//重新播放//

initPlayer()},windowEventOver(iWindIndex:

any)

iWindIndex)},windowEventOut(iWindIndex:

any)

iWindIndex)},windowFullScreenChange(bFull:

any)

bFull)},firstFrameDisplay(iWndIndex:

any,

iHeight)//停止加载setIsLoading(false)},performanceLack(iWndIndex:

any)

VideoPlayerException[err])})}}/***

全屏*/const

{player.JS_FullScreenDisplay(true).***n(()

{//

wrapperClassName{styles.loading}div

id{player

className{styles.player}//Spin/div)

export

设置或者是获取音量失败因为没有开启音频的窗口,0x12f900011:

websocket连接失败请检查网络是否通畅URL是否正确,0x12f910010:

取流失败,0x12f910011:

流中断电脑配置过低程序卡主线程都可能导致流中断,0x12f910014:

没有音频数据,0x12f910015:

未找到对应websocket取流套接字被动关闭的报错,0x12f910016:

websocket长时间未收到message,0x12f910019:

wss连接失败原因端口尚未开通、证书未安装、证书不安全,0x12f910020:

ws/wss连接超时默认6s超时时间原因网络异常网络不通,0x12f910026:

jsdecoder1.0解码报错视频编码格式不支持,0x12f910027:

后端取流超时主动关闭连接设备突然离线或重启网络传输超时20s,0x12f910028:

设置的缓冲区大小无效大小0-510241024不在该范围的报错,0x12f910029:

普通模式的报错码流异常导致黑屏,尝试重新取流,0x12f910031:

码流编码格式普通模式下不支持可切换高级模式尝试播放,0x12f920015:

紧急录像目标格式不支持非ps/mp4,0x12f920018:

内存不足,0x12f930011:

采集音频失败可能是在非https域下使用对讲导致,0x12f950001:

对讲不支持这种音频编码格式,

{//让视频插件100%撑满.ant-spin-container

{width:

h5player.min.js对接海康威视踩过的坑_h5player

海康威视_阿凯

3、​​​​​​​vue集成海康威视H5视频播放器H5player开发包

V2.1.2_海康威视h5player_动感坤坤的博客-CSDN博客

4、构建