两者其实都没有直接支持uniapp的使用，但支持H5的实现，所以可以利用uniapp中web-view组件嵌套来实现 web-view用法参照uniapp官网
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<title>实时监控</title>
</head>
<!-- <script type="text/javascript" src="http://static.yfpyx.com/bigdata_app/js/ezuikit.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script src="./imouplayer.js"></script>
<script src="./ezuikit.js"></script>
<style>
body{
margin: 0 10px;
position: relative;
}
.player {
width: 100%;
height: 195px;
}
.hide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.msg {
line-height: 195px;
color: #2875FF;
display: none;
text-align: center;
}
</style>
<body>
<div id="player" class="player"></div>
<div class="player hide"></div>
<div class="msg">暂无视频</div>
<script>
window.onload = ()=> {
const newImouPlayer = ({ id, url, kitToken,height}) => {
// 添加DOM容器
let player = new ImouPlayer(id);
// 播放器初始化
player.setup({
src: [{
url,
kitToken
}], // 播放地址
poster: '', // 封面图url
height,
autoplay: true,
controls: false, // 是否展示控制栏
});
return player
}
const newEZUIKitPlayer = ({id, accessToken, url, height}) => {
return new EZUIKit.EZUIKitPlayer({
autoplay: true,
id,
accessToken,
url,
height,
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
});
}
// 截取url中传递过来的监控链接
let url = decodeURIComponent(window.location.search.substr(5))
if(url == "undefined"){ // 无数据提示
$('.player').hide()
$('.msg').show()
return
}
const detail = JSON.parse(url)
setTimeout(()=>{
if(detail.apiType == 1) {// 1：乐橙云 2：萤石云
newImouPlayer({
id: `#player`,
url: `imou://open.lechange.com/${detail.deviceSn}/${detail.channelId}/1?streamId=1`,
kitToken: detail.kitToken,
height: 179
})
}else if(detail.apiType == 2){
newEZUIKitPlayer({
id: `player`,
accessToken: this.detail.accessToken,
url: this.detail.liveUrl,
})
}
}, 500)
// document.addEventListener('UniAppJSBridgeReady', function() {
// $('.hide').click(function(){
// console.log('tag', 123)
// uni.redirectTo({
// url: '/pages/site/video/detail?data=' + encodeURIComponent(JSON.stringify(detail))
// });
// })
// })
}
</script>
</body>
</html>
注意点：
1.如只需使用萤石云 可以直接使用本地地址，乐橙云需要配置远程地址 否则提示Please open on Http or Https
2.直接使用web-view组件有可能会出现返回需要点击两次才能后退，官网给出的原因是因为back监听冲突，解决方案：直接js创建一个子webview来加载html
image.png
