【uniApp 接入萤石云】
List itemuniApp 接入萤石云 小记vue页面html页面uniApp 不支持直接接入 萤石云相关的 ezuikit.js所以要用其uniApp支持的 web-view 属性vue页面<template><view class="hello-ezuikit-js"><web-view :src="webViewUrl" id="video-containe
·
uniApp 不支持直接接入 萤石云相关的 ezuikit.js 所以要用其uniApp支持的 web-view 属性
vue页面
<template>
<view class="hello-ezuikit-js">
<web-view :src="webViewUrl" id="video-container"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
allInfo: undefined,
webViewUrl:""
};
},
onLoad(option) {
this.allInfo = JSON.parse(decodeURIComponent(option.config));
console.log(this.allInfo);
uni.setNavigationBarTitle({
title: this.allInfo.row.deviceName,
});
this.webViewUrl =
"/hybrid/html/mobileLive.html?url=" +
this.allInfo.monitorUrl + // 萤石云访问的路径
"&accessToken=" +
this.allInfo.row.accessToken + // 对应的tokeng
"&title=" +
this.allInfo.row.deviceName;
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
#video-container {
width: 100%;
height: 400px;
}
</style>
html页面
(一定要放在 /hybrid/html/ 文件下 JS 也放在对应的模块)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<script src="./js/ezuikit.js"></script>
</head>
<style>
body{
margin: 0;
padding: 0;
}
</style>
<body>
<div className="demo">
<!-- <h2>视频模式使用示例:</h2> -->
<div id="video-container">
</div>
<!-- <div>
<button onClick="play()">play</button>
<button onClick="stop()">stop</button>
<button onClick="getOSDTime()">getOSDTime</button>
<button onClick="getOSDTime2()">getOSDTime2</button>
<button onClick="capturePicture()">capturePicture</button>
<button onClick="openSound()">openSound</button>
<button onClick="closeSound()">closeSound</button>
<button onClick="startSave()">startSave</button>
<button onClick="stopSave()">stopSave</button>
<button onClick="ezopenStartTalk()">开始对讲</button>
<button onClick="ezopenStopTalk()">结束对讲</button>
<button onClick="fullScreen()">全屏</button>
</div> -->
<!-- <p style="font-style: italic;">播放多个视频,可初始化多个实例,参考:/demos/base-demo/multi-demo</p> -->
</div>
<script>
//取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 url = getQuery('url')
var accessToken = getQuery('accessToken')
var title = getQuery('title')
document.title = title
var playr;
// fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
// .then(response => response.json())
// .then(res => {
// var accessToken = res.data.accessToken;
// 这里我自己是有传 accessToken和 url 所以不调用他原来的方法
playr = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: accessToken,
url: url,
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题;
// plugin: ['talk'],
footer: ["hd", "fullScreen"],
// width: window.screen.availWidth,
// height: 0.75 * window.screen.availWidth,
});
// });
function fullScreen() {
var playPromise = playr.fullScreen();
playPromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function play() {
var playPromise = playr.play();
playPromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function stop() {
var stopPromise = playr.stop();
stopPromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function getOSDTime() {
var getOSDTimePromise = playr.getOSDTime();
getOSDTimePromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function getOSDTime2() {
var getOSDTimePromise = playr2.getOSDTime();
getOSDTimePromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function capturePicture() {
var capturePicturePromise = playr.capturePicture();
capturePicturePromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function openSound() {
var openSoundPromise = playr.openSound();
openSoundPromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function closeSound() {
var closeSoundPromise = playr.closeSound();
closeSoundPromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function startSave() {
var startSavePromise = playr.startSave();
startSavePromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function stopSave() {
var stopSavePromise = playr.stopSave();
stopSavePromise.then((data) => {
console.log("promise 获取 数据", data)
})
}
function ezopenStartTalk() {
playr.startTalk();
}
function ezopenStopTalk() {
playr.stopTalk();
}
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)