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

flv实时监控视频

article 2025/2/26 2:31:46

文章目录

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

前言

开发大屏项目时，可能需要在大屏上展示一个监控画面，此时就可以用的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();
		}
	},