藏文学习 | 计算机和英语

“直播技术”全干货


2021年01月30日 释妙竹

服务器端的直播是早就做出来了，但一直没法用网页播放。直到最近才终于解决了用video-js播放m3u8的难题。用OBS一个插件同时推流到youtube和自己的服务器上，把两个直播放在同一个网页上。这里具体讲一下实现过程。

注：1、Bamboo服务器装的是ubuntu。之前用的是centos，但后来发现ubuntu软件支持度更好。
2、这里用的是nginx-1.15.1，更新的版本和这里的RTMP的版本不匹配，试了下好像只能用1.15.1版的。

Step1: Install nginx with RTMP module

$ apt install gcc wget unzip software-properties-common dpkg-dev git make automake build-essential zlib1g-dev libpcre3 libpcre3-dev libssl-dev libxslt1-dev libxml2-dev libxml2-dev libgd-dev libgeoip-dev libgoogle-perftools-dev libperl-dev pkg-config autotools-dev

$ wget http://nginx.org/download/nginx-1.15.1.tar.gz

$ wget https://github.com/sergey-dryabzhinsky/nginx-rtmp-module/archive/dev.zip

$ tar -zxvf nginx-1.15.1.tar.gz

$ unzip dev.zip

$ cd nginx-1.15.1

$ ./configure --with-http_ssl_module --add-module=../nginx-rtmp-module-dev

$ make

$ sudo make install

$ sudo /usr/local/nginx/sbin/nginx      //启动nginx

Step2: Configuring nginx to use RTMP

打开 /usr/local/nginx/conf/nginx.conf 修改红笔标出的地方。这里把原文#注释掉的行全删除了。

worker_processes 1;
//这里的1是不够用的。Bamboo搬瓦工(bandwagon)的一台服务器是2G-RAM, 4核CPU的，这里改成了 worker_processes 16， 直播效果跟youtube一样流畅。
//另一台linode的服务器 1G2核, worker_processes 写成了8，直播声音流畅，但画面略有点卡顿。

events {
worker_connections 1024;      // 这里是定义多线程的，Bamboo没改。
}

http {
include mime.types;
default_type application/octet-stream;

sendfile on;
keepalive_timeout 65;

server {
listen 8088;      //自己选个端口号，记得防火墙里打开。
server_name localhost;

location / {
root html;
index index.html index.htm;
}

location /hls{
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /nginx;
add_header 'Cache-Control' 'no-cache';
// 以下四行不加的话，用GOOGLE浏览器的hls插件或google play 里的m3u8播放器也能放，但是video-js不支持。
expires -1;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}

rtmp{
server{
listen 1935;      //自己选个端口号，记得防火墙里打开。
chunk_size 4096;
application live{
live on;
record off;
}
application hls{
live on;
hls on;
hls_path /nginx/hls;      // 记得在 根目录下 建这个文件夹，直播时的m3u8文件和ts文件都在这个文件夹下。
hls_fragment 5s; #一个ts文件的时长
}
}
}

Step 3: Restart nginx with:

$ sudo /usr/local/nginx/sbin/nginx -s stop      //停止nginx
$ sudo /usr/local/nginx/sbin/nginx      //启动nginx

Step 4: 推流、拉流

推流： rtmp://localhost:1935/hls/

拉流： http://localhost:8088/hls/stream.m3u8      //stream 是你推流时自订的密钥、localhost改成你服务器IP

参考文献：
1, How to set up your own private RTMP server using nginx
2, 解决video.js使用以后m3u8无法访问的跨域问题

Step 5: 前端用video-js网页播放。

<html > <head> <link rel="stylesheet" href="video-js.min.css"> <script src="video.min.js"></script> //这里用的是7.4.1版本 <script src="videojs-http-streaming.min.js"></script> <title>M3U8播放器</title> </head> <body> <video id="player" class="video-js vjs-16-9 vjs-big-play-centered vjs-fluid" controls preload="auto" data-setup="{}" > <source src="http://bamboovideo.org:8088/hls/stream.m3u8" //这里的拉流地址改成自己的。 type="application/x-mpegURL"> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> // vjs-big-play-centered: 使大的播放按钮居中。 // vjs-fluid: 使视频占满容器。 </body> </html>

参考文献：
http://m3u8.looks.wang/

具体效果参看‘噶玛妙竹’网站的直播网页。

Step 6: OBS多平台推流插件

参考文章: https://blog.csdn.net/longgeaisisi/article/details/107250264 Bamboo装了，很好用, 同时推流到youtube和自己的服务器，也不多耗电脑的内存和CPU。

也可以这里下载：https://github.com/sorayuki/obs-multi-rtmp/releases

整个文件夹解压到OBS的安装目录下，然后再启动OBS，多路推流的界面就会显示出来了。OBS 25.0以上版本才能用。