当前位置：首页 > news >正文

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

news 来源：原创 2025/5/6 17:13:43

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、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通过xgplayer(西瓜播放器)接入视频实时监控

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~ 💟 作者：码喽的自我修养&#x1f9…...

编程日记 2025/5/6 17:13:43

STM32F103的ADC通道映射

ADC通道映射 STM32F103带3个ADC控制器，一共支持23个通道，包括21个外部和2个内部信号源。ADC1控制器最多有18个通道，包括16个外部和2个内部信号源。 ADC1和ADC2的16个外部通道相同，且ADC1和ADC2共用一个系统中断向量，A…...

编程日记 2025/5/6 14:47:04

深入了解OpenStack中的隧道网络

在OpenStack环境中，隧道网络是一项关键技术，它确保了虚拟机之间以及虚拟机与外部网络之间的安全通信。通过隧道机制，我们可以有效地隔离不同租户的流量，并支持多租户环境下的复杂网络需求。之前我们介绍了隧道网络，下面…...

编程日记 2025/5/5 10:42:50

【Rust】函数

目录思维导图 1. 函数的基本概念 1.1 函数的定义 2. 参数的使用 2.1 单个参数的示例 2.2 多个参数的示例 3. 语句与表达式 3.1 语句与表达式的区别 3.2 示例 4. 带返回值的函数 4.1 返回值的示例 4.2 返回值与表达式 5. 错误处理 5.1 错误示例思维导图 1. 函数…...

编程日记 2025/5/3 1:17:43

数据结构与算法之链表: LeetCode 19. 删除链表的倒数第 N 个结点 (Ts版)

删除链表的倒数第 N 个结点 https://leetcode.cn/problems/remove-nth-node-from-end-of-list/ 描述给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。示例 1 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5]示…...

编程日记 2025/4/30 19:20:34

每天五分钟深度学习：神经网络中的激活函数

本文重点激活函数在神经网络中是必不可以缺少的东西，当我们创建一个神经网络的时候，我们需要决定使用哪种激活函数用在隐藏层上，哪种激活函数用在输出结点上，我们以前的课程中我们使用的都是sigmoid激活函数，除此之外还有其它激活函数。本文我们就介绍一下那些经常使用的…...

编程日记 2025/4/30 21:57:45

腾讯云服务器Centos7.6新开或者迁移中java全部依赖环境准备(jdk+nginx+mysql+redis+nacos+kafka等)

1 安装java环境 https://blog.csdn.net/CleverCode/article/details/109160568 2 安装nginx ssl只用配置nacos和网关就可以了。 https://blog.csdn.net/CleverCode/article/details/145078807 3 安装mysql https://blog.csdn.net/CleverCode/article/details/128354479 4…...

编程日记 2025/5/2 16:56:13

半导体数据分析：玩转WM-811K Wafermap 数据集（三） AI 机器学习

前面我们已经通过两篇文章，一起熟悉了WM-811K Wafermap 数据集，并对其中的一些数据进行了调用，生成了一些统计信息和图片。今天我们接着继续往前走。半导体数据分析： 玩转WM-811K Wafermap 数据集（二） AI…...

编程日记 2025/5/3 4:16:09

逐笔成交逐笔委托Level2高频数据下载和分析：20250102

level2逐笔成交逐笔委托下载链接: https://pan.baidu.com/s/1p7OOj5p-QGFrWkt6KKoYng?pwd7f4g 提取码: 7f4g Level2逐笔成交逐笔委托数据分享下载通过Level2逐笔成交和逐笔委托这种每一笔的毫秒级别的数据可以分析出很多有用的点，包括主力意图，虚假动…...

编程日记 2025/4/28 7:27:21

python3GUI--大屏可视化-XX产业大数据指挥舱（附下载地址） By:PyQt5

文章目录一．前言二．预览三．软件开发心得1.使用方法2.UI设计3.代码架构4.项目结构四．代码片段分享1.图片平滑缩放组件2.滚动日志组件五．心得体会大小：35.0 M，软件安装包放在了这里! 本软件未…...

编程日记 2025/5/5 18:03:59

PHP 循环控制结构深度剖析：从基础到实战应用

PHP 循环控制结构深度剖析：从基础到实战应用 PHP提供了多种控制结构，其中循环控制结构是最常见的结构之一。它们使得我们能够高效地重复执行一段代码，直到满足某个条件为止。本文将从PHP循环的基础知识出发，逐步分析其在实际项目…...

编程日记 2025/5/6 16:50:04

【数据库】二、关系数据库

