uniapp接入萤石云 webview

原创已于 2022-04-02 18:14:02 修改 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-04-02 18:11:55 首次发布

本文介绍如何在uniapp中接入萤石云服务，通过webview实现与vue页面的结合，详细阐述了在前端开发中进行混合应用开发的具体步骤。

vue页面

<template>
	<view class="u-wrap">
		<!-- 导航栏 -->
		<u-navbar class="heard-nav" :background="background" titleColor="#FFFFFF"
		 :title="navbarTitle" :titleSize="background.titleSize" title-width="460" back-icon-color="white">
		</u-navbar>
		
		<view class="content">
			<!-- <web-view src="/hybrid/html/local.html"></web-view> -->
			<web-view :src="webViewUrl" @message="getMessage"></web-view>
		</view>
	</view>
</template>

onShow() {
                //获取accessToken
				uni.request({
					method:'POST',
				    url: 'https://open.ys7.com/api/lapp/token/get', //仅为示例，并非真实接口地址。
				    data: {
						appKey:'萤石云创建应用后获取',
						appSecret:'萤石云创建应用后获取'
					},
				    header: {
				        'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
				    },
				    success: (res) => {
						this.url = res.data.data.accessToken
						this.webViewUrl = `/hybrid/html/local.html?    url=${encodeURIComponent(this.url)}` //vue页面传参给html
				    }
				});
		},

html页面放在本地hybrid/html/local.html

<div id="video-container" class="video"></div>


//获取vue页面传过来的accessToken
var accessToken = getQuery('url')
	console.log(getQuery('url'));  //获取 uni-app 传来的值
	//取url中的参数值
	function getQuery(name) {
	    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
	    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	    let r = window.location.search.substr(1).match(reg);
	    console.log(r);
	    if(r != null) {
	        // 对参数值进行解码
	        return decodeURIComponent(r[2]);
	    }
	    return null;
	}


	var player = new EZUIKit.EZUIKitPlayer({
	    id: 'video-container', // 视频容器ID
	    accessToken: accessToken,
	    url: 'ezopen://open.ys7.com/设备号/1.live',
		template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
		// 视频上方头部控件
		header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
		// plugin: ['talk'], // 加载插件，talk-对讲
		// 视频下方底部控件
		footer: ['talk', 'broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
		// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
		// width: '100%',
		height: 300
	})