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

flv实时监控视频

文章目录

  • 前言
  • 一、安装
  • 二、引入
  • 三、使用


前言

开发大屏项目时,可能需要在大屏上展示一个监控画面,此时就可以用的flv.js来展示视频效果


一、安装

   npm install flv.js

二、引入

import flvjs from 'flv.js';

三、使用

<video ref="videoElement" controls autoplay muted></video>

     if (flvjs.isSupported()) {
			const videoElement = that.$refs.videoElement;
			that.player = flvjs.createPlayer({
								type: 'flv',
								url: that.videoInfo.videoUrl,
								isLive: true, // 如果是直播流,设置为true
								hasAudio: true, // 是否有音频
								hasVideo: true,
								enableWorker: true, // 是否启用Web Worker
								enableStashBuffer: false, // 是否启用播放缓存
								stashInitialSize: 128 // 初始缓存大小
						});
			that.player.attachMediaElement(videoElement);
			that.player.load();
			that.player.play();
	} else {
			console.log('FLV.js is not supported.');
	}

	that.player.on('error', error => {
				console.error('播放器错误:', error);
				// 重连逻辑或其他处理
	});

	beforeDestroy() {
		if (this.player) {
			this.player.destroy();
		}
	},

相关文章:

  • Linux网络 | 多路转接selec
  • 基于web的留守儿童网站的设计与实现
  • 【C/C++】C++ Vector容器核心操作指南:增删改查全面解析
  • Kubernetes:容器编排的革命与未来
  • 领域模型:驱动软件进化的战略核心与实践指南
  • 如何让内网下其他主机直接通过 ip 访问docker overlay 网段下对应容器?
  • 【C++内存管理】—— 策略、陷阱及应对之道
  • 栈 队列
  • 百问网(100ask)提供的烧写工具的原理和详解;将自己编译生成的u-boot镜像文件烧写到eMMC中
  • vue2.x与vue3.x生命周期的比较
  • deepseek + embeding模型搭建本地知识库
  • 算法面试题
  • 设置libvirtd支持远程TCP连接
  • 【动手学强化学习】03马尔可夫决策过程
  • 【指令集】Nginx
  • day12摄影平台活动
  • 浏览器标签页通信实现打开新窗口播放音乐
  • BDF(MD)
  • DeepSeek学术秘籍:如何让DeepSeek辅助论证?
  • 2月第九讲“探秘Transformer系列”
  • 马上评|从一个细节看今年五一档电影
  • 特朗普:对所有在国外制作进入美国的电影征收100%关税
  • 莫斯科一机场实施临时限制措施
  • 我国首个少数民族非遗纺织类国标正式实施
  • 五大白酒去年净利超1500亿元:贵州茅台862亿领跑,洋河营收净利齐降
  • 海港负国安主场两连败,五强争冠卫冕冠军开始掉队