背景
在网页中播放RTSP视频流，查看很多资料在web中没办法直接播放RTSP，能播放的都是做了转码，后端转码比较多，也有前端转码的，咱们今天就来做个后端转码。
原理
后端程序使用FFmpeg接入RTSP，转码到RTMP服务器。web通过http访问RTMP中开启的flv。
环境
笔者安装的centos7虚拟机，安装完成后执行以下命令更新系统中的yum，因为后面安装其它软件需要一些库，不更新yum就装不上。
2023-11-02_160655.jpg
yum install epel-release -y
yum update -y
2023-11-02_160541.jpg
2023-11-02_160637.jpg
yum更新完成后安装需要的库
yum -y install gcc openssl openssl-devel pcre-devel zlib zlib-devel
2023-11-02_161330.jpg
库安装完成后下载nginx和nginx-flv模块，下载完成后解压到/home中
下载地址
http://nginx.org/download/
https://codeload.github.com/winshining/nginx-http-flv-module/zip/refs/tags/v1.2.10
2023-11-02_160946.jpg
2023-11-02_161249.jpg
解压后进入/home/nginx-1.22.0路径，执行以下命令，配置nginx的安装路径和添加flv模块
./configure --prefix=/opt/nginx-1.22.0 --add-module=../nginx-http-flv-module-1.2.10
2023-11-02_161439.jpg
执行以下命令安装nginx
make && make install
2023-11-02_161449.jpg
执行完成后进入/opt，里面会有nginx-1.22.0文件夹
2023-11-02_161511.jpg
编辑/opt/nginx-1.22.0/conf/nginx.conf，这是nginx配置文件，里面默认有一个http节点开启80端口。我们根据自己的业务修改这个配置文件。
worker_processes 2;
events {
worker_connections 1024;
}
rtmp {
server {
listen 6159; # rtmp服务器端口号
chunk_size 2048; # 单一推流数据包的最大容量
application rtmp { # 服务模块，可以自行更换名字
live on; # 打开直播
meta off; # 为了兼容网页前端的 flv.js，设置为 off 可以避免报错
gop_cache on; # 支持GOP缓存，以减少首屏时间
allow play all; # 允许来自任何 ip 的人拉流
}
}
}
http {
include mime.types;
default_type application/octet-stream;
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8759;
server_name localhost;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /live { # 拉流时的 uri ，可以自行修改
flv_live on; # 打开 http-flv 服务
chunked_transfer_encoding on;
add_header 'Access-Control-Allow-Origin' '*'; # 允许跨域
add_header 'Access-Control-Allow-Credentials' 'true';
}
# redirect server error pages to the static page /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
2023-11-02_162248.jpg
配置文件中我们删除了默认的80端口的http服务，添加了一个8759的http服务，添加了一个6159的rtmp服务。
执行/opt/nginx-1.22.0/sbin/nginx，启动nginx服务器，停止是nginx -s stop。
在浏览中中访问服务器的8759端口，看到nginx主页说明启动成功。
2023-11-02_162656.jpg
使用
准备1路RTSP视频流
2023-11-02_162801.jpg
使用FFmpeg获取RTSP视频流推到rtmp服务器中，执行命令，看到推流日志说明推流成功。FFmpeg推流命令的参数很多，卡顿、转码、质量的视频问题一般都是这个命令决定的，有很多优化的地方。
ffmpeg -rtsp_transport tcp -i rtsp://admin:hf123456@192.168.101.64 -c copy -f flv -an rtmp://192.168.101.31:6159/rtmp/flv
2023-11-02_173801.jpg
2023-11-02_173814.jpg
使用vlc播放rtmp视频流
2023-11-02_173614.jpg
使用网页播放flv视频流
2023-11-02_173630.jpg
至此完成网页播放RTSP视频流，原理还是对RTSP进行转码为flv播放。
网页播放也比较简单，使用flv.js很容易播放。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>播放页面</title>
</head>
<body>
<script src="./js/flv.js"></script>
<video style="height: 400px;width: 600px;" id="videoElement" muted autoplay controls></video>
<script>
var flvPlayer = null;
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://192.168.101.31:8759/live?port=6159&app=rtmp&stream=flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
}
</script>
</body>
</html>
网友评论