在线视频播放、直播

Nginx初窥：视频、直播

前篇文章说了Sftp下的文件上传，访问时比如图片、json文件等是可以直接显示的。可压缩包或视频文件等，访问时只能下载，如何让视频在线播放？

环境准备：

可用的服务器（CentOS 7系统）、Nginx、Nginx-Rtmp模块、Ffmpeg、Jwplayer(可以从连接另存文件，不用登录)

工具：Xshell 6、Xftp 5

1. 在线视频播放

其实要播放比较简单，主要问题是网速、负载等，这些是生产环境需要考虑的。

1.1. 安装Nginx

服务器安装Nginx，包括远程工具，参照我之前的文章即可。

1.2. 安装Nginx-Rtmp模块

在Github上下载nginx-rtmp-module-1.2.1.tar.gz
使用Xftp将下载的压缩包传到服务器的/usr/local文件夹。放哪都行，自己能找到就行。
使用tar命令解压该文件，得到nginx-rtmp-module-1.2.1文件夹，我的文件夹位置为：

shell

/usr/local/nginx-rtmp-module-1.2.1

此时，你需要找到之前Nginx解压后的文件夹，就是那个带版本号的文件夹。我的Nginx源码目录是：

shell

/usr/local/nginx-1.17.1

进入Nginx源码文件夹

shell

cd /usr/local/nginx-1.17.1

安装Nginx-Rtmp模块

此时，一定要进入nginx源码文件，不然找不到configure。还要注意找到之前rtmp模块解压后的文件夹位置，此时我nginx-1.17.1和nginx-rtmp-module-1.2.1都是放在/usr/local下的，所以用../就能找到。

shell

./configure --add-module=../nginx-rtmp-module-1.2.1 --with-http_ssl_module
make
make install

模块安装完成。

参考：官方文档

1.3. 视频播放配置

打开/usr/local/nginx/conf目录下的nginx.conf配置文件，nginx是Nginx的安装目录

shell

vi /usr/local/nginx/conf/nginx.conf

键盘按i编辑，方向键移动光标，编辑完按 ”

“ 保存退出

编辑内容：

光标移动到文件最底部大括号外（http｛｝代码块外），增加rtmp代码块：

shell

rtmp{

    server{

 listen 2019;
 chunk_size 4096;


 #应用名随意，play播放指定目录或者 HTTP 地址的 flv 或者 mp4 文件
      application video {
                play /data/video;
        }


}
}

此时虽然可以播放视频了，但http还找不到资源，所以还需要定义访问路径。

把光标移到http代码块里，按如下内容修改和增加代码，其实只加了个location，配置文件里#后内容是注释，忽略或删除。

shell

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

    sendfile        on;
    tcp_nopush     on;
    keepalive_timeout  65;


    server {
        listen       80;
        server_name  localhost;

  #之前配置的根目录
        location / {
            root   /data/www;
            index  index.html index.htm;
        }
  #之前配置的图片目录
     location /images/ {
         root /data;
         }

  #新增的video目录，即浏览器访问http://ip地址/video时，会进入服务器的/data/video目录
        location /video/ {
            root /data;
        }


        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }


    }




}

保存并退出，然后重启Nginx服务。

shell

systemctl restart nginx.service

1.4. 测试视频播放

在服务器的/data/video目录下放入一个mll.mp4视频文件，目录/data/video要建个，根据你的配置的目录来。
浏览器访问http://ip地址/video/mll.mp4
如：http://108.160.134.51/video/mll.mp4

播放成功即可，我服务器速度贼慢，后面换个服务器试试效果。

这时，就可以把视频嵌入到html中播放了，比如：

html

<iframe
  src="http://78.141.206.203/video/ct.mp4"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
  autoplay=""
  width="100%"
  height="450px"
>
</iframe>

效果：

{% dplayer "url=http://server.shirtiny.cn/video/Hold Me Now.mp4" "api=http://dplayer.daoapp.io" "loop=no" "theme=#FADFA3" "autoplay=true" "token=tokendemo" %}

博客视频标签

服务器我换成伦敦的了，现在速度好些了，有的时间段比较卡。

Vultr测ping、服务器数据迁移备份

2. 直播

这里搭建一个简单的直播体系，实际要复杂的多。

直播应该有推流端、服务器处理端、和接收端。

2.1. 服务器端配置

之前配过视频播放了，这里也用Nginx-Rtmp模块，配置一下nginx就行了。

还是打开/usr/local/nginx/conf目录下的nginx.conf配置文件

shell

vi /usr/local/nginx/conf/nginx.conf

键盘按i编辑，方向键移动光标，编辑完按 ”

“ 保存退出

编辑内容：

rtmp代码块

shell


