uniapp接入萤石云 webview

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() {//获取accessTokenuni.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.accessTokenthis.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', // 视频容器IDaccessToken: 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})

uniapp接入萤石云 webview相关推荐

【uniApp 接入萤石云】
uniApp 接入萤石云小记 vue页面 html页面 uniApp 不支持直接接入萤石云相关的 ezuikit.js 所以要用其uniApp支持的 web-view 属性 vue页面 <t ...
关于uni-app接入萤石云UIKit Javascript
记录一下工作中问题所在一.为什么选择UIKit Javascript 萤石云目前支持HLS,FLV,以及自带的EZOPEN协议,其中HLS有延迟,之前项目用的xgplayer播放FLV协议的视频,但 ...
python接入萤石云HLS直播流（海康威视摄像头4g连接条件下）
1.将插好4g流量卡海康威视摄像头添加到萤石云下载注册并登陆萤石云,点击添加设备,输入摄像头后部的序列号以及验证码(已改过设备密码的填写密码). 获取HLS直播流地址登陆萤石云开发平台(https ...
vue 接入萤石云，实现监控、多窗口监控、转向、放大缩小等
准备资料:文档概述 · 萤石开放平台API文档 vue 萤石云视频监控对接_谭CV的博客-CSDN博客_萤石云vue 1.接入萤石云 npm i ezuikit npm i ezuikit-js@0. ...
uni-app接入阿里云认证SDK（号码认证服务），App客户端一键登方式
uni-app接入阿里云认证SDK(号码认证服务)App客户端一键登方式首先,你需要了解和开通阿里云的号码认证服务,地址:https://help.aliyun.com/product/75010. ...
vue接入萤石云_智能家居不香吗？萤石转型：或者臣妾做不到，或者费力不讨好...
作者|蒋杰升简称|单蒋让你们荡起就像有人说这个车「比较高级」一样,指不定在萤石看来,发布一个IOT平台这个姿势也「比较高级」. 于是说,萤石拟从智能家居向IOT开放转型这件事,越过传闻,实锤落地. ...
接入萤石云的踩坑问题
在引入萤石云的时候遇到好几个问题,给大家讲讲我怎么用的大家跟着我做,根据需求自己改动,应该都不会有什么问题环境 vue2 我做的监控模式模式不一样萤石云api需要传入的地址格式也是不一样的萤石云 ...
UniApp接入阿里云金融级实人认证服务
1.下载金融级实人认证UniApp SDK,解压到项目根目录的nativePlugins目录下. 2.选择插件:manifest.json =>App原生插件配置=>本地插件. 3.设置自 ...
EasyCVR平台基于萤石云SDK接入的设备播放流程及接口调用
EasyCVR视频融合云服务支持海量视频汇聚与管理.处理与分发.智能分析等视频能力,在功能上,可支持视频监控直播.云端录像.云存储.录像检索与回看.智能告警.平台级联.服务器集群等.EasyCVR平台 ...

uniapp接入萤石云 webview

uniapp接入萤石云 webview相关推荐

最新文章

热门文章