在线视频播放、直播

发表于 | 更新于 | 分类于

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文件夹，我的文件夹位置为：

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

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

1
/usr/local/nginx-1.17.1
  • 进入Nginx源码文件夹
1
cd /usr/local/nginx-1.17.1
  • 安装Nginx-Rtmp模块

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

1
2
3
./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的安装目录
1
vi /usr/local/nginx/conf/nginx.conf

键盘按i编辑，方向键移动光标，编辑完按 ” :wq “ 保存退出

编辑内容：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
rtmp{
  
    server{

	listen 2019;
	chunk_size 4096;


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


}
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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服务。

1
systemctl restart nginx.service

1.4. 测试视频播放

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

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

1
<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>

效果：

博客视频标签

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

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

2. 直播

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

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

2.1. 服务器端配置

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

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

键盘按i编辑，方向键移动光标，编辑完按 ” :wq “ 保存退出

编辑内容：

rtmp代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

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服务。

1
systemctl restart nginx.service

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

1
2
3
4
#添加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
1
2
sudo yum install -y epel-release rpm
#若出现缺少Code提示，执行：sudo rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
    • 安装Nux-Dextop
1
2
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
1
2
3
sudo yum install -y ffmpeg
#检查是否安装成功
ffmpeg -version
  • 使用

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

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

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

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

-b:v 3000k 意为视频码率3000k

-b:a 320k 指音频

1
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内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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管理的目录下，直接访问。也可在本地运行。

运行效果如图：

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

参考文章：