本帖最后由 郝永亮 于 2019-1-23 22:01 编辑
实时视屏播放的简单实现通过使用nginx搭建一个简单的服务器，使用ffmpeg推送rtmp实时流，利用video标签实现可以在web端和手机端的浏览器中进行直播。
Windows下面搭建基于rtmp的服务器硬件环境操作系统：windows7旗舰版 处 理 器：Intel(R) Core(TM)i5-5200 CPU @2.20GHz 2.20 GHz 系统内存： 8GB 系统类型：64位操作系统 软件环境及配置将解压后的目录名:nginx 1.7.11.3 Gryphon改成:nginx-1.7.11.3-Gryphon
下载服务器状态检查程序 stat.xsl 将nginx-rtmp-module-master.zip解压后复制到目录:nginx-1.7.11.3-Gryphon中。 保证stat.xls的目录为:nginx-1.7.11.3-Gryphon\nginx-rtmp-module\stat.xsl
修改conf\nginx-win.conf 配置文件。 Nginx可以支持多虚机配置，如果是一个ip或域名多虚机的情况，就是要不同的虚机对应不同的端口服务，而如果是多ip或域名一个虚机的情况，则又不一样。这里的实际情况就是，80分别对应一个http协议的虚机，1935对应一个rtmp协议的虚机。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| rtmp {
server {
listen 1935;
chunk_size 4000;
application hls{
live on ; #启用rtmp直播
#地址为rtmp://[server]:[rtmp_port]/[app]/[stream]
hls on ; #启用hls直播
#地址为地址为http://[server]:[http_port]/[app]/[stream].m3u8
hls_path html/hls; #此处hls需手动在html文件夹下面创建，否则程序会报错
hls_fragment 5s;
recorder rec { #启用录制
record all manual; #手动控制录制启停
record_suffix _rec.flv;
record_path nginx-rtmp-module/tmp/rec/; #录制保存地址
record_unique on;
}
}
}
}
|
配置http server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| server {
listen 80;
# server_name localhost;
location /stat {
# rtmp_stat all;
# rtmp_stat_stylesheet stat.xls;
#}
#location /stat.xls {
# root nginx-rtmp-module/;
#}
#location /control {
# rtmp_control all;
#}
location /hls {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root html;
expires -1;
}
|
在nginx.exe所在的文件夹，按住shift+右键，选中在此处打开命令窗口，进入windows的cmd。输入以下命令启动nginx服务： 1
| nginx.exe -c conf\nginx-win-.conf
|
. 启动结果 - 直接在浏览器里输入127.0.0.1就可以进入浏览器的欢迎界面
![]()
提供rtmp直播源在搭建好基于rtmp的服务器之后，需要提供rtmp直播源。这里我们使用的香港卫视的rtmp直播源。根据nginx.conf中的hls_path配置，下面这个命令会向本地的D:\Program Files\nginx-1.7.11.3-Gryphon\html\hls下面写入ts片段和m3u8文件。 1
| ffmpeg -re -analyzeduration 8000 -probesize 200000 -i "rtmp://live.hkstv.hk.lxdns.com/live/hks" -strict -2 -bsf:a aac_adtstoasc -c copy -flvflags aac_seq_header_detect -f flv rtmp://localhost/hls/mystream
|
[size=1em]注意 1、这里提供rtmp源的机器不一定和nginx在同一台物理主机上，可以是网络上的另一台机器，只要保证它能与nginx所在的主机建立tcp链接即可。（也就是nginx主机需要开启rtmp服务的监听端口，这里是1935，当然你也可以修改为其他的端口。）
在网页中展示视屏在nginx-1.7.11.3-Gryphon/html目录下面创建一个live.html。 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<link rel="stylesheet" href="http://vjs.zencdn.net/5.10/video-js.css">
</head>
<video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls autoplay=true>
<source src="hls/mystream.m3u8" type="application/x-mpegURL">
</video>
<script src="http://vjs.zencdn.net/5.10/video.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.14.1/videojs-contrib-hls.min.js"></script>
</script>
<script>
var player = videojs('example-video');
player.play();
</script>
</html>
|
如果只是用video标签是无法播放.m3u8的视屏文件的，需要引入videojs-contrib-hls.js。videojs-contrib-hls支持一堆HLS功能，详情参考[
手机端如果与web可以在同一个网络环境中，那么输入对应本机ip地址也是可以查看的，并且支持横屏、竖屏的切换。 其他
| 
收藏
淘帖
踩
