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();
		}
	},

你可能感兴趣的:(js,前端)