React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2

最近前端的一个项目，大屏需要摄像头播放，摄像头厂家是海康威视的，网上找了一圈都没有React集成的，特别是没有使用UmiJS搭脚手架搭建的，所以记录一下。

海康威视的开放平台的API地址，相关插件和文档都可以下载：

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

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

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

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

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

1.  
   import {FC, useEffect, useState} from 'react'
2.  
   import styles from './index.module.less'
3.  
   import {message, Spin} from "antd";
4.  
    
5.  
   /**
6.  
   * 海康视频H5插件视频播放
7.  
   * @author QC班长
8.  
   * @since 20230727
9.  
   */
10.  
    interface IProps {
11.  
    wsUrl: string,//流媒体URL，支持ws协议
12.  
    playerID: string,//播放器实例ID
13.  
    }
14.  
     
15.  
    const HFivePlayer: FC<IProps> = ({wsUrl, playerID}) => {
16.  
    let player: any = {}// 播放器对象
17.  
    const [isLoading, setIsLoading] = useState<boolean>(false)
18.  
    /**
19.  
    * 初始化播放器
20.  
    */
21.  
    const initPlayer = () => {
22.  
    player = new window.JSPlugin({
23.  
    // 需要英文字母开头 必填
24.  
    szId: 'player' playerID,
25.  
    // 必填,引用H5player.min.js的js相对路径
26.  
    szBasePath: '/js/h5player/',
27.  
    // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
28.  
    iWidth: '100%',
29.  
    iHeight: '100%',
30.  
    // 分屏播放，默认最大分屏4*4
31.  
    // iMaxSplit: 16,
32.  
    // iCurrentSplit: 1,
33.  
    // 样式
34.  
    oStyle: {
35.  
    border: 'rgb(53 116 237)',
36.  
    borderSelect: '#1d325d',
37.  
    background: '#1d325d',
38.  
    }
39.  
    })
40.  
    // 设置播放容器的宽高并监听窗口大小变化
41.  
    window.addEventListener('resize', () => {
42.  
    setTimeout(() => {
43.  
    player.JS_Resize()
44.  
    }, 50)
45.  
    })
46.  
    //初始化插件
47.  
    initPlugin()
48.  
    }
49.  
     
50.  
    /**
51.  
    * 事件初始化
52.  
    */
53.  
    const initPlugin = () => {
54.  
     
55.  
    player.JS_SetWindowControlCallback({
56.  
    windowEventSelect(iWindIndex: any) {
57.  
    // 插件选中窗口回调
58.  
    // console.log('windowSelect callback: ', iWindIndex)
59.  
    //点击视频全屏显示
60.  
    wholeFullScreen()
61.  
    },
62.  
    pluginErrorHandler(iWindIndex: any, iErrorCode: any, oError: any) {
63.  
    // 插件错误回调
64.  
    // console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError)
65.  
    message.error('播放失败:' VideoPlayerException[iErrorCode])
66.  
    //重新播放
67.  
    // initPlayer()
68.  
    },
69.  
    windowEventOver(iWindIndex: any) {
70.  
    // 鼠标移过回调
71.  
    // console.log('鼠标移过回调', iWindIndex)
72.  
    },
73.  
    windowEventOut(iWindIndex: any) {
74.  
    // 鼠标移出回调
75.  
    // console.log('鼠标移出回调', iWindIndex)
76.  
    },
77.  
    windowFullScreenChange(bFull: any) {
78.  
    // 全屏切换回调
79.  
    // console.log('全屏切换回调', bFull)
80.  
    },
81.  
    firstFrameDisplay(iWndIndex: any, iWidth: any, iHeight: any) {
82.  
    // 首帧显示回调
83.  
    // console.log('首帧显示回调', iWndIndex, iWidth, iHeight)
84.  
    //停止加载
85.  
    setIsLoading(false)
86.  
    },
87.  
    performanceLack(iWndIndex: any) {
88.  
    // 性能不足回调
89.  
    console.log('性能不足回调', iWndIndex)
90.  
    }
91.  
    })
92.  
    //播放
93.  
    play()
94.  
    }
95.  
     
96.  
    /**
97.  
    * 播放
98.  
    */
99.  
    const play = () => {
100.  
     if (wsUrl != "" && wsUrl != null) {
101.  
     setIsLoading(true) //开始加载
102.  
     let preUrl = wsUrl // 播放地址
103.  
     const param = {
104.  
     playURL: preUrl,
105.  
     // 1：高级模式 0：普通模式，高级模式支持所有
106.  
     mode: 0
107.  
     }
108.  
     // 当前播放窗口下标
109.  
     let index = 0
110.  
     player.JS_Play(preUrl, param, index).then(() => {
111.  
     // 播放成功回调
112.  
     // console.log('播放成功')
113.  
     }, (err: any) => {
114.  
     // console.log('播放失败')
115.  
     // console.info('JS_Play failed:', err)
116.  
     message.error('播放失败:' VideoPlayerException[err])
117.  
     }
118.  
     )
119.  
      
120.  
     }
121.  
     }
122.  
      
123.  
     /**
124.  
     * 全屏
125.  
     */
126.  
     const wholeFullScreen = () => {
127.  
     player.JS_FullScreenDisplay(true).then(() => {
128.  
     // console.log(`wholeFullScreen success`)
129.  
     }, (e: any) => {
130.  
     console.error(e)
131.  
     }
132.  
     )
133.  
     }
134.  
      
135.  
     /**
136.  
     * 暂停
137.  
     */
138.  
     // const stopPlay = () => {
139.  
     // player.JS_Stop().then(() => {
140.  
     // console.log('stop realPlay success')
141.  
     // }, (e: any) => {
142.  
     // console.error(e)
143.  
     // }
144.  
     // )
145.  
     // }
146.  
      
147.  
     useEffect(() => {
148.  
     initPlayer()
149.  
     }, [])
150.  
      
151.  
     return (
152.  
     <div className={styles.video}>
153.  
     <Spin spinning={isLoading} tip='加载中...' wrapperClassName={styles.loading}>
154.  
     <div id={'player' playerID} className={styles.player}/>
155.  
     </Spin>
156.  
     </div>
157.  
     )
158.  
     }