rtmp{

    server{
 #端口号，要记住
 listen 2019;
 chunk_size 4096;


      application video {
                play /data/video;
        }

  #新增live应用，名字可自定。live on，开启直播，一对多广播
     application live {

  live on;

 }

  #hls，暂时用不到，可以不写
       application hls_alic{
  live on;
  hls  on;
  hls_path /tmp/hls;
 }


}
}

http代码块

shell


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

    sendfile        on;
    tcp_nopush     on;
    keepalive_timeout  65;


    server {
        listen       80;
        server_name  localhost;


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

     location /images/ {
         root /data;
         }

        location /video/ {
            root /data;
        }


  #新增，访问http://ip/stat时，为当前 HTTP location 设置 RTMP statistics 处理程序。RTMP statistics 是一个静态的 XML 文档。可以使用 rtmp_stat_stylesheet 指令在浏览器中作为 XHTML 页面查看这个文档。添加 XML 样式表引用到 statistics XML 使其可以在浏览器中可视。
         location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

  #新增，能直接访问stat.xsl文件，上面的一块，就是能在浏览器看到rtmp的状态信息
        location /stat.xsl {
             root /usr/local/nginx-rtmp-module-1.2.1;
        }


        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }


    }




}

重启Nginx服务。

shell

systemctl restart nginx.service

顺便让防火墙开放你配置的端口，比如这里我配置的2019端口：

shell

#添加2019端口配置防火墙
firewall-cmd --zone=public --add-port=2019/tcp --permanent
#重新加载
firewall-cmd --reload

浏览器访问http://你的服务器Ip/stat，如http://108.160.134.51/stat，若出现以下页面，则服务器配置成功。

2.2. 推流端

推流可以用FFmpeg，功能强大，使用命令行进行操作，可以在服务器上使用，就是参数比较多，对新手不友好。

还可以用OBS，有windows版本，是大家常用的直播工具了。

OBS

先说下Obs，这个软件比较常见。在设置里面，左侧菜单选输出，输出模式选高级，点录像，选择输出到URL

URL的格式是：rtmp://你的服务器ip:端口号/服务器配置的应用名/自定义个名字，容器格式最好选flv，因为体积会小点，其他看自己情况选。

FFmpeg

FFmpeg，这个可以装在windows本机上，也可以装在服务器上，使用方式是命令行，下面说一下服务器上怎么装。windows同理，无所谓，可以用其他软件。
- 【FFmpeg使用示例：】ffmpeg -i /data/video/am.mkv -vcodec h264 -s 1920*1080 /data/video/am.mp4
我的服务器系统：CentOs 7，安装流程：
- 先安装环境支持，EPEL Release

shell

sudo yum install -y epel-release rpm
#若出现缺少Code提示，执行：sudo rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7

- 安装Nux-Dextop

shell

sudo rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm

正式安装FFmpeg

shell

sudo yum install -y ffmpeg
#检查是否安装成功
ffmpeg -version

使用

这里使用服务器上的视频/data/video/mll.mp4，模拟推流。

推流到rtmp://localhost:2019/live/test，本地2019端口下的live应用，当然也可以推到远处的服务器，后面的test是自定义的名字。

shell

ffmpeg -re -i /data/video/mll.mp4 -c copy   -f flv rtmp://localhost:2019/live/test

可以根据网速自定义码率：

-b

3000k 意为视频码率3000k

-b

320k 指音频

shell

ffmpeg -re -i /data/video/mllo.mp4 -c copy -b:v 3000k -b:a 320k  -f flv rtmp://localhost:2019/live/test

更多使用参考：ffmpeg基础使用

推流后，我们需要一个接收端才能看到推流的效果。

2.3. 接收端（拉流端）

这里我用的JWPlayer

解压JWPlayer，新建个html，与jwPlayer文件夹同级目录。

Html内容如下：

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>live-player</title>
<style type="text/css">
</style>
</head>
<body>
<script type='text/javascript' src='jwplayer/jwplayer.js'></script>
<center>
<b>RTMP直播系统</b>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
// var server = window.location.hostname;
// mylive 对应nginx.conf配置项application的名字
// live_stream 对应Adobe Flash Stream Media Live Encoder配置的stream名称
var live_url = 'rtmp://108.160.134.51:2019/live/test';  //链接的服务器流，与推流一致
jwplayer('mediaspace').setup({
'flashplayer': 'jwplayer/jwplayer.flash.swf',
'file': live_url,
'controlbar': 'bottom',
'width': '760',
'height': '428',
//autostart: true,  //如果打开此标志，在打开网页时会自动播放直播流
});
</script>
</body>
</html>

其中live_url应与推流端的推流地址一致，此html可传到服务器上Nginx管理的目录下，直接访问。也可在本地运行。

运行效果如图：

一个简单的直播系统便建好了。

参考文章：