关于uni-app接入萤石云UIKit Javascript

最新推荐文章于 2024-06-21 16:17:24 发布

Zedd_HellOwOrld

最新推荐文章于 2024-06-21 16:17:24 发布

阅读量2.7k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mengmengmengxin/article/details/126009226

版权

记录一下工作中问题所在

一、为什么选择UIKit Javascript

萤石云目前支持HLS，FLV，以及自带的EZOPEN协议，其中HLS有延迟，之前项目用的xgplayer播放FLV协议的视频，但是萤石云一个账号下设备过多，在下使用的FLV协议会出问题，所以重构为EZOPEN协议。

二、操作过程

1.下载ezuikit.js

下载链接

下载完成后，文件夹里面有3种demo，可以适当了解一下主要是用根目录下ezuikit.js文件

2.获取accessToken

每一个萤石设备都会有一个appkey和secret，可登录萤石云控制台查看

根据API接入，获得到accessToken(注意，有时效性，可根据API返回的时间定时更新)剩下不多做赘述

3.引入uni-app页面

因为uni-app无法做到直接引用ezuikit.js，所以要使用web-view标签去链接一个新的页面去播放。

vue

<template>    
    <view>
        <web-view :src="url"></web-view>
    </view>
</template>
<script>
    export default {
	data() {
		return {
			url:""
        }
    },
    onShow() {
        selectVideoValue();
    },
    selectVideoValue()
	{	
		let that = this;
		var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
		setTimeout(function() {
			that.url = "../../static/video.html?url="+'你的url'+"&accessToken="+'你的token';
			var wv = currentWebview.children()[0]
			wv.setStyle({
				top:200,
				height:400,
			})
		}, 500);			
	},
</script>

html

<script type="text/javascript" src="ezuikit.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title></title>
<body>
  <div id="myPlayer">
  </div>
  <script>
	window.onload=()=>{
		
		//标题设置为空，如果不设置为空，会与uni-app自带标题冲突
		document.title='\u200E';
		// 截取url与accessToken
		let url=window.location.href.split('?')[1].split('&')[0].split('=')[1]//url
		let accessToken=window.location.href.split('?')[1].split('&')[1].split('=')[1]//token
		init(url,accessToken);
		
		function init(url,accessToken) 
		{
			var player = new EZUIKit.EZUIKitPlayer({
				id: 'myPlayer',
				url: url,
				template: 'standard',
				accessToken: accessToken,
				autoplay: true,
				width: 960,
				height: 650,
			});	
		}
	}

  </script>
</body>

注意ezuikit.js与新建的html必须放在static目录之下