以前一直以为直播技术很高深，各种推流，拉流，视频压缩算法等，不敢深入。近日工作需要，了解了下，也不是那么复杂，本文仅做视频直播技术实践探索，仅供我等小白玩玩，大神请忽略。

一、工作原理

简单来说，视频直播过程，就是一端将视频推流到流媒体服务器，一端从流媒体服务器拉流播放。

二、实现步骤

要实现直播功能，我们大概要实现以下步骤：

1.搭建流媒体服务器。

2.视频采集，推流。

3.转码。

4.网页在线播放。

（一）搭建流媒体服务器

详见此文 https://blog.csdn.net/xiaolong1126626497/article/details/106391149

（二）视频采集、推流

视频采集推流，可以使用OSB Studio软件，下载地址：Open Broadcaster Software | OBS

该软件可以将视频，电脑桌面，摄像头等视频源，作为视频流推送到流媒体服务器。

编辑

如果流媒体服务器配置正常，推流就是很简单的事了。

假设你已完成了上面两步，接下来就要考虑如何进行播放rtmp流了。这也是我遇到的稍微麻烦点的过程。

RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的开放协议。

由于Chrome浏览器目前是不支持flash的了，H5播放器目前也是不支持rtmp流播放的。如果要实现在线播放，还需要进行转码，将rtmp流转为.m3u8格式文件，再由H5播放器来进行播放。

（三）转码

转码的过程，将使用到FFmpeg软件，这也是鼎鼎有名的视频处理软件。与其说是转码，不如说是将rtmp流保存为一个.m3u8格式的文件。

这里需要了解下什么是.m3u8文件：m3u8不是视频文件，m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。

具体来说，进行以下步骤：

1.下载FFmpeg软件，下载地址：FFmpeg

2.转码，在命令行中，切换到FFmpeg程序目录，执行下面命令（部分需替换）

ffmpeg -i "rtmp地址 别忘了去掉这个双引号" -f hls -hls_time 1.0 -hls_list_size 2 -hls_flags 2  -vcodec copy -y "视频文件存放文件夹\test.m3u8"

运行然后看他一直跑着就可以了

不出意外在视频存放文件夹中应该一直有三个切片文件(.ts) 一直更新因为设置为了索引大于2覆盖。

转码可以是在服务器上，也可以是在自己客户端，如果是做直播，建议在服务器上进行转码，客户端直接使用转好的.m3u8文件就可以了。

（四）网页在线播放

完成了以上步骤，只是将.m3u8文件进行在线播放，就简单多了。

dplayer 官网 http://dplayer.js.org/zh/guide.html
其实就是要H5播放器能支持hls就可以实现播放.m3u8，这个播放器刚好支持。

<!DOCTYPE html>
<html>

<head>
  <title>dplayer播放m3u8</title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
  <script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
  <style>
    #dplayer {
      width: 500px
    }
  </style>
  <script>
    function init() {
      const dp = new DPlayer({
        element: document.getElementById('dplayer'),
        video: {
          //  pic: videoInfo.img, // 封面
          url: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  </script>
</head>

<body onload="init()">
  <div>
    <div id="dplayer"></div>
  </div>
</body>
</html>

至此，就完成了一个简单的视频直播系统。

三、参考文章

1.视频直播-流媒体服务器：https://blog.csdn.net/xiaolong1126626497/article/details/106391149
2.视频直播-转码：https://blog.csdn.net/Yinanbo/article/details/121948129
3.视频直播-在线播放器：https://wuhancoder.com/blog/OtSxCkcztU.html

Windows下搭建视频直播服务