flv.js笔记

wanxiu.

已于 2022-07-07 17:00:16 修改

阅读量1.4k

点赞数

分类专栏：常用工具文章标签：前端

于 2022-04-26 16:33:19 首次发布

本文链接：https://blog.csdn.net/lvwx369/article/details/124430904

版权

常用工具专栏收录该内容

15 篇文章 2 订阅

订阅专栏

学习网址

Flv.js文档使用随记
https://www.cnblogs.com/zhifa/p/13252838.html?msclkid=7445aaffc60f11ecadc47c89669e96a4


flv.js直播拉流场景下的技术优化
https://blog.csdn.net/epubcn/article/details/103071953


Flv.js全面解析
https://blog.csdn.net/An1090239782/article/details/108972491

源代码下载

flv-js的gitee地址
https://gitee.com/mirrors/flv-js

进入"标签"
下载最新版本:flv-js-v1.6.2.zip

发现下载的master版本和v1.6.2版本代码一样

编译

实先安装好npm命令:
https://nodejs.org/en/
下载安装node.js
安装好后，就可以用npm命令了



第1步: npm ci                 # install dependencies / dev-dependences

第2步: debug 和release版本编译
npm run build:debug    # debug 版本 文件会到/dist文件夹下
npm run build          # release 版本  文件会到/dist文件夹下

问题之断线重连

flv.js--播放直播流时出现的累积延迟、断流重连以及画面卡顿的解决方法
https://blog.csdn.net/daqinzl/article/details/122634323

问题之DecodeFrames总是没有变化

flvPlayer.on('statistics_info', function (res) 
{
     //为什么DecodeFrames总是没有变化
     curFrameCnt = res.decodedFrames;
     //console.log('统计',curFrameCnt);
});

自己使用的html

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>直播</title>
 
    <style>
        .mainContainer {
            display: block;
            width: 640px;
            margin-left: auto;
            margin-right: auto;
        }
 
        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }
 
        .centeredVideo {
            display: block;
            width: 100%;
            height: 320px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }
 
        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 10px;
        }
 
        .logcatBox {
            border-color: #CCCCCC;
            font-size: 11px;
            font-family: Menlo, Consolas, monospace;
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
 
<body>
    
    <div class="mainContainer">
        <video name="videoElement" class="centeredVideo" id="videoElement" controls width="640" height="320" autoplay>
            Your browser is too old which doesn't support HTML5 video.
        </video>
 
    </div>
 
	<script src="flv.min.js"></script>
    
    <script>
         if (flvjs.isSupported()) {
            startVideo()
        }
        
		var flvPlayer;
        function startVideo(){
            var videoElement = document.getElementById('videoElement');
            flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                url: 'http://10.121.148.200:9981/live/6001080011.live.flv',

                enableWorker: false, //不启用分离线程
                enableStashBuffer: false, //必须,关闭IO隐藏缓冲区
                reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                autoCleanupSourceBuffer: true //自动清除缓存

            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            //flvPlayer.play();//不用打开

            //flv播放时间越长延迟越长
            //必需:获取时间跟不上帧数的问题
            setInterval(() => {
                if (videoElement.buffered.length) 
                {
                    let end = videoElement.buffered.end(0); //获取当前buffered值
                    let diff = end - videoElement.currentTime; //获取buffered与currentTime的差值
                    if (diff >= 2.0) 
                    {
                        //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
                        //需要1.5秒的缓冲，不然会不断出现卡顿现象
                        //2.0=1.5 + 0.5,跳帧0.5秒，这样每秒都可以显示出来
                        videoElement.currentTime = videoElement.buffered.end(0) - 1.5; 
                    }
                }
            }, 2000); //2000毫秒执行一次
			
			flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { 
				console.log('flv error');
                //alert("flv error");
                reloadVideo();
			
			});
        }
 
        function destoryVideo(){
            flvPlayer.pause();
            flvPlayer.unload();
            flvPlayer.detachMediaElement();
            flvPlayer.destroy();
            flvPlayer = null;
        }
 
        function reloadVideo(){
            destoryVideo()
            startVideo()
        }
    </script>
    
</body>
 
</html>