文章目录二、关系数据库1 关系2 关系数据库3 完整性约束4 关系运算二、关系数据库 1 关系域：一组具有相同数据类型的值的集合。笛卡尔积：所有域（域可相同）中所有取值的组合例如：D1{1,2,3}，D2{A,b}&…...

编程日记 2025/5/3 17:42:41

【cuda学习日记】2.2 使用2维网络（grid）和2维块（block）对矩阵进行求和

在2.0中进行了用一维网格和块对一维向量进行了求和。在2.1中例化了二维的网格和块。接下来进行2维网络（grid）和2维块（block）对矩阵进行求和。 #include <stdio.h> #include <stdlib.h> #include <time.h> #i…...

编程日记 2025/5/6 17:06:57

【13】制作镜像以及重启实例

制作镜像 k8s集群有两个镜像需要制作，一个是master节点，一个是node节点。在master节点上成功部署了k8s的控制平面，在node节点上部署了worker节点的配置，不知道打包镜像重启之后集群的状态是什么样的。确认集群在运行&#…...

编程日记 2025/4/27 10:22:42

省级-农业科技创新（农业科技专利）数据（2010-2022年）-社科数据

省级-农业科技创新（农业科技专利）数据（2010-2022年）-社科数据https://download.csdn.net/download/paofuluolijiang/90028570 https://download.csdn.net/download/paofuluolijiang/90028570 数据年份、省份、农业科技专利数量…...

编程日记 2025/5/6 15:38:08

Vue2+OpenLayers接入天地图API实现搜索定位和点击获取经纬度及地址功能（提供Gitee源码）

目录一、案例截图二、安装OpenLayers库三、安装Element-UI 四、完整代码五、天地图地名搜索API文档六、Gitee源码一、案例截图输入框搜索需要查询的大概地址，可以获取到经纬度和地址信息。二、安装OpenLayers库 npm install ol 三、安装Element-UI…...

编程日记 2025/5/5 12:43:20

CrossFormer实战：使用CrossFormer实现图像分类任务（一）

摘要 CrossFormer是一种新型的视觉Transformer架构，旨在通过引入跨尺度注意力机制来提升计算机视觉任务的性能。该模型特别关注不同尺度特征之间的交互，解决了现有视觉Transformer在处理多尺度特征时的不足。研究背景在计算机视觉中，特征…...

编程日记 2025/5/5 22:19:47

性能测试工具Jmeter中的FTP脚本开发

FTP文件传输协议是TCP/IP协议组织中的常用协议之一，主要用在internet上双向传输文件。FTP协议具有客户端和服务器端两个部分组成部分，具有上传与下载两种功能。Jmeter也提供了FTP请求的测试支持，实现了上传和下载功能测试。对于上图的FTP请求…...

编程日记 2025/5/2 14:36:33

探索微软 M365 安全：全方位守护数字世界

在当今这个科技呈井喷式飞速发展，数字化浪潮以汹涌澎湃、锐不可当之势席卷全球的时代，企业与个人仿若置身于一片浩瀚无垠、信息奔涌的海洋之中，尽情畅享着技术革新所带来的无穷无尽便利。然而，恰如平静海面下潜藏着暗礁与汹涌暗流，网络安全问题恰似隐匿在暗处、随时可能给…...

编程日记 2025/5/3 3:41:05

Qt C++读写NFC标签NDEF网址URI

本示例使用的发卡器：https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.1d292c1biFgjSs&ftt&id615391857885 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> #include "QLibrary" …...

编程日记 2025/5/3 10:40:24

[SMARTFORMS] 自定义SMARTFORMS表单页格式

在SMARTFORMS表单开发过程中，用户打印的纸张有可能不是标准的页格式，需要我自定义页格式具体操作步骤如下所示 1.定义页格式事务码SPAD，点击"完全管理" 点击"设备类型"中的页格式的"显示"按钮点击创建按…...

编程日记 2025/5/6 0:41:32

大模型笔记：KV cache

1 为什么要使用KV cache 假设模型最终生成了四个token 对于第一个token，他的attention的计算方法为： 有了第一个token之后，生成第二个token的时候： sottmaxed表示已经逐行softmax后的结果同理，对于第三个token&…...

编程日记 2025/5/6 4:29:18

Android车机DIY开发之学习篇(三)替换Logo以正点原子为例

Android车机DIY开发之学习篇(三)替换Logo以正点原子为例启动 logo 包括 u-boot 阶段 logo 内核阶段 logo /sdk/kernel-5.10 目录下替换 logo.bmp 654270 logo_kernel.bmp 654270 编译 Linux 内核...

编程日记 2025/5/2 13:57:40

