unniapp通过iframe引入海康H5player实现视频监控的播放

最新推荐文章于 2024-11-27 11:34:10 发布

Dear.Wendy

最新推荐文章于 2024-11-27 11:34:10 发布

阅读量1.5k

点赞数 11

CC 4.0 BY-SA版权

文章标签：前端 uni-app javascript 实时音视频音视频

本文链接：https://blog.csdn.net/XiaO_FenG_C/article/details/135283999

本文介绍了如何在海康开放平台中使用H5player组件进行视频播放，包括引入组件、动态获取视频源并嵌入到页面的iframe中，以及实现通过WebSocket获取实时视频流并进行播放的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先引入H5player

下载地址：海康开放平台

海康视频H5播放器组件 - DCloud 插件市场

我是把demo的文件直接放到staic文件直接用他的demo.html，也能用bin文件自己创建html文件引入h5player.min.js文件根据自己的需求

2.在需要用的页面直接

<iframe :src="this.webURL" frameborder="0" :style="styleObject"></iframe>

webURL：'./static/h5player/demo.html?data=',

    			async getData(params) {
				uni.request({
					url: 'http:xxxxxxxxxxxx',//请求地址
					data: {
						cameraIndexCode: this.code,
						protocol: 'ws'
					},
					method: 'GET',
					success: (res) => {
						this.url = res.data.result
						let playURL = this.url
						this.webURL += playURL
					}
				})
			},

3.在staic-h5player-demo.html

					realplay() {
						const paramsStr = window.location.search
						const params = new URLSearchParams(paramsStr)//获取url的参数
						this.urls.realplay = params.get('data')//获取url的参数播放地址
						let realplay= params.get('data') 
						let {
							player,
							mode,
							urls
						} = this,
						index = player.currentWindowIndex,
							playURL = realplay

						player.JS_Play(playURL, {
							playURL,
							mode
						}, index).then(
							() => {
								console.log('realplay success')
							},
							e => {
								console.error(e)
							}
						)
					},

4.完成