德州网站建设德州,软件app开发公司哪家好,怎么找平台推广自己的产品,WordPress怎么添加留言功能最近前端的一个项目#xff0c;大屏需要摄像头播放#xff0c;摄像头厂家是海康威视的#xff0c;网上找了一圈都没有React集成的#xff0c;特别是没有使用UmiJS搭脚手架搭建的#xff0c;所以记录一下。
海康威视的开放平台的API地址#xff0c;相关插件和文档都可以下…最近前端的一个项目大屏需要摄像头播放摄像头厂家是海康威视的网上找了一圈都没有React集成的特别是没有使用UmiJS搭脚手架搭建的所以记录一下。
海康威视的开放平台的API地址相关插件和文档都可以下载
海康威视综合安防管理平台【海康开放平台】 下载下来后核心需要的包如下其中xxx.wasm文件是官方使用C编写的WebAssembly文件是基于堆栈的虚拟机的二进制指令格式一种低级汇编语言旨在非常接近已编译的机器代码并且非常接近本机性能。 其中集成的难点是在于官方开发包的引入因为下载下来的demo是用HTML写的直接可以在Head标签中导入所以没什么问题但UmiJS框架搭建的组件化项目直接就没有了HTML文件所以得找到额外script脚本引入的地方不同框架搭建的项目建议去看官方文档。那里是最直接的说明书。UmiJS框架的引入最终在官方文档中找到了入口。配置 找到之后在配置中引入即可注意引用的路径整个JS包是放在了public文件夹下。 然后就可以引用了直接上代码HFivePlayer.ts其中用了AntD的部分组件自己导入或更换
import {FC, useEffect, useState} from react
import styles from ./index.module.less
import {message, Spin} from antd;/*** 海康视频H5插件视频播放* author QC班长* since 20230727*/
interface IProps {wsUrl: string,//流媒体URL支持ws协议playerID: string,//播放器实例ID
}const HFivePlayer: FCIProps ({wsUrl, playerID}) {let player: any {}// 播放器对象const [isLoading, setIsLoading] useStateboolean(false)/*** 初始化播放器*/const initPlayer () {player new window.JSPlugin({// 需要英文字母开头 必填szId: player playerID,// 必填,引用H5player.min.js的js相对路径szBasePath: /js/h5player/,// 当容器div#play_window有固定宽高时可不传iWidth和iHeight窗口大小将自适应容器宽高iWidth: 100%,iHeight: 100%,// 分屏播放默认最大分屏4*4// iMaxSplit: 16,// iCurrentSplit: 1,// 样式oStyle: {border: rgb(53 116 237),borderSelect: #1d325d,background: #1d325d,}})// 设置播放容器的宽高并监听窗口大小变化window.addEventListener(resize, () {setTimeout(() {player.JS_Resize()}, 50)})//初始化插件initPlugin()}/*** 事件初始化*/const initPlugin () {player.JS_SetWindowControlCallback({windowEventSelect(iWindIndex: any) {// 插件选中窗口回调// console.log(windowSelect callback: , iWindIndex)//点击视频全屏显示wholeFullScreen()},pluginErrorHandler(iWindIndex: any, iErrorCode: any, oError: any) {// 插件错误回调// console.error(window-${iWindIndex}, errorCode: ${iErrorCode}, oError)message.error(播放失败: VideoPlayerException[iErrorCode])//重新播放// initPlayer()},windowEventOver(iWindIndex: any) {// 鼠标移过回调// console.log(鼠标移过回调, iWindIndex)},windowEventOut(iWindIndex: any) {// 鼠标移出回调// console.log(鼠标移出回调, iWindIndex)},windowFullScreenChange(bFull: any) {// 全屏切换回调// console.log(全屏切换回调, bFull)},firstFrameDisplay(iWndIndex: any, iWidth: any, iHeight: any) {// 首帧显示回调// console.log(首帧显示回调, iWndIndex, iWidth, iHeight)//停止加载setIsLoading(false)},performanceLack(iWndIndex: any) {// 性能不足回调console.log(性能不足回调, iWndIndex)}})//播放play()}/*** 播放*/const play () {if (wsUrl ! wsUrl ! null) {setIsLoading(true) //开始加载let preUrl wsUrl // 播放地址const param {playURL: preUrl,// 1高级模式 0普通模式高级模式支持所有mode: 0}// 当前播放窗口下标let index 0player.JS_Play(preUrl, param, index).then(() {// 播放成功回调// console.log(播放成功)}, (err: any) {// console.log(播放失败)// console.info(JS_Play failed:, err)message.error(播放失败: VideoPlayerException[err])})}}/*** 全屏*/const wholeFullScreen () {player.JS_FullScreenDisplay(true).then(() {// console.log(wholeFullScreen success)}, (e: any) {console.error(e)})}/*** 暂停*/// const stopPlay () {// player.JS_Stop().then(() {// console.log(stop realPlay success)// }, (e: any) {// console.error(e)// }// )// }useEffect(() {initPlayer()}, [])return (div className{styles.video}Spin spinning{isLoading} tip加载中... wrapperClassName{styles.loading}div id{player playerID} className{styles.player}//Spin/div)
}
export default HFivePlayer/*** 海康威视视频播放异常错误代码常量*/
export const VideoPlayerException {0x12f900001: 接口调用参数错误,0x12f900002: 不在播放状态,0x12f900003: 仅回放支持该功能,0x12f900004: 普通模式不支持该功能,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: 对讲不支持这种音频编码格式,
}样式文件index.module.less
.video {width: 100%;height: 100%;
}.loading {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;:global {//让视频插件100%撑满.ant-spin-container {width: 100%;height: 100%;}//修改ant-spin的默认最大高度div .ant-spin {max-height: fit-content;}}
}.player {cursor: pointer;width: 100%;height: 100%;
}
参考文献
0、海康开放平台
1、海康视频H5插件 v2.0.0开发总结_pixle0的博客-CSDN博客
2、vue h5player.min.js对接海康威视踩过的坑_h5player 海康威视_阿凯 i的博客-CSDN博客 3、vue集成海康威视H5视频播放器H5player开发包 V2.1.2_海康威视h5player_动感坤坤的博客-CSDN博客
4、构建 - Ant Design Pro
5、配置
