uniapp 对接萤石,兼容所有端

1.对接萤石的方式有很多种,我们常用的是官方的sdk

**

2.实行的技术方案

2.1 webview

通过在hybrid/html和创建的页面的确可以支持官方sdk,但是这会造成页面的卡顿,消耗大,且页面直接互相通信麻烦(官方有提供通信方式案例)

2.2 renderjs

renderjs可以在界面直接操作,且兼容性强,

**
renderjs代码

<script module="ezuikit" lang="renderjs"></script >
调用方式ezuikit.事件

3.建议动态引入sdk // 动态引入较大类库避免影响页面展示

	mounted() {
		if (typeof window.EZUIKit !== 'undefined') {
			this.initPlayer();
		} else {
			console.log('undefined EZUIKit...');
			const script = document.createElement('script')
			// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
			script.src = 'static/ezuikit.js'
			script.onload = this.initPlayer.bind(this)
			document.head.appendChild(script)
		}
	},

4.uniapp注意事项

uniapp开发的本地js库建议都放到hybrid/html/js目录下避免很多问题。

5.萤石云官方sdk示例代码

		player = new EZUIKit.EZUIKitPlayer({
			id: 'video-container', // 视频容器ID
			accessToken: t.cameraData.token,
			url: `ezopen://open.ys7.com/${t.cameraData.device_serial}/${t.cameraData.channel_no}.live`,
			// simple - 极简版; pcLive-pc直播;pcRec-pc回放;mobileLive-移动端直播;mobileRec-移动端回放;security - 安防版;voice-语音版;
			width: windowWidth,
			handleError: () => {
				this.$ownerInstance.callMethod('titleErr')
			},
			fullScreenChangeCallBack: (data) => {
				if (data.code === false) {
					//退出全屏就竖屏
					this.$ownerInstance.callMethod('VerticalScreen')
					//这里取巧,因为监听无法在取消全屏之前执行竖屏,这样会导致视频还没有回到原来的位置,所以只能重新在加载一次
					setTimeout(() => {
						this.initPlayer()
					}, 500);
				}
			}
		});

你可能感兴趣的:(uni-app)