vue-cli3+flvJs 实现直播流

      rtmp格式的视频直播要依赖flash播放器，要在浏览器设置flash允许，对用户很不友好，而且谷歌浏览器在2020年就不再支持flash了，考虑到以上因素，项目要求对原来的rtmp视频直播进行二次开发。

为什么使用flv？

几种视频格式对比

协议                       httpflv                  rtmp                   hls             

传输方式                http流                  tcp流                  http          

视频封装格式         flv                        flv tag                 Ts文件     

延时                        低(1s)                  低(1s)                  高(20s)          

数据分段                 连续流                连续流                  切片文件  

Html5播放              flv.js播放            不支持                   (hls.js)       

内存                         301M                  430M                    205M

cpu                          4.4%                   11%                         3%

• RTMP: Real Time Messaging Protocol，底层基于TCP，在浏览器端依赖Flash，Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。
• HTTP-FLV: 基于HTTP流式IO传输FLV，依赖浏览器(video)支持播放FLV，可以更好的穿透防火墙等。
• HLS: Http Live Streaming，苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放(Video)。

flv简介

        flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据，使浏览器在不借助Flash的情况下播放FLV成为可能。

原理：flv.js只做了一件事，在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据，再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm/ogg 格式，不支持 FLV)

优势：由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清。同时支持录播和直播。去掉对Flash的依赖。

flv实战

引入flv.js：

flv地址链接: https://pan.baidu.com/s/17VorGFK_uNXvMCtfIlL6Ww 提取码: w84v

<script type='text/javascript' src="./static/flv.min.js"></script>

组件demo代码

<template>
    <div class="video-flv">
        <div class="video-box">
            <video id="videoElement" class="videoElement" controls autoplay  ref="videoElement">
                Your browser is too old which doesn't support HTML5 video.
            </video>
        </div>
        <div class="video-control"></div>
    </div>
</template>
<script>
// import './flv.min.js'
// import flvPlayer from 'flv.js'
export default {
    name:'videoFlv',
    props:{
        videoShow:{
            type:Boolean,
            default:true,
        },
        videoSrc:{
            type:String,
            default:'http://www.lb50.cn/LIveUrl/TYUrl.Asp?1412.flv',
            // default:''
        },
    },
    data(){ 
       return{
            playerElement:null,
            flvPlayer:null,
            // | enableStashBuffer | 是否开启播放器端缓存 |
            // | stashInitialSize  | 播放器端缓存        | 
            // | isLive            | 是否为直播流        |
            // | hasAudio          | 是否播放声音        |
            // | hasVideo          | 是否播放画面        |
        }
    },
    destroyed(){
        this.flvDestroy();
    },
    mounted(){
        this.$nextTick(()=>{
            if(this.videoShow&&this.videoSrc){
                this.videoInit();
            }
        })
    },
    methods:{
        videoInit(){
            // debugger
            this.playerElement = this.$refs.videoElement;
            if (flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    "isLive": true,     
                     url: this.videoSrc,//<==自行修改
                });
                // videoElement：h5 video 元素
                  this.flvPlayer.attachMediaElement(this.playerElement); 
                  this.flvPlayer.load(); //加载
                 this.flvPlay();
              }
        }, 
       flvPlay(){
            this.flvPlayer.play();
        },
        flvDestroy(){
            this.flvPlayer.pause();
            this.flvPlayer.unload();
            this.flvPlayer.detachMediaElement();
            this.flvPlayer.destroy();
            this.flvPlayer = null;
            this.playerElement = null;
        }
    },
    watch:{
        videoSrc(){
            console.log(this.videoSrc,'videoSrc');
            if(this.videoShow){
                this.$nextTick(()=>{
                    this.videoInit(); 
               }) 
           }
         },
    }
}
</script>
<style lang="less" scoped>
.video-flv{
    .video-box{
        width: 100%;
        height: 100%;
        .videoElement{
            width: 100%; 
           height: 100%;
        }
    }
}
</style>

父组件使用：

<videoFlv  :videoSrc='videoSrc2'></videoFlv>import videoFlv from './videoFlv.vue'
components:{    videoFlv,},
data(){
    return {
       videoSrc2:'https://d1--cn-gotcha03.bilivideo.com/live-bvc/881547/live_17561885_332_c521e483_4000.flv?cdn=cn-gotcha03&expires=1589187453&len=0&oi=2071683237&pt=web&qn=400&trid=fea3ebd2af1245db8cfe1cfa79dcf1e1&sigparams=cdn,expires,len,oi,pt,qn,trid&sign=7391db44c218f9d1c3e58e86fed5b1a2&ptype=0&platform=web&pSession=hR73bApm-a9Q7-4m5N-DbS4-HyjBTtFKQmdy'
    }
}

效果展示：

flv视频源问题：flv视频直播源太难找了，找了好多都是不能用的，后来灵机一动在bilibili上面看了一下netweor，找到了他的直播流原始地址，试着播放了一下没问题。

--------------------------------------------------------------------------------------------

git地址：https://github.com/aicai0/test_components.git

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏

及时获取更多姿势，请您关注！！！