宝塔面板 php8.0 安装 fileinfo 拓展失败

系统：Albaba Cloud Linux release 3 （OpenAnolis Editon）即 Centos 平替异常提示： cc: fatal error: ** signal terminated program cc1 compilation terminated. make: *** [Makefile:211: libmagic/apprentice.lo] Error 1搜…...

编程日记 2025/5/6 7:46:11

机器学习数据预处理preprocessing

预处理方法预处理方法预处理方法BinarizerFunctionTransformerKBinsDiscretizerKernelCentererLabelBinarizerLabelEncoderMaxAbsScalerMinMaxScalerMultiLabelBinarizer sklearn.preprocessing.Binarizer 设定一个阈值（threshold），对于每个…...

编程日记 2025/5/4 15:43:10

网络安全 | 什么是Bot防护？

关注：CodingTechWork Bot防护介绍随着互联网服务的普及和发展，越来越多的网站和应用遭遇了自动化攻击（Bot攻击）。Bot防护是一种安全技术，旨在检测和阻止自动化程序（即“机器人”或“bot”）对网…...

编程日记 2025/5/4 8:12:30

Qt学习笔记第81到90讲

第81讲串口调试助手实现自动发送为这个名叫“定时发送”的QCheckBox编写槽函数。想要做出定时发送的效果，必须引入QT框架下的毫秒级定时器QTimer，查阅手册了解详情。在widget.h内添加新的私有成员变量： QTimer *timer; 在widget类的构造…...

编程日记 2025/5/1 1:36:13

如何在本地部署大模型并实现接口访问（ Llama3、Qwen、DeepSeek等）

如何在本地部署大模型并实现接口访问（ Llama3、Qwen、DeepSeek等） 如何在本地部署大模型并实现接口访问（ Llama3、Qwen、DeepSeek等）模型地址模型下载模型部署指定显卡运行app.py 运行环境requirements 调用接口代码调用结语如何…...

编程日记 2025/5/6 15:36:42

使用 Linux tracepoint、perf 和 eBPF 跟踪数据包

大家读完觉得有帮助记得关注和点赞！！！ 目录 1 破局 1.1 逃离迷宫：上帝视角 1.2 网络跟踪：渴求利器 1.3 巨人肩膀：perf/eBPF 2 Perf 2.1 安装 perf 2.2 测试环境 2.3 初体验：跟踪 ping …...

编程日记 2025/5/2 13:50:59

给DevOps加点料：融入安全性的DevSecOps

从前，安全防护只是特定团队的责任，在开发的最后阶段才会介入。当开发周期长达数月、甚至数年时，这样做没什么问题；但是现在，这种做法现在已经行不通了。采用 DevOps 可以有效推进快速频繁的开发周期（有时…...

编程日记 2025/5/4 1:34:31

MySQL视图笔记

视图的理解 ①视图是一种虚拟表 ，本身是不具有数据的，占用很少的内存空间，它是 SQL 中的一个重要概念。 ②视图建立在已有表的基础上, 视图赖以建立的这些表称为基表。 ③对视图中的数据进行增加删除和修改，对应的数据表&a…...

编程日记 2025/5/2 14:18:27

【Ubuntu与Linux操作系统：十、C/C++编程】

第10章 C/C编程 10.1 Linux编程基础 Linux编程基础涵盖了C/C语言在Linux环境中的特点和使用方法。Linux以其高性能和开源特性成为系统编程的重要平台。 1. C语言与Linux的关系 Linux内核主要是用C语言编写的，因此学习C语言是理解Linux底层机制的必要前提。C语言的…...

编程日记 2025/5/2 14:37:40

豆包MarsCode：可以在线用的智能AI编程助手

大家好，今天我想和大家分享一个我最近发现的宝藏工具——豆包MarsCode。作为一个程序员，我一直在寻找能够提高工作效率、快捷、优化代码质量的在线编程工具。豆包MarsCode IDE，这个由字节跳动推出的智能编程助手，让我眼前一亮&…...

编程日记 2025/5/1 15:37:27

RabbitMQ基础（简单易懂）

RabbitMQ高级篇请看： RabbitMQ高级篇-CSDN博客目录什么是RabbitMQ？ MQ 的核心概念 1. RabbitMQ 的核心组件 2. Exchange 的类型 3. 数据流向说明如何安装RabbitQueue？ WorkQueue（工作队列）： Fa…...

编程日记 2025/5/4 22:19:47

UE5 使用内置组件进行网格切割

UE引擎非常强大，直接内置了网格切割功能并封装为蓝图节点，这项功能在UE4中就存在，并且无需使用Chaos等模块。那么就来学习下如何使用内置组件实现网格切割。 1.配置测试用StaticMesh 对于被切割的模型，需要配置一些参数。以UE5…...

