当前位置: 首页 > 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();
		}
	},
http://www.dtcms.com/a/18781.html

相关文章:

  • 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系列”
  • 无人机航迹规划: 梦境优化算法(Dream Optimization Algorithm,DOA)求解无人机路径规划MATLAB
  • Android设备 网络安全检测
  • CAS单点登录(第7版)27.开发人员
  • wx061基于ssm+vue+uniapp的疫情期间学生请假与销假系统小程序
  • Vue CLI 配置与插件
  • 1.【BUUCTF】[SUCTF 2019]EasyWeb
  • 【Docker】Docker Run 中指定 `bash` 和 `sh` 参数的区别:深入解析与实践指南
  • openGauss 3.0 数据库在线实训课程16:学习逻辑结构:表管理4
  • 小白零基础如何用cursor
  • 车载诊断框架 --- ECU运行周期operation cycle