关于前端播放FLV格式的视频流随记

首先引入flvjs

import flvjs from 'flv.js';

声明播放器变量

data() {
        return {
            flvPlayer: ,
        }
    },

核心配置：

this.flvPlayer = flvjs.createPlayer({
    type: 'flv',
    isLive: true,
    cors: true,
    hasAudio: false,
    hasVideo: true,
    url: labelVideoUrl,  // 后端拿到的视频路径

    // enableWorker: true, //启用 Web Worker 进程来加速视频的解码和处理过程
    // enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
    // stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
    // stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
    // seekType: 'range', // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
    // lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
    // lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
    // deferLoadAfterSourceOpen: false // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false
    });
    
    this.flvPlayer.attachMediaElement(this.$refs.video); // 你的video容器
    this.flvPlayer.load();
    this.flvPlayer.play();

组件销毁时停止拉流

// 这里懒得改了，我项目的源码，重点就是对应的几个API:pause()、unload()等
 beforeDestroy() {
        this.tableData.forEach(item => {
            this.cameraArr.forEach(camera => {
                if (camera.id == item.cameraId) {
                    try {
                        // this.flvPlayer[camera.id].pause();
                        this.flvPlayer[camera.id].unload();
                        this.flvPlayer[camera.id].detachMediaElement();
                        this.flvPlayer[camera.id].destroy();

                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        })
    }