搭建自主可控基于H5的网页直播系统

直播，目前炙手可热的技术之一，不少服务商都推出了基于各自系统的免费直播服务，但对于不少单位或企业来说，它们的流量较低，而且分散于不同的平台，且线上营销活动大部分依然基于自建网站，这种情况下使用其他平台的直播，大大降低了灵活性，浪费了潜在的观看流量。

如果自建直播平台，则可以在网站上供访客查看，巨大的可控性可以让任何合理的想象成为可能，如可以在用户提供联系信息之后开始播放。

网络视频直播系统简介

网络视频直播系统包含基本的四个部分，第一为视频采集端，它通过硬件或者软件的方式此采集需要推送的视频和音频信息，然后传送给推送端；第二个为推送端，它把接收到的视频和音频信号进行编码和适当的压缩，然后上传到直播服务器，推送端可以和采集端位于一个物理设备上，也可以使用另外的设备；第三个为直播服务器，直播服务器在接收到推送段的信息之后，可能有两种处理方式，提供RTMP服务的服务器直接把接收到的信号传入输出端口，而提供HLS服务的服务器会在接收到信号之后，把一段时间(可控)的视频打包成视频文件，供客户端下载；第四个为观看端，使用专用的RTMP播放器或网页就能观看。

OBS直播推流系统

搭建一个网页直播系统

使用nginx-rtmp搭建直播服务器

Nginx-rtmp是nginx的一个直播服务插件，使用它可以同时搭建RTMP和HLS直播系统，适合小型的直播服务。nginx-rtmp需要和nignx一起编译安装，

1.1 下载最新稳定版nignx源代码和nginx-rtmp源代码，并解压。

1.2 安装libzip-devel libopenssl-devel libpcre-devel等nginx依赖包和gcc gcc-c++ cmake编译工具.

1.3 编译nginx，进入nginx代码目录，运行./configure –prefix=/opt/nginx/ –user=nginx –group=nginx –add-module=nginx-rtmp解压目录，如果需要安装其他nignx功能，则按需要加入相关命令。

1.4 使用 make && make install命令进行最后的编译和安装。

1.5 编译成功之后，/opt/目录下会出现nginx目录，然后分别给nginx配置rtmp服务和hls服务即可。

配置RTMP服务

编辑/opt/nginx/conf/nginx.conf文件，输入以下内容以配置RTMP流媒体服务

rtmp {
server {
        listen 1935;
        #RTMP LIVE
        application live {
           live on;
           hls on;
           hls_path /wwwroot/live/hls;
           hls_fragment 5s;
          record off;
        }
    }
}

同时在nginx的http字段，创建一个server字段，用来提供网页播放服务

server {
    server_name default_server;
    root /wwwroot/live;
    location /stat {
        rtmp_stat all;
        rtmp_stat_stylesheet stat.xsl;
    }
    location /stat.xsl {
        root /wwwroot/live;
    }
}

stat.xsl文件来源于nginx-rtmp模块的根目录，可用于帮助展示服务器上当前流媒体服务状态。

开始推流

打开OBS软件，创建一个服务，服务提供则选择自定义，服务地址为“rtmp://服务器IP/live”，steram key输入任意一个字符串，这个字符串为m3u8的主文件名。然后创建一个场景，并选择来源，调试无误后，点击推流按钮，在下面的示例里，我使用mac的前置摄像头左右视频来源。

OBS工作截图

网页播放

开始推流后，如果一切无误，流媒体服务器会在接受推流之后，创建视频片段文件和m3u8文件以供客户端拉取。在支持m3u8的浏览器上直接用video标签引入地址即可实现播放：

&lt;video class="player" width="960" height="400"&gt;
    &lt;source src="/hls/test.m3u8" type="application/x-mpegURL"&gt;
&lt;/video&gt;

打开浏览器，输入nginx提供的HLS服务对饮的网页地址即可