萤石云监控web+uniapp

需求:在后台管理查看实时监控,用户端在小程序查看实时监控

补充:所传参数(accessToken/地址/设备号/等)都是从后端获取的

萤石云监控web端:

安装依赖:

javascript 复制代码
npm install ezuikit-flv@^1.0.3-alpha.1 ezuikit-js@^0.7.2 --save

回放录像:

https://open.ys7.com/help/4280

播放EZUIKitPlayer地址格式为:

javascript 复制代码
ezopen://open.ys7.com/${设备序列号}/${通道号}.rec

实时监控:

文档概述 · 萤石开放平台API文档

播放EzuikitFlv地址格式为:

javascript 复制代码
https://play.com/9999.flv
javascript 复制代码
<div style="margin: 10px; font-size: 18px">设备回放录像:</div>
<div style="width: 560px; height: 350px" id="video-containerow"></div>
<div style="margin: 10px; font-size: 18px">设备实时监控:</div>
<div style="width: 560px; height: 350px" id="videoFlv"></div>

<script>
import EZUIKit from "ezuikit-js";
import EzuikitFlv from "ezuikit-flv";

let playerFlv = null;
let playerUikit = null;

//离开页面的时候销毁播放器
if (playerFlv) {
    playerFlv.pause();
    playerFlv.destroy();
    playerFlv = null;
}
if (playerUikit) {
   playerUikit.stop();
   playerUikit = null;
}


//设备回放录像
 initCamerarow() {
      playerUikit = new EZUIKit.EZUIKitPlayer({
        id: "video-containerow",
        accessToken: '播放accessToken',
        url: '播放地址',
        width: 560,
        height: 350,
        template: "simple",
        autoplay: true,
      });
      playerUikit.play();
},

//设备实时监控
initCameraFlv() {
      playerFlv = new EzuikitFlv({
        container: document.getElementById("videoFlv"),
        debug: true,
        url: '播放地址',
        useMSE: true,
        decoder: "decoder.js",
      });
      playerFlv.play();
    },

萤石云监控uniapp端:

https://open.ys7.com/help/502

微信半屏播放:

无资质要求:用户微信小程序无需申请live_player组件资质即可进行视频直播

代码:

|--------------|---------|---|-------------------------------------------------|
| accessToken | string | 是 | 获取accessToken(超链接:https://open.ys7.com/help/81) |
| channelNo | integer | 是 | 通道号,若为直连IPC通道号填写1 |
| deviceSerial | string | 是 | 设备序列号 |

|------------|--------|---|-------------------------|
| envVersion | string | 否 | 要打开的小程序版本,默认release即正式版 |

javascript 复制代码
wx.openEmbeddedMiniProgram({
		appId: '你的appId',
		path: `/pages/live/live?accessToken=${accessToken}&deviceSerial=${deviceSerial}&channelNo=${channelNo}`,
		envVersion: 'release'
})
相关推荐
用户9047066835712 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
乔冠宇14 小时前
uniapp创建ts项目tsconfig.json报错的问题
uni-app
细节控菜鸡14 小时前
【2025最新】uniapp 中基于 request 封装实现多文件上传完整指南
uni-app
fakaifa14 小时前
【全开源】企业微信SCRM社群营销高级版系统+uniapp前端
uni-app·开源·企业微信·scrm·源码下载·企业微信scrm
棋子一名16 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
游戏开发爱好者817 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088918 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9151063220 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214320 小时前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式
2501_916013741 天前
iOS 推送开发完整指南,APNs 配置、证书申请、远程推送实现与上架调试经验分享
android·ios·小程序·https·uni-app·iphone·webview