1、HLS协议走 nginx + http_flv_module 方式：

http_flv_module 是nginx的一个模块，需要重新编译nginx；稍微省事的方法是走docker的方式

docker镜像为： mycujoo/nginx-http-flv-module:latest

启动docker命令：docker run -p 8080:80 -p 1965:1965 -p 8181:8181 -p 1935:1935 mycujoo/nginx-http-flv-module:latest

前端支持flv的html


<!DOCTYPE html>

<html>

<head>

  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

  <title>flv.js demo</title>

  <style>

    .mainContainer {

      display: block;

      width: 1024px;

      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: 576px;

      margin-left: auto;

      margin-right: auto;

      margin-bottom: auto;

    }

    .controls {

      display: block;

      width: 100%;

      text-align: center;

      margin-left: auto;

      margin-right: auto;

    }

  </style>

</head>

<body>

  <p class="mainContainer">

    <VIDEO name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024" height="576">

      Your browser is too old which doesn't support HTML5 video.

    </VIDEO>

  </p>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.3.2/flv.min.js"></script>

  <script>

    function start() {

      if (flvjs.isSupported()) {

        var videoElement = document.getElementById('videoElement');

        var flvPlayer = flvjs.createPlayer({

          type: 'flv',

          // url: 'http://172.24.0.5:8088/live?port=1935&app=hls&stream=robot7-210'

          url: 'http://localhost:8080/live?port=1935&app=hls&stream=tt'

        });

        flvPlayer.attachMediaElement(videoElement);

        flvPlayer.load();

        flvPlayer.play();

      }

    }

    document.addEventListener('DOMContentLoaded', function () {

      start();

    });

  </script>

</body>

</html>

最后使用 ffmpeg 推流
ffmpeg -re -i ~/Downloads/test.mp4 -c copy -f flv rtmp://localhost:1935/hls/tt

这种方式的延迟较高，底层是缓存一段段视频帧，再传输给前端。

2、webrtc的方式

webrtc + srs 流媒体服务器方式

<video class="" controls autoplay style="" id="video">
<script src="/static/js/jswebrtc.min.js"></script>
<script>
var video = document.getElementById('video');
var url = 'webrtc://127.0.0.1/live/livestream';
var player = new JSWebrtc.Player(url, { video: video, autoplay: true,  });
</script>

jswebrtc.min.js 从github中找

srs 流媒体也是直接走docker 获取
docker run --name srs -p 1935:1935 -p 8080:8080 -p 1985:1985 -p 8000:8000/udp --env CANDIDATE={LOCALIP} registry.cn-hangzhou.aliyuncs.com/ossrs/srs:v4.0.55 objs/srs -c conf/rtc.conf
注意：这儿CANDIDATE需要设置成本机的对外ip地址。

最后是使用 ffmpeg 进行rtmp推流。

webrtc 这种方式延迟较低，毫秒或1秒左右级别