编程日记 2025/5/6 1:27:47

【面试题】技术场景 6、Java 生产环境 bug 排查

生产环境 bug 排查思路分析日志：首先通过分析日志查看是否存在错误信息，利用之前讲过的 elk 及查看日志的命令缩小查找错误范围，方便定位问题。远程 debug 适用环境：一般公司正式生产环境不允许远程 debug，多在测试环…...

编程日记 2025/5/5 3:26:16

macOS 安装tomcat9

macOS 安装tomcat9 URL：https://tomcat.apache.org/download-90.cgi 解压之后放到指定目录 /Users/lanren/install/tomcat-9 自己取个名字就行给权限： ① 先进行权限修改：终端输入sudo chmod 755 /Users/lanren/install/tomcat-9/bin/…...

编程日记 2025/5/5 13:02:36

多线程之旅：属性及其基本操作

上次分享到了，多线程中是是如何创建的，那么接下来，小编继续分享下多线程的相关知识。多线程中的一些基本属性。基本属性属性获取方法IDgetId()名称getName()状态getState()优先级getPriority()是否后台线程isDemo()是否存活isAlive()是…...

编程日记 2025/5/4 8:38:21

隧道网络：为数据传输开辟安全通道

什么是隧道网络？ 想象一下，你正在一个陌生的城市旅行，并且想要访问家里的电脑。但是，直接连接是不可能的，因为家庭网络通常受到防火墙或路由器的保护，不允许外部直接访问。这时候，隧道网络&…...

编程日记 2025/5/2 13:58:03

Python爬虫-汽车之家各车系周销量榜数据

前言本文是该专栏的第43篇，后面会持续分享python爬虫干货知识，记得关注。在本专栏之前，笔者在文章《Python爬虫-汽车之家各车系月销量榜数据》中，有详细介绍，如何爬取“各车系车型的月销量榜单数据”的方法以及完整代码教学教程。而本文，笔者同样以汽车之家平台为例，…...

编程日记 2025/5/2 14:04:54

【机器学习】时序数据与序列建模：理论与实践的全面指南

云边有个稻草人-CSDN博客目录云边有个稻草人-CSDN博客引言一、时序数据的特点与挑战 1.1 时序数据的特点 1.2 序列建模的挑战二、传统方法概览 2.1 ARIMA 模型 2.2 Prophet 三、深度学习方法 3.1 RNN 和 LSTM 3.2 Attention 和 Transformer 3.3 自监督学习四、…...

编程日记 2025/5/2 11:14:11

java.net.SocketException: Connection reset 异常原因分析和解决方法

导致此异常的原因，总结下来有三种情况： 一、服务器端偶尔出现了异常，导致连接关闭解决方法： 采用出错重试机制二、服务器端和客户端使用的连接方式不一致解决方法： 服务器端和客户端使用相同的连接方式&#xff…...

编程日记 2025/5/2 22:08:52

【华为OD-E卷 - 恢复数字序列 100分（python、java、c++、js、c）】

【华为OD-E卷 - 恢复数字序列 100分（python、java、c、js、c）】题目对于一个连续正整数组成的序列，可以将其拼接成一个字符串，再将字符串里的部分字符打乱顺序。如序列8 9 10 11 12，拼接成的字符串为89101112&…...

编程日记 2025/5/2 14:12:52

05、Redis持久化

Redis是在内存中操作的，我们服器关闭重启机器后，正常是之前在redis中操作的数据都不存在了，但是实际上我们开机后重新启动redis服务，一样可以看到之前操作的数据。这是为什么呢？ 我们在redis的安装目录下可以看到有一…...

编程日记 2025/5/2 8:24:08

Python爬虫基础——selenium模块进阶（模拟鼠标操作）

主要内容包括：模拟鼠标操作。常用的鼠标操作有单击、双击、右击、长按、拖动、移动等，模拟这些操作需要用到selenium模块中的ActionChains类。该类的基本使用方法是将实例化好的WebDriver对象作参数传到该类中，实例化成一个ActionChains对象&…...

编程日记 2025/5/5 22:55:20

C++ macro: The # operator

C macro: The # operator 1. The # operator2. Stringizing (字符串化)References 1. The # operator The # operator converts a parameter of a function-like macro into a character string literal. #define STR(x) #xAll subsequent invocations of the macro STR woul…...

编程日记 2025/5/2 3:56:39

开发背景

基础代码

monitor.vue

xgplayer.vue

完成效果图

相关文档

相关文章：