公司项目中需要在网页上播放摄像头的监控视频，后端将普通视频监控的rtsp视频流转换成flv的视频流，然后发到前端，在页面中通过flv.js进行播放。实际使用中，因为还需要通过按钮对摄像仪的转向和对焦进行实时控制，因此需要降低延迟，一方面后端需要更新转换工具，以便于实现对各类摄像头的兼容和降低延迟，另一方面前端也需要研究一下如何降低延迟，这篇文章就是记录一下这个过程。

延迟的成因

要降低延迟，首先就要先研究为什么会出现延迟，然后再从延迟的成因出发，想办法去减少延迟的出现。

一个视频流从采集、编码到解码、播放总共经历了很长的一段链路，在这个过程中主要有三方：摄像头、服务器、客户端。

  • 摄像头：负责音视频的采集、编码和推流

  • 服务器：负责音视频的收集、转码和分发

  • 客服端：负责音视频的拉流、解码和播放

  • flv.js销毁问题

    1
    2
    3
    4
    5
    6
    7
    function close() {
        this.flvPlayer.destroy()
    	this.flvPlayer.pause()
    	this.flvPlayer.unload()
    	this.flvplayer.detachMediaElement()
    	this.flvPlayer = null
    }