Use flv.js to realize flv format surveillance video stream playback

Recently I was docking with Hisense’s surveillance camera. The surveillance video stream format returned by the other party was flv format. I used flv.js to realize surveillance playback.

One: flv.js

github address: https://github.com/Bilibili/flv.js

flv.js download address:

Link: https://pan.baidu.com/s/15yZ1IMKf1JQPtg4YRIic9w
Extraction code: w4f3

Two: common methods of flv.js

1: flvjs.isSupported(): Determine whether the current browser supports playback

2: flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config): Create a player instance

3: flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement): register the playback instance to the video node

4: flvPlayer.load(): load the video

5: flvPlayer.play(): play video

6: flvPlayer.pause(): video pause

7: flvPlayer.unload(): remove video loading

8: flvPlayer.detachMediaElement(): remove the playback instance from the node

9: flvPlayer.destroy(): destroy the player instance

Three: flv.js is simple to use

1：html

<video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
    <source src="">
</video>

2：js

(1): Introduce flv.js

 <script src="./flv.js/flv.min.js"></script>

(2): Use flv.js to play flv format streams

// 获取video节点
videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
    flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        url: 'XXXX',//flv格式流地址
    },{
        enableWorker: false, //不启用分离线程
        enableStashBuffer: false, //关闭IO隐藏缓冲区
        reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
        autoCleanupSourceBuffer: true //自动清除缓存
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load(); //加载
    flvPlayer.play();//播放
}

(3): Close the video stream

flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;