當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

uniapp结合萤石视频ezuikit.js的爬坑记录

發布時間：2024/3/13 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 uniapp结合萤石视频ezuikit.js的爬坑记录小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.前言

　　由于開發需要，項目需要接入螢石的視頻監控。螢石官方提供了三種協議的的視頻方式，hls，rtmp，ezopen。三種協議是視頻直播有一定差別，由于hls有十多秒的延遲，不符合項目的要求，并且因為hls，rtmp需要用vedio標簽，uniapp會對video標簽初始化，

所以本人采用了延遲最低的ezopen。

在使用的過程中遇到了很多很多的坑，即使在嘗試別人的解決方案依舊無用。希望這篇文章對使用的同學有所幫助。

2.初探

　　看看官方文檔，他有一個UIKit JavaScript的demo示例，請使用的同學先下載官方demo示例。同時看看官方文檔他是這么描述使用的：

第一步：首頁把下載的uikit的js文件放到static下，注意不能放到其他文件夾下，否則在配置decoderPath地址時，會找不到，導致報錯

第二步：在需要的vue文件下引用uikit.js

<template><view class=""><uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="監控詳情"></uni-nav-bar><view class=""><view id="myPlayer"></view></view></view> </template> <script>import EZUIKit from '../../static/js/ezuikit.js'export default {data() {return {device_id: '',accessToken: ""}},onLoad(options) {this.device_id = options.device_idthis.accessToken = options.accessTokenthis.getAddr()},methods: {async getAddr() {let url=`ezopen://open.ys7.com/${this.device_id}/1.hd.live`var player = new EZUIKit.EZUIPlayer({id: 'myPlayer',url: url,autoplay: true,accessToken: this.accessToken,decoderPath: 'static/js/',width: 600,height: 400,});player.play();},clickLeft() {uni.navigateBack({delta: 1});},}} </script><style> </style>

常見的報錯信息：

1.注意decoderPath如果寫錯，會出現報錯信息，JSPlugin沒有定義，點開報錯信息，仔細觀看官方文檔的同學應該都發現了，其實這個JSPlugind對應就是下圖的decorderPath路徑，如果你的路徑寫錯了肯定是JSPlugin未定義，

那這個路徑到底怎么書寫，需要把decoderPath寫成'static/js/'才行

2.報錯信息

這個報錯不知道什么原因導致的，但是給初始化方法加個定時器就好了，知道的小伙伴可以評論告訴我哦！

getAddr() {setTimeout(()=>{let url=`ezopen://open.ys7.com/${this.device_id}/1.hd.live`var player = new EZUIKit.EZUIPlayer({id: 'myPlayer',url: url,autoplay: true,accessToken: this.accessToken,decoderPath: 'stic/js/',width: 600,height: 400,});player.play();},500)},

但是在PC端運行正常，但是真機測試時監控出不來！！！！！

發現uniapp結合螢石云必需要寫h5頁面，需要用到uniapp的webview組件，且app的h5頁面要放到項目里面，微信小程序的h5頁面需要放到服務器上。

具體操作：

微信小程序：

webview.vue文件

<template><view class="webview"><web-view :src="url" id="webcon" @message="handleMessage"></web-view></view> </template><script>export default {data() {return {url: '',device_id: '',accessToken: ''}},onLoad(options) {this.device_id = options.device_idthis.accessToken = options.accessToken//uniapp小程序this.url = "https://wx.hnyfwlw.com/wechat?device_id=" + this.device_id + "&accessToken=" + this.accessToken//uniapp Appthis.url = "/static/h5.html?device_id=" + this.device_id + "&accessToken=" + this.accessToken//設置 webview 界面的狀態欄的 titleuni.setNavigationBarTitle({title: '監控詳情'});},} </script><style>.webview {width: 100vw;height: 100vh;} </style>

?h5.html文件

<!DOCTYPE html> <html lang=zh-CN><head><meta charset="utf-8" /><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>監控詳情頁</title><style type="text/css">body {margin: 0;background-color: #f3f3f3;}.btn-box {margin-top: 20px;display: flex;flex-direction: row;justify-content: space-around;align-items: center;}.more,.less {flex: 1}img {width: 100%;}.direc {width: 150px;height: 150px;background: url('http://static.yfpyx.com/bigdata_app/image/monitor/1.png');background-size: 100% auto;background-repeat: no-repeat;position: relative;}.direc div {width: 50px;height: 50px;position: absolute;}.top {top: 0;left: 50px}.bottom {bottom: 0;left: 50px}.left {left: 0;top: 50px}.right {right: 0;top: 50px}#box {height: 300px;width: 100%;background: #000;}#dialog {display: none;width: 200px;line-height: 80px;background: rgba(0, 0, 0, .8);color: #fff;text-align: center;position: absolute;left: 50%;margin-left: -100px;border-radius: 4px;z-index: 999;top: 50%;margin-top: -40px;}</style></head><body><div id="box"></div><div id="dialog"></div><div class="btn-box"><div class="more" ontouchstart="configCamera('move', 8)" ontouchend="stopConfigCamera()"><image src="http://static.yfpyx.com/bigdata_app/image/monitor/3.png" mode="widthFix"></image></div><div class="direc"><div class="top" ontouchstart="configCamera('move', 0)" ontouchend="stopConfigCamera()"></div><div class="bottom" ontouchstart="configCamera('move', 1)" ontouchend="stopConfigCamera()"></div><div class="left" ontouchstart="configCamera('move', 2)" ontouchend="stopConfigCamera()"></div><div class="right" ontouchstart="configCamera('move', 6)" ontouchend="stopConfigCamera()"></div></div><div class="less" ontouchstart="configCamera('move', 9)" ontouchend="stopConfigCamera()"><image src="http://static.yfpyx.com/bigdata_app/image/monitor/2.png" mode="widthFix"></image></div></div></body><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 type="text/javascript" src="http://static.yfpyx.com/bigdata_app/js/ezuikit.js"></script><script type="text/javascript">function configCamera(ctrl, movenum) {if (ctrl == "takephoto") {//拍照 $.ajax({type: "POST",url: "XXX",data: {device_id: device_id,}}).then((res) => {if (res.data.data) {var data = JSON.parse(res.data.data);var picUrl = data.data.picUrl;} else {console.log(res.data.message)}});} else {//上下左右、放大、縮小$.ajax({type: "POST",url: "XXX",data: {device_id: device_id,ctrl: ctrl,movenum: movenum,}}).then((res) => {$('#dialog').html('指令下發成功,請等待...').stop().show(500).delay(3000).hide(500)})}}function stopConfigCamera() {$.ajax({type: "POST",url: "XXX",data: {device_id: device_id,ctrl: "stop",},});}var str = window.location.search.substr(1)var arr = str.split('&')var device_id = arr[0].split('=')[1]var accessToken = arr[1].split('=')[1]$.ajax({type: "POST",url: "xxx",data: {device_id: device_id,}}).then((res) => {var data = eval("(" + res.data + ")");var hlsHdSrc = data.hlsHd;var playHtml =`<video id="myPlayer" autoplay poster='' controls playsInline webkit-playsinline src=${hlsHdSrc} style="width:100%; height:100%;"></video>`;$("#box").html(playHtml)var myVideo = new EZUIKit.EZUIPlayer("myPlayer");setTimeout(() => {myVideo.play();}, 150);})</script> </html>

總結

以上是生活随笔為你收集整理的uniapp结合萤石视频ezuikit.js的爬坑记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 08-OS X系统中将control和c
下一篇： C#语言实例源码系列-实现Linq操作X