uniApp通过xgplayer(西瓜播放器)接入视频实时监控

 🚀 个人简介:某大型国企资深软件开发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~

💟 作    者:码喽的自我修养🥰
📝 专    栏:uniApp与微信小程序 🎉

🌈 创作不易,如果能帮助到带大家,欢迎 收藏+关注  💕

​ 🌈🌈文章目录

开发背景

开发准备

基础代码

monitor.vue

xgplayer.vue

完成效果图

相关文档

开发背景

最近有个需求,需要在app中展示对应站房的实时监控画面,因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件

西瓜播放器 | 快速上手https://v2.h5player.bytedance.com/gettingStarted/

开发准备

因为是直播流就选择了flvjs, 项目安装xgplayer-flv

npm install xgplayer-flv

通过render.js去做视图层,要注意的是nvue无法使用renderjs
详细文档可以自己去uniapp官网查看用法 renderjs | uni-app官网uni-app,uniCloud,serverless,renderjs,使用方式,示例,功能详解,注意事项https://uniapp.dcloud.net.cn/tutorial/renderjs.html

​renderjs 是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。
renderjs 的主要作用有2个:
1. 大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力
2. 在视图层操作dom,运行 for web 的 js库

基础代码

monitor.vue
<!-- monitor.vue -->
<template><view class="uni-padding-wrap monitor_box list_box"><uni-row style="background-color: #fff;" class="list_video_box"><uni-col :span="8" class="list_video_item" v-for="(item,i) in videoLlist" :key="i"><xgplayer :id='`myVideo${i}`' :videoData="item"></xgplayer><text class="text">{{item.mpName}}</text></uni-col></uni-row></view>
</template>
<script>import xgplayer from './xgplayer.vue'export default {components: { xgplayer },data(){return {videoList: [], // 视频列表}}}
</script>
xgplayer.vue
<template><view class="media-box" style="width: 264px;height: 160px;" :start='startUrl' :change:start="xgplayer.startPlay" ><view :id="id" :detail="videoData" :change:detail="xgplayer.initJs"></view></view>
</template><script>// 逻辑层export default {props: ['id', 'videoData'],data(){return {startUrl:1}},methods: {onPlay(){console.log('响应视图层方法')}}}
</script><script module="xgplayer" lang="renderjs">// 视图层import FlvPlayer from 'xgplayer-flv';export default{data(){return {xgPlayer: null}},mounted(){},onunload() {this.xgPlayer.destroy()},methods:{initJs(newVal,old,ownerInstance,instance){if (typeof window.Player === 'function') {this.initPlayer(newVal)} else {// 动态引入较大类库避免影响页面展示const script = document.createElement('script')// view 层的页面运行在根目录script.src = 'static/xgplayer.js'document.head.appendChild(script)script.onload = this.initPlayer.bind(this,newVal,ownerInstance)}},initPlayer(detail,ownerInstance){const _this = this_this.xgPlayer = new FlvPlayer({id: 'myVideo' + detail.index, // 容器IDposter: 'https://xxx/xxx.png', // 封面图不支持本地资源isLive: true, // 是否直播url: detail.videourl + '?url=' + detail.SteamName, // 直播流地址autoplay: false, // 是否自动播放height: 160,width: 264,// 播放错误后的站位图errorTips: `<image src='http://xxx/xxx.png' id='videoErr${detail.index}' style='width: 50%;'><image>`,// 截图screenShot: {saveImg: true,quality: 0.92,type: 'image/png',format: '.png'},ignores: ['time', 'progress', 'replay', 'volume'], // 关闭内置控件closeInactive: true, // 播放器控制栏常驻不隐藏closeVideoClick: true, // video触发click事件后视频切换播放/暂停状态})_this.xgPlayer.once('play',()=>{console.log('播放成功')// 调用逻辑层方法ownerInstance.callMethod('onPlay')})_this.xgPlayer.on('error',(err)=>{console.log('播放出错', err)let videoErr = document.getElementById(`videoErr${detail.index}`)// 重新播放videoErr.onclick = function () {_this.xgPlayer.destroy()_this.initPlayer(detail,ownerInstance)}})_this.xgPlayer.on('screenShot',(DOMString)=>{console.log(DOMString);_this.saveScreenshot(new Date().getTime(), DOMString, 100)})},saveScreenshot(fileName, base64, quality) { // fileName:自定义文件名 ,base64:图片base64码, quality: 图片质量1-100const bitmap = new plus.nativeObj.Bitmap()// 从本地加载Bitmap图片bitmap.loadBase64Data(base64, () => {bitmap.save("_doc/" + fileName + ".jpg", {overwrite: true,quality: quality}, (i) => {// callback(i);console.log("保存图片成功:" + JSON.stringify(i))this.capture(i.target)}, (e) => {console.log("保存图片失败:" + JSON.stringify(e))})}, (e) => {console.log("加载图片失败:" + JSON.stringify(e))})},// 保存视频截图到相册capture(file) {plus.gallery.save(file, () => {console.log("图片已保存到相册")}, (e) => {if (e.code === -3310 || e.code === 8) {console.log("您已禁止访问相册,请设置开启权限")} else {console.log("图片保存失败:" + JSON.stringify(e))}})},// 逻辑层触发视图层函数startPlay(){this.xgPlayer.play()},}}
</script>
完成效果图

相关文档


​​​​​​uniapp官网组件 

https://uniapp.dcloud.net.cn/componenthttps://uniapp.dcloud.net.cn/component/
西瓜播放器配置项 西瓜播放器 | 配置https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家点点收藏+关注 ~💕  

​ 

   更多专栏订阅推荐:

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/66937.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为AI聊天工具添加一个知识系统 之26 资源存储库和资源管理器

本文要点 资源存储库 为了能完成本项目&#xff08;“为AI聊天工具增加一个知识系统”&#xff0c;其核心能力是“语言处理” &#xff0c;该能力的最大挑战 当仁不让的应该是自然语言处理&#xff09;的设计&#xff0c;我们考虑一个问题&#xff1a;在自然语言处理中&#…

基于RK3568/RK3588大车360度环视影像主动安全行车辅助系统解决方案,支持ADAS/DMS

产品设计初衷 HS-P2-2D是一款针对大车盲区开发的360度全景影像 安全行车辅助系统&#xff0c;通过车身四周安装的超广角像机&#xff0c;经算法合成全景鸟瞰图&#xff0c;通过鸟瞰图&#xff0c;司机非常清楚的看清楚车辆四周情况&#xff0c;大大降低盲区引发的交通事故。 产…

SQLite PRAGMA

SQLite的PRAGMA命令是一种特殊的命令&#xff0c;用于在SQLite环境中控制各种环境变量和状态标志。PRAGMA值可以被读取&#xff0c;也可以根据需求进行设置【0†source】。 PRAGMA命令的语法格式如下&#xff1a; 要查询当前的PRAGMA值&#xff0c;只需提供该PRAGMA的名字&am…

Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动同步

Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动同步 目录 Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动…

树的模拟实现

一.链式前向星 所谓链式前向星&#xff0c;就是用链表的方式实现树。其中的链表是用数组模拟实现的链表。 首先我们需要创建一个足够大的数组h&#xff0c;作为所有结点的哨兵位。创建两个足够大的数组e和ne&#xff0c;一个作为数据域&#xff0c;一个作为指针域。创建一个变…

【C++入门】详解(中)

目录 &#x1f495;1.函数的重载 &#x1f495;2.引用的定义 &#x1f495;3.引用的一些常见问题 &#x1f495;4.引用——权限的放大/缩小/平移 &#x1f495;5. 不存在的空引用 &#x1f495;6.引用作为函数参数的速度之快&#xff08;代码体现&#xff09; &#x1f4…

springboot整合mysql

1.首先在pom.xml中添加依赖&#xff1a; <!-- MySQL Driver --><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><!-- Druid连接池 -->…

Windows C++开发环境:VSCode + cmake + ninja + msvc (cl.exe) + msys2/bash shell

这套环境的作用/优点 VSCode&#xff1a;代替Visual Studio, 启动迅速&#xff0c;内存占用小cmake: 与linux一致的构建系统ninja msvc: 用ninja作为cmake的generator, 配合msvc生成工具完成C工程的编译和链接 msvc作为编译工具&#xff0c;而不是msys2或mingw64的gcc&#x…

《Opencv》图像的旋转

一、使用numpy库实现 np.rot90(img,-1) 后面的参数为-1时事顺时针旋转&#xff0c;为1时是逆时针旋转。 import cv2 import numpy as np img cv2.imread(./images/kele.png) """方法一""" # 顺时针90度 rot_1 np.rot90(img,-1) # 逆时针90度…

CES 2025|全面拥抱端侧AI,美格智能在CES发布系列创新成果

要点&#xff1a; ▶ 在AI机器人领域&#xff0c;以高算力AI模组助力发布“通天晓”人形机器人和2款全新微小型AI机器人 ▶ 在AI硬件领域&#xff0c;发布消费级AI智能体产品——AIMO&#xff0c;引领个人专属的大模型时代 ▶ 在5G通信领域&#xff0c;发布全新5GWiFi-7 CPE…

Python自学 - 类进阶(生成器)

<< 返回目录 1 Python自学 - 类进阶(生成器) 生成器是一种特殊的迭代器&#xff0c;它允许在迭代过程中暂停和恢复函数的执行。生成器的特点&#xff1a; 使用yield返回值&#xff0c;而不是return 函数执行到yield时会进入暂停状态并保存状态。 再次执行函数时&#…

Spring Boot 支持哪些日志框架

Spring Boot 支持多种日志框架&#xff0c;主要包括以下几种&#xff1a; SLF4J (Simple Logging Facade for Java) Logback&#xff08;默认&#xff09;Log4j 2Java Util Logging (JUL) 其中&#xff0c;Spring Boot 默认使用 SLF4J 和 Logback 作为日志框架。如果你需要使…

SpringBoot的@Scheduled和@Schedules有什么区别

Scheduled 的详细解析 参数详解 cron: 使用Cron表达式来指定复杂的调度模式。Cron表达式的格式如下&#xff1a; 秒&#xff08;0-59&#xff09;分钟&#xff08;0-59&#xff09;小时&#xff08;0-23&#xff09;日&#xff08;1-31&#xff09;月&#xff08;1-12 或 JAN-…

js基础---书写位置

js基础—书写位置 内部 直接写在html文件里面&#xff0c;用script标签包住 规范 &#xff1a;script 标签写在上面 代码演示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"…

SpringBoot操作spark处理hdfs文件

SpringBoot操作spark处理hdfs文件 1、导入依赖 <!-- spark依赖--><dependency><groupId>org.apache.spark</groupId><artifactId>spark-core_2.12</artifactId><version>3.2.2</version></dependency><depend…

Jaeger UI使用、采集应用API排除特定路径

Jaeger使用 注&#xff1a; Jaeger服务端版本为&#xff1a;jaegertracing/all-in-one-1.6.0 OpenTracing版本为&#xff1a;0.33.0&#xff0c;最后一个版本&#xff0c;停留在May 06, 2019。最好升级到OpenTelemetry。 Jaeger客户端版本为&#xff1a;jaeger-client-1.3.2。…

PySide6-UI界面设计

导论&#xff1a; PySide6和PyQt都是Python对Qt框架的绑定&#xff0c;允许开发者使用Qt创建平台的GUI应用程序。如果你正在开发商业项目&#xff0c;或者需要使用最新的QT6特性&#xff0c;PySide6是一个更好的选择。如果你更倾向于一个成熟的社区和丰富的资源&#xff0c;Py…

使用 Multer 上传图片到阿里云 OSS

文件上传到哪里更好&#xff1f; 上传到服务器本地 上传到服务器本地&#xff0c;这种方法在现今商业项目中&#xff0c;几乎已经见不到了。因为服务器带宽&#xff0c;磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上&#xff0c;并不是明智的选择。 上传到云储存…

电机控制的数字化升级:基于DSP和FPGA的仿真与实现

数字信号处理器&#xff08;DSP&#xff0c;Digital Signal Processor&#xff09;在工业自动化领域的应用日益广泛。DSP是一种专门用于将模拟信号转换成数字信号并进行处理的技术&#xff0c;能够实现信号的数字滤波、重构、调制和解调等多项功能&#xff0c;确保信号处理的精…

微服务的CAP定理与数据一致性抉择

分布式系统中的CAP定理&#xff0c;包括一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容错性&#xff08;Partition Tolerance&#xff09;三个核心要素。 微服务是分布式系统的一种表现形式&#xff0c;以及用户对于系统是分…