挑战一个人搭建一套完整直播系统6: 直播网页播放的实现

之前尝试了使用rtmp-nginx-flash发现总是有问题，查询后发现，自2020年底，所有浏览器不再支持flash插件，rtmp的视频流就不能在浏览器中播放了，这个时候可以采用将rtmp重新封装成http-flv的视频流，首先配置nginx的http-flv模块：

nginx配置http-flv模块并重新编译，首先获取代码

git clone https://github.com/winshining/nginx-http-flv-module.git

nginx配置该模块

./configure --add-module=../../live/nginx-http-flv-module/

重新编译和安装：

make && make install

接着配置html网页demo，这里采用flv.js来进行播放，所以尝试使用flv.js，这里直接给出一个现成的html代码：

git clone https://github.com/godblesszhouzhou/flv.git

直接将flv文件夹放在nginx的html路径下，这里对应的是

/usr/local/nginx/html/

配置nginx.conf文件：

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

# 添加RTMP服务
rtmp {

    server {
        listen 1935;
        application live {  
            live on;#开启直播
            hls on;#开启hls
            hls_path /usr/local/m3u8File; #配置HLS m3u8文件存放地址   
        }
	}

}
# 添加http-flv服务
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html/flv;
            index  index.html index.htm;
        }
        
        location /mylive_hls{
            types {
                #m3u8 type设置
                application/vnd.apple.mpegurl m3u8;
                # ts 分片文件设置
                video/mp2t ts;
            }
        alias /usr/local/m3u8File;
            add_header Cache-Control no-cache; #禁止缓存
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    server {
        listen       8080;
        server_name	 localhost;
		
		location /live {
			flv_live on;
            chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
			add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
			add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
			add_header Access-Control-Allow-Headers X-Requested-With;
			add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
			add_header 'Cache-Control' 'no-cache';
        }
	}
}

可以看到这里配置了两个http服务，一个是网页服务，入口网页是html/flv文件夹下的index.html，一个是http-flv服务，另外保留原有的rtmp服务，重启nginx服务浏览器输入：

http://127.0.0.1:80

再次进入网页可以看到如下界面：

 参照第3节，使用ffmpeg进行推流：

ffmpeg -i movie.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/live/1

刷新网页，选择stream url，输入播放网址为：

http://127.0.0.1:8080/live?port=1935&app=live&stream=1

可以看到推流的视频。