159.  
     export default HFivePlayer
160.  
      
161.  
     /**
162.  
     * 海康威视视频播放异常错误代码常量
163.  
     */
164.  
     export const VideoPlayerException = {
165.  
     '0x12f900001': '接口调用参数错误',
166.  
     '0x12f900002': '不在播放状态',
167.  
     '0x12f900003': '仅回放支持该功能',
168.  
     '0x12f900004': '普通模式不支持该功能',
169.  
     '0x12f900005': '高级模式不支持该功能',
170.  
     '0x12f900006': '高级模式的解码库加载失败',
171.  
     '0x12f900008': 'url格式错误',
172.  
     '0x12f900009': '取流超时错误',
173.  
     '0x12f900010': '设置或者是获取音量失败，因为没有开启音频的窗口',
174.  
     '0x12f900011': '设置的音量不在1-100范围',
175.  
     '0x12f910000': 'websocket连接失败，请检查网络是否通畅，URL是否正确',
176.  
     '0x12f910010': '取流失败',
177.  
     '0x12f910011': '流中断，电脑配置过低，程序卡主线程都可能导致流中断',
178.  
     '0x12f910014': '没有音频数据',
179.  
     '0x12f910015': '未找到对应websocket，取流套接字被动关闭的报错',
180.  
     '0x12f910016': 'websocket不在连接状态',
181.  
     '0x12f910017': '不支持智能信息展示',
182.  
     '0x12f910018': 'websocket长时间未收到message',
183.  
     '0x12f910019': 'wss连接失败，原因：端口尚未开通、证书未安装、证书不安全',
184.  
     '0x12f910020': '单帧回放时不能暂停',
185.  
     '0x12f910021': '已是最大倍速',
186.  
     '0x12f910022': '已是最小倍速',
187.  
     '0x12f910023': 'ws/wss连接超时，默认6s超时时间，原因：网络异常，网络不通',
188.  
     '0x12f910026': 'jsdecoder1.0解码报错视频编码格式不支持',
189.  
     '0x12f910027': '后端取流超时，主动关闭连接（设备突然离线或重启，网络传输超时20s）',
190.  
     '0x12f910028': '设置的缓冲区大小无效，大小0-510241024，不在该范围的报错',
191.  
     '0x12f910029': '普通模式的报错，码流异常导致黑屏,尝试重新取流',
192.  
     '0x12f910031': '普通模式下播放卡主会出现',
193.  
     '0x12f910032': '码流编码格式普通模式下不支持，可切换高级模式尝试播放',
194.  
     '0x12f920015': '未调用停止录像，再次调用开始录像',
195.  
     '0x12f920016': '未开启录像调用停止录像接口错误',
196.  
     '0x12f920017': '紧急录像目标格式不支持，非ps/mp4',
197.  
     '0x12f920018': '紧急录像文件名为null',
198.  
     '0x12f930010': '内存不足',
199.  
     '0x12f930011': '首帧显示之前无法抓图，请稍后重试',
200.  
     '0x12f950000': '采集音频失败，可能是在非https域下使用对讲导致',
201.  
     '0x12f950001': '对讲不支持这种音频编码格式',
202.  
     }

样式文件index.module.less

1.  
   .video {
2.  
   width: 100%;
3.  
   height: 100%;
4.  
   }
5.  
    
6.  
   .loading {
7.  
   width: 100%;
8.  
   height: 100%;
9.  
   display: flex;
10.  
    justify-content: center;
11.  
    align-items: center;
12.  
     
13.  
    :global {
14.  
    //让视频插件100%撑满
15.  
    .ant-spin-container {
16.  
    width: 100%;
17.  
    height: 100%;
18.  
    }
19.  
     
20.  
    //修改ant-spin的默认最大高度
21.  
    div > .ant-spin {
22.  
    max-height: fit-content;
23.  
    }
24.  
    }
25.  
    }
26.  
     
27.  
    .player {
28.  
    cursor: pointer;
29.  
    width: 100%;
30.  
    height: 100%;
31.  
    }
32.  
     

参考文献：

0、海康开放平台

4、构建 - Ant Design Pro 

5、配置

这篇好文章是转载于：学新通技术网