Windows下搭建视频直播服务

软件工具 244次浏览 本站

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

一、工作原理

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

二、实现步骤

要实现直播功能,我们大概要实现以下步骤:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注