原生html web播放rtsp（低延迟、无需安装浏览器插件）

本文采用的方案为将rtsp流转为flv流，并通过flv.js播放，转换工具打成了docker镜像，所以可以很方便地跑起来。

项目地址: https://github.com/codingmiao/rtsp2flv

快速开始

1、启动docker容器

docker run -tid --name rtsp2flv -v /home/logs/:/mydata/logs/ --publish "0.0.0.0:8080:8080" --publish "0.0.0.0:8000:8000" wowtools/rtsp2flv

注:

8080为管理端口，调用8080端口上的restful接口进行rtsp流的添加/删除/查看。

8000为flv对外暴露的端口，web前端访问此端口以获得并展示flv(可能需要用nginx转发一下以解决跨域)。

容器内/mydata/logs/目录存放了rtsp视频流的日志，有需要的话可以把这个目录映射到宿主机上。

2、添加rtsp流转换

假如我们需要把rtsp流rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4 ,转换为flvhttp://ip:8000/rtsp2flv/1flv.flv
，则在启动容器后，我们只需向容器发送一条restful请求:

curl http://ip:8080/add?name=1&url=rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4

返回success提示则说明添加成功，随后，可在“VLC media player”等工具中验证urlhttp://ip:8000/rtsp2flv/1flv.flv 是否可以播放，或者写代码用flv.js等工具来播放(可能需要用nginx转发一下以解决跨域)。

3、移除rtsp流转换

curl http://ip:8080/remove?name=1

返回success，即把刚才添加的name为1的rtsp流转换移除。

4、查看rtsp流转换

curl http://ip:8080/get

返回已添加的rtsp流转换名称列表，以空格分隔

前端代码

前端大致如下，详细可在网上搜索flv.js的demo

js

    function playVideo(dom, url, flvPlayer) {
      if (!flvPlayer) {
        console.log('play ' + url)
        if (flvjs.isSupported()) {
          flvPlayer = flvjs.createPlayer({
            type: 'flv',
            enableWorker: true, // 浏览器端开启flv.js的worker,多进程运行flv.js
            isLive: true, // 直播模式
            hasAudio: false, // 关闭音频
            hasVideo: true,
            enableStashBuffer: false,
            autoCleanupSourceBuffer: true,
            // enableStashBuffer: true, // 播放flv时，设置是否启用播放缓存，只在直播起作用。
            url: url
          })
          flvPlayer.attachMediaElement(dom)
          flvPlayer.load()
          flvPlayer.play()
        }
        flvPlayer.setIntervalId = setInterval(() => {
          if (flvPlayer.buffered.length) {
            const end = flvPlayer.buffered.end(0)// 获取当前时间值
            const diff = end - flvPlayer.currentTime// 获取相差差值
            if (diff >= 1) { // 如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
              // console.log('延迟校正')
              flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.1// 手动跳帧
            }
          }
        }, 10000) // 10000毫秒执行一次

        return flvPlayer
      } else {
        /* eslint-disable */
        throw { message: '浏览器不支持flv' }
      }
    }

dom节点

            <div style="width: 400px;height: 200px">
              <video ref="xxx" style="width: 400px ; height: 200px" />
            </div>