vue中使用mpegts.js播放flv的直播视频流

第一步:引入mpegts.js

npm install --save mpegts.js

第二步:在vue文件中引入mpegts.js的依赖

在这里插入图片描述

第三步:编写展示视频的盒子

我这里是使用循环遍历的方式创建video标签,这样方便后面随机展示视频使用

<template><div><el-row><el-col :span="24"><div class="play-video-box"><input id="tag" v-model="tag" /><el-button @click="load">重新加载</el-button><el-button @click="start">开始播放</el-button><el-button @click="pause">暂停</el-button><el-button @click="destory">全部销毁</el-button></div></el-col></el-row><el-row><el-col :span="12" v-for="item in 4" :key="item"><div class="grid-content"><videoclass="video":id="getDivClassName(item)"autoplay="true"muted="false"controls="false"@click="saveMap(item)">{{ item }}</video></div></el-col></el-row></div>
</template>

第四步:编写播放视频和销毁视频的方式

<script setup lang="ts">
import mpegts from 'mpegts.js';
import { ref, onUnmounted } from 'vue';const flvPlayer: any = ref();
const tag = ref(null);
const videoMap = new Map();
/*** 创建 mpegts 实例*/
const initFlv = (ops: { URL: string; elementId: string }) => {if (tag.value != null && mpegts.isSupported()) {// 根据id名称创建对应的videoconst ele = document.getElementById(ops.elementId);flvPlayer.value = mpegts.createPlayer({type: 'flv', // 指定媒体类型isLive: true, // 开启直播(是否为实时流)hasAudio: false, // 关闭声音(如果拉过来的视频流中没有音频一定要把这里设置为fasle,否则无法播放)cors: true, // 开启跨域访问url: ops.URL // 指定流链接(这里是传递过过来的视频流的地址)},{enableWorker: false, //启用分离的线程进行转换(如果不想看到控制台频繁报错把它设置为false,官方的回答是这个属性还不稳定,所以要测试实时视频流的话设置为true控制台经常报错)enableStashBuffer: false, //关闭IO隐藏缓冲区(如果需要最小延迟,则设置为false,此项设置针对直播视频流)stashInitialSize: 128, //减少首帧等待时长(针对实时视频流)lazyLoad: false, //关闭懒加载模式(针对实时视频流)lazyLoadMaxDuration: 0.2, //懒加载的最大时长。单位:秒。建议针对直播:调整为200毫秒deferLoadAfterSourceOpen: false, //在MediaSource sourceopen事件触发后加载。在Chrome上,在后台打开的标签页可能不会触发sourceopen事件,除非切换到该标签页。liveBufferLatencyChasing: true, //追踪内部缓冲区导致的实时流延迟liveBufferLatencyMaxLatency: 1.5, //HTMLMediaElement 中可接受的最大缓冲区延迟(以秒为单位)之前使用flv.js发现延时严重,还有延时累加的问题,而mpegts.js对此做了优化,不需要我们自己设置快进追帧了liveBufferLatencyMinRemain: 0.3 //HTMLMediaElement 中可接受的最小缓冲区延迟(以秒为单位)});// mpegtsflvPlayer.value.attachMediaElement(ele);videoMap.set(ops.elementId, flvPlayer.value);play(flvPlayer.value);flvEvent();}
};const play = (flv: any) => {flv.load();flv.play();
};// mpegts
const flvEvent = () => {// 视频错误信息回调flvPlayer.value.on(mpegts.Events.ERROR, (errorType: any, errorDetail: any, errorInfo: any) => {console.log('类型:' + JSON.stringify(errorType),'报错内容' + errorDetail,'报错信息' + errorInfo);});//【重要事件监听】http 请求建立好后,该事件会一直监听 mpegts 实例flvPlayer.value.on(mpegts.Events.STATISTICS_INFO, () => {const end = flvPlayer.value.buffered.end(0); //获取当前buffered值(缓冲区末尾)const differTime = end - flvPlayer.value.currentTime; //获取bufferend与当前播放位置的差值console.log('差值为:' + differTime);});
};/*** 重新加载视频*/
const load = () => {for (let index = 1; index < 5; index++) {if (!videoMap.has('video-contianer-' + index)) {initFlv({URL: 'http://localhost:1010/video/' + tag.value,//这里改成自己要拉流的视频地址,我这里放的是自己后端推送的1078视频的flv实时视频流elementId: 'video-contianer-' + index});break;}}
};
/*** 播放*/
const start = () => flvPlayer.value.play();
/*** 暂停*/
const pause = () => flvPlayer.value.pause();
/*** 销毁*/
const destory = () => {if (videoMap.size > 0) {for (let [key, flv] of videoMap) {flv.pause;flv.unload();flv.detachMediaElement();flv.destroy();flv = null;videoMap.delete(key);console.log('销毁掉视频:' + key);}} else {console.log('没有要销毁的视频');}
};
const getDivClassName = (index: any) => {return 'video-contianer-' + index;
};const saveMap = (index: any) => {test001.value = '-' + index;videoMap.set(index, test001.value);
};onUnmounted(() => {destory();
});
</script>

第五步:设置展示样式

<style scoped lang="less">
.play-video-box {height: 45px;margin-top: 10px;margin-left: 200px;
}
.grid-content {height: 315.5px;margin-top: 5px;margin-left: 5px;
}
#tag {width: 280px;height: 30px;
}
//所有控件
video::-webkit-media-controls-enclosure {display: none;
}
.video {width: 100%;height: 100%;object-fit: cover;
}
</style>

第六步:效果图

(我的是在输入框中输入想要拉取的设备和通道号点击重新加载即可,多次点击会将四个窗格都展示同样的视频)
在这里插入图片描述

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

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

相关文章

03 顺序表

目录 线性表顺序表练习 线性表(Linear list)是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串。。。 线性表在逻辑上时线性结构&#xff0c;是连续的一条直线。但在物理结…

【RTOS】快速体验FreeRTOS所有常用API(1)工程创建

目录 一、工程创建1.1 新建工程1.2 配置RCC1.3 配置SYS1.4 配置外设1&#xff09;配置 LED PC132&#xff09;配置 串口 UART13&#xff09;配置 OLED I2C1 1.5 配置FreeRTOS1.6 工程设置1.7 生成代码1.8 keil设置下载&复位1.9 添加用户代码 本工程皆在快速体验FreeRTOS所有…

智慧公厕:打造智慧城市公共厕所信息化管理的新升级

在现代社会中&#xff0c;随着科学技术的不断进步与应用&#xff0c;智慧公厕作为公共服务设施&#xff0c;正迎来一次新的升级与革新。利用先进技术&#xff0c;智慧公厕实现了信息化升级&#xff0c;能够实时监测人员、环境和设备状况&#xff0c;提高使用效率、安全性、舒适…

微信小程序(一)简单的结构及样式演示

注释很详细&#xff0c;直接上代码 涉及内容&#xff1a; view和text标签的使用类的使用flex布局水平方向上均匀分布子元素垂直居中对齐子元素字体大小文字颜色底部边框的宽和颜色 源码&#xff1a; index.wxml <view class"navs"><text class"active…

python多线程和多进程内存共享方式

目录 一:介绍 二:多线程共享内存方式 三:多进程共享内存方式 一:介绍 在Python中,多线程和多进程都有各自的内存管理机制,并且它们的内存共享方式也不同。 对于多线

Android 11.0 mtp模式下连接pc后显示的文件夹禁止删除copy重命名功能实现

1.前言 在11.0的系统rom定制化开发中,usb连接pc端的时候有好几种模式,在做otg连接pc端的时候,改成mtp模式的时候,在pc端可以看到产品设备 的显示的文件夹的内容,对于产品设备里面的文件在pc端禁止做删除重命名拷贝等操作功能的实现 2.mtp模式下连接pc后显示的文件夹禁止删…

Linux中文件名修改的多种方法

找一个不算漂亮的普通女孩&#xff0c;一起柴米油盐&#xff0c;一起日出日落&#xff0c;一起田间地头&#xff0c;一起春花冬雪&#xff01;要一个不算大的小房子&#xff0c;生两个健康可爱的宝宝&#xff0c;这样就很好。。。。。。 简介&#xff1a; 在Linux系统中&#x…

第二百六十八回

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了跟手指移动的小球相关的内容&#xff0c;本章回中将介绍自定义组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 在项目中有些内容无法通过现有的组件来实现&#xff0c;因此需要自定义组件&#xff0…

docker 部署xxl-job-admin

导言 xxl-job是一款开源的分布式任务调度平台,支持在线管理任务和调度任务。本文将详细介绍如何基于2.2.0版本进行xxl-job的部署,包括数据库的初始化、镜像的拉取和运行、以及Nginx的配置。 部署数据库 首先,我们需要部署MySQL数据库作为xxl-job的后端存储。执行以下命令:…

MongoDB Compass当前版本及历史版本下载安装

mongoDB compass 当前版本下载 官网 https://www.mongodb.com/try/download/compass 官网下载一般只能下载最新版本。 github https://github.com/mongodb-js/compass MongoDB Compass与MongoDB的版本对应关系 MongoDB CompassMongoDB1.9.12MongoDB 2.6.11 Community

mysql表的约束问题

目录 1. 表的约束问题: 主键约束: 案例&#xff1a; 非空约束 唯一约束: 默认值约束: 案例&#xff1a; 2.表的结构 前提:接上一张博客内容经行操作 1. 表的约束问题: 用来保证数据插入的安全性、完整性、正确性 主健,外键,唯一,默认值,非空,检查 1.1…

设计模式之多线程分工模式--- Thread-Per-Message模式

系列文章目录 设计模式之避免共享的设计模式Immutability&#xff08;不变性&#xff09;模式 设计模式之并发特定场景下的设计模式 Two-phase Termination&#xff08;两阶段终止&#xff09;模式 设计模式之避免共享的设计模式Copy-on-Write模式 设计模式之避免共享的设计模…

UL2034详细介绍UL 安全单站和多站一氧化碳报警器标准

在介绍相关标准之前先介绍一下UL认证和UL测试报告的区别&#xff0c;检测认证行业6年老司机 UL认证是自愿性的认证&#xff0c;需要检测产品和审核工厂&#xff0c;每个季度审核一次&#xff0c;费用高、时间久&#xff0c;而且审厂非常的严格。 UL测试报告是根据产品选用相应…

C#学习笔记3-函数与单元测试

现在开始参考书籍变为&#xff1a;《C# 12 and .NET 8 – Modern Cross-Platform Development.Mark Price》 函数 Writing, Debugging, and Testing Functions 写函数Debug运行时 logging单元测试 写函数 一个有着 XML 注释的函数 这里直接举一个例子&#xff1a; Numbe…

使用@Slf4j后引入log,idea标红

引入Slf4j注解 idea标红Cannot resolve symbol ‘log’ 引入Lombok插件 如果在Marketplace查不到时&#xff0c;不妨关闭菜单再打开试下

Ceph集群修改主机名

修改主机名 #修改主机名 rootlk02--test:~# hostnamectl set-hostname lk02--test01 #修改hosts rootlk02--test:~# vi /etc/hosts #修改ceph.conf rootlk02--test:~# vi /etc/ceph/ceph.conf rootlk02--test:~# cat /etc/ceph/ceph.conf |grep mon mon host [v2:192.168.3.1…

android自启动

Android 开机自动启动一个Service 附源码_watchdogservice-CSDN博客 执行 adb push 本地地址 目标地址 时遇到错误&#xff1a; adb: error: failed to copy app-release.apk to /system/app/app-release.apk: remote couldnt create file: Read-only file system 解决方案…

【Java数据结构】04-图(Prim,Kruskal,Dijkstra,topo)

5 图 推荐辅助理解 【视频讲解】bilibili Dijkstra Prim 【手动可视化】Algorithm Visualizer &#xff08;https://algorithm-visualizer.org/&#xff09; 【手动可视化】Data Structure Visualizations (https://www.cs.usfca.edu/~galles/visualization/Algorithms.ht…

主流操作系统介绍

主流操作系统介绍 Windows&#xff1a;由微软&#xff08;Microsoft&#xff09;开发和维护&#xff0c;是个人电脑市场占有率最高的操作系统。目前最新的版本包括Windows 10以及更新的Windows 11。 macOS&#xff1a;苹果公司&#xff08;Apple Inc.&#xff09;为Macintosh系…