uniapp在线视频监控开发

我这里是uniapp开发的H5项目

视频流是flv模式

用到的插件是flv.js

Flv.js

Flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash。。由 bilibili 网站开源。

常见直播协议

  • RTMP: 底层基于TCP,在浏览器端依赖Flash。
  • HTTP-FLV: 基于HTTP流式IO传输FLV,依赖浏览器支持播放FLV。
  • WebSocket-FLV: 基于WebSocket传输FLV,依赖浏览器支持播放FLV。WebSocket建立在HTTP之上,建立WebSocket连接前还要先建立HTTP连接。
  • HLS: Http Live Streaming,苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放。
  • RTP: 基于UDP,延迟1秒,浏览器不支持。

架构描述:

上代码:

<template><!-- 直播 --><view class="mylive flex align_center"><view class="sp_live"><view class="video-js flex" ref="video"> </view></view></view>
</template><script>export default {data() {return {videoDeviceId: '',flvPlayer: '',VideoDeviceUrl: ''}},onLoad: function(option) {this.VideoDeviceUrl = decodeURIComponent(option.liveUrl)// #ifdef H5this.$nextTick(res => {this.videoPush()})// #endif},onUnload: function() {// #ifdef H5this.flv_destroy()// #endif},methods: {videoPush: function() {var video = document.createElement('video')video.id = 'video'video.style = 'width: 100%;'video.controls = truethis.flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,url: this.VideoDeviceUrl});this.flvPlayer.attachMediaElement(video);this.flvPlayer.load();this.flvPlayer.play();this.$refs.video.$el.appendChild(video)},//注销视频flv_destroy() {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer = null;},		}}
</script>
常用方法: 
  • isSupported():boolean:判断当前浏览器是否支持播放
  • createPlayer(mediaDataSource: MediaDataSource, config?: Config):创建一个播放实例
  • play(): void: 开始播放视频。
  • pause(): void: 暂停视频播放。
  • destroy(): void: 销毁播放器实例并释放资源。
  • attachMediaElement(mediaElement: HTMLVideoElement): void: 绑定HTMLVideoElement 元素并进行播放。
  • detachMediaElement(): void: 解绑 HTMLVideoElement 元素。
  • attachMSE(mse: MediaSource): void: 绑定 MediaSource 对象。
  • detachMSE(): void: 解绑 MediaSource 对象。
  • load(optional: {reset: boolean}): void: 加载当前流并准备播放,但不自动开始播放。
  • unload(): void: 卸载当前流。
  • toggle(): void: 切换播放状态。
  • isPlaying(): boolean: 返回播放器是否正在播放。
  • getDuration(): number: 返回流总播放时间。
  • getCurrentTime(): number: 返回当前播放时间。
  • setCurrentTime(time: number): void: 跳转到指定时间点进行播放。
  • getVolume(): number: 返回当前音量。
  • setVolume(volume: number): void: 设置音量。
  • mute(): void: 静音。
  • unmute(): void: 取消静音。
  • getPlaybackRate(): number: 返回播放速率。
  • setPlaybackRate(rate: number): void: 设置播放速率。

但是在我项目中遇到一个问题就是,使用这个插件的全屏的时候(这个全屏功能好像在电脑上是页面全屏,视频没有全屏),ios设备不支持全屏,并且安卓设备全屏的时候也有问题,所有我就自己设置了一个点击事件,将页面顺时针旋转90°来模拟全屏。

下面是旋转的点击事件代码:

<button v-if="showBtn" id="rotate-btn" class="rotateBtn" @click="rotates">旋转<u-icon style="margin-left: 2rpx;" name="reload"></u-icon> 
</button>rotates(){const rotateElement = document.getElementById('container');const rotateBtnElement = document.getElementById('rotate-btn');if (rotateElement.classList.contains('initial')) {rotateElement.classList.remove('initial');rotateElement.classList.add('rotated');} else {rotateElement.classList.remove('rotated');rotateElement.classList.add('initial');}
},

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

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

相关文章

安泰ATA-7015高压放大器在机器人测试中的应用研究

随着机器人技术的快速发展&#xff0c;机器人在各个领域的应用日益广泛。然而&#xff0c;要确保机器人能够稳定、准确地完成各种任务&#xff0c;就需要对其进行严格的测试和评估。在机器人测试过程中&#xff0c;高压放大器作为一种关键的测试设备&#xff0c;发挥着不可替代…

基于YOLOv8的无人机高空红外(HIT-UAV)检测算法,魔改SimAM注意力助力涨点(一)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文内容&#xff1a;针对基于YOLOv8的无人机高空红外&#xff08;HIT-UAV&#xff09;检测算法进行性能提升&#xff0c;加入各个创新点做验证性试验。 1&#xff09;魔改SimAM注意力&#xff0c;引入切片操作&#xff1a;mAP从原始的…

python-随机序列(赛氪OJ)

[题目描述] 小理的作业太多了&#xff0c;怎么也做不完。 小理的数学作业由 T 张试卷组成&#xff0c;每张试卷上有 n 个数 a1..n​ &#xff0c;小理需要算出这些数的极差和方差。极差是一个整数&#xff0c;方差是一个浮点数&#xff0c;要求保留到小数点后 3 位。虽然题目很…

第100+22步 ChatGPT学习:概率校准 Platt Scaling

基于Python 3.9版本演示 一、写在前面 最近看了一篇在Lancet子刊《eClinicalMedicine》上发表的机器学习分类的文章&#xff1a;《Development of a novel dementia risk prediction model in the general population: A large, longitudinal, population-based machine-learn…

Unet改进3:在不同位置添加NAMAttention注意力机制

本文内容:在不同位置添加NAMAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 识别不太显著的特征是模型压缩的关键。然而,它在革命性的注意机制中尚未得到研究。在这项工作中,我们提出了一种新的基于归一化的注意力模块(NAM),它抑制…

2024/8/25 Nacos本机配置

目录 一、nacos下载 二、修改配置文件 2.1、配置数据库 2.2、配置鉴定密钥 2.3、配置启动脚本 三、nacos启动 3.1、启动运行脚本 3.2、新增配置 3.3、服务列表 记录一下本机nacos2.2.3配置全过程 一、nacos下载 下载地址&#xff1a;https://github.com/alibaba/nacos/r…

【通俗易懂】分库分表时分表字段应该如何选择?

目录 一、按买家ID分还是卖家ID分&#xff1f; 二、卖家查询怎么办&#xff1f; 三、订单查询怎么办&#xff1f; 在分库分表的过程中&#xff0c;我们需要有一个字段用来进行分表&#xff0c;比如按照用户分表、按照时间分表、按照地区分表。这里面的用户、时间、地区就是所…

MYSQL————数据库的约束

1.约束类型 1.not null&#xff1a;指示某列不能存储null值 2.unique&#xff1a;保证某列的每行必须有唯一值 3.default&#xff1a;规定没有给列赋值时的默认值 4.primary key&#xff1a;not null和unique的结合。确保某列&#xff08;或两个或多个列的结合&#xff09;有唯…

游戏开发设计模式之命令模式

目录 命令模式的定义和工作原理 应用场景 实现方式 优点 缺点 结论 命令模式在游戏开发中的具体实现案例是什么&#xff1f; 如何在Unity3D中有效地实现和管理命令模式以提高游戏性能&#xff1f; 命令模式与其他设计模式&#xff08;如观察者模式、状态模式&#xff…

2024前端面试题-js篇

1.js有哪些数据类型 基础数据类型&#xff1a;string,number,boolean&#xff0c;null&#xff0c;undefined&#xff0c;bigInt&#xff0c;symbol 引用数据类型&#xff1a;Object 2.js检测数据类型的方式 typeof&#xff1a;其中数组、对象、null都会被判断为object&…

多动症的孩子有哪些症状表现?

在星启帆自闭症儿童康复机构&#xff0c;我们不仅关注自闭症儿童的成长与康复&#xff0c;也深刻认识到多动症对儿童日常生活、学习和社交的深远影响。多动症&#xff0c;全称注意缺陷多动障碍&#xff0c;是一种常见于儿童时期的神经发育性疾病&#xff0c;其症状表现多种多样…

Python酷库之旅-第三方库Pandas(097)

目录 一、用法精讲 416、pandas.DataFrame.memory_usage方法 416-1、语法 416-2、参数 416-3、功能 416-4、返回值 416-5、说明 416-6、用法 416-6-1、数据准备 416-6-2、代码示例 416-6-3、结果输出 417、pandas.DataFrame.empty属性 417-1、语法 417-2、参数 …

FTP协议-匿名用户登录 从0到1

前言 日常大家可能接触web漏洞比较多而对其他端口及协议不那么了解&#xff0c;其实其他协议漏洞在渗透中也同样重要只是平时可能接触得不多。本文将介绍FTP协议、FTP匿名用户登录及其具体流程分析和自动化利用demo。 FTP简介 FTP是File Transfer Protocol&#xff08;文件传…

google浏览器chrome用户数据(拓展程序,书签等)丢失问题

一、问题背景 我出现这个情况的问题背景是&#xff1a;因为C盘块满了想清理一部分空间&#xff08;具体看这&#xff1a;windows -- C盘清理_c盘softwaredistribution-CSDN博客&#xff09;&#xff0c;于是找到了更改AppDatta这个方法&#xff0c;但因为&#xff0c;当时做迁移…

opencv-python图像增强十五:高级滤镜实现

文章目录 前言二、鲜食滤镜三、巧克力滤镜三&#xff0c;冷艳滤镜&#xff1a; 前言 在之前两个滤镜文章中介绍了六种简单的滤镜实现&#xff0c;它们大多都是由一个单独函数实现的接下来介绍五种结合了之前图像增强文章提的的算法的复合滤镜。本案例中的算法来自于文章一&…

qt-PLC可视化编辑器

qt-PLC可视化编辑器 一、演示效果二、核心代码三、下载链接 一、演示效果 二、核心代码 #include "diagramitem.h" #include "arrow.h"#include <QDebug> #include <QGraphicsScene> #include <QGraphicsSceneContextMenuEvent> #includ…

[000-01-018].第3节:Linux环境下ElasticSearch环境搭建

我的后端学习笔记大纲 我的ElasticSearch学习大纲 1.Linux系统搭建ES环境&#xff1a; 1.1.单机版&#xff1a; a.安装ES-7.8版本 1.下载ES: 2.上传与解压&#xff1a;将下载的tar包上传到服务器software目录下&#xff0c;然后解压缩&#xff1a;tar -zxvf elasticsearch-7…

人工智能算法工程师(中级)课程21-深度学习中各种优化器算法的应用与实践、代码详解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程21-深度学习中各种优化器算法的应用与实践、代码详解。本文将介绍PyTorch框架下的几种优化器&#xff0c;展示如何使用PyTorch中的优化器&#xff0c;我们将使用MNIST数据集和一个简单…

增材制造(3D打印):为何备受制造业瞩目?

在科技浪潮的推动下&#xff0c;增材制造——即3D打印技术&#xff0c;正逐步成为制造业领域的璀璨新星&#xff0c;吸引了航空航天、汽车、家电、电子等众多行业的目光。那么&#xff0c;是什么让3D打印技术如此引人注目并广泛应用于制造领域&#xff1f;其背后的核心优势又是…

Unity-可分组折叠的Editor

Unity-可分组折叠的Editor &#x1f957;功能介绍&#x1f36d;用法 &#x1f957;功能介绍 在序列化的字段上标记特性:[FoldoutGroup(“xxx”)]&#xff0c;inspector上就会被分组折叠显示。 &#xff08;没有被指定的字段自动放到Default组中&#xff09; 传送门&#x1f30…