RTSP-H265直播流转web前端播放

整体思路

通过FFmpeg将H265的rtsp视频转换成H264的flv并使用rtmp协议推流到nginx。
用nginx-http-flv-module转换成flv视频流，然后web前端使用flv.js或者mpegts.js进行播放。

系统环境

ubuntu20.04

编译安装`nginx-http-flv-module`

官方地址：https://github.com/winshining/nginx-http-flv-module
用途：默认的nginx不支持flv_live，需要编译安装。
安装过程：

创建临时目录

mkdir tmp
cd tmp

首先在NGINX官网下载，目前最新版本是nginx-1.23.4，于是通过以下命令下载安装包。

wget https://nginx.org/download/nginx-1.23.4.tar.gz

同样在官网下载nginx-http-flv-module，最新版本是1.2.11。通过以下命令下载。

wget https://github.com/winshining/nginx-http-flv-module/archive/refs/tags/v1.2.11.tar.gz

创建nginx目录

mkdir /usr/local/nginx

解压nginx

tar xf nginx-1.23.4.tar.gz

移动nginx-http-flv-module到nginx目录，并解压

mv xf v1.2.11.tar.gz /usr/local/nginx
tar xf /usr/local/nginx/v1.2.11.tar.gz -C /usr/local/nginx/

安装依赖

apt update
apt install openssl libssl-dev libpcre3 libpcre3-dev zlib1g-dev

编译安装nginx，并指定nginx-http-flv-module

cd nginx-1.23.4
./configure --add-module=/usr/local/nginx/nginx-http-flv-module-1.2.11/
make
make install

创建nginx启动文件

sudo vim /lib/systemd/system/nginx.service

填入以下内容

[Unit]
Description=nginx - high performance web server
After=network.target remote-fs.target nss-lookup.target
[Service]
Type=forking
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
[Install]
WantedBy=multi-user.target

启动nginx，并设置开机启动

systemctl start nginx
systemctl enable nginx

访问http://127.0.0.1，查看是否启动成功。

编辑配置文件

sudo vim /usr/local/nginx/conf/nginx.conf

增加rtmp配置

worker_processes  10; #修改
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp{
    out_queue 4096;
    out_cork 8;
    max_streams 128;
    timeout 15s;
    drop_idle_publisher 15s;
    log_interval 5s;
    log_size 1m;
    server{
	 listen 39000; # 这个端口是推流端口
	 server_name 192.168.32.130;
	 application myapp{ #这个名称可以自定义，拉流推流对应好就行
		 live on;
		 gop_cache on;
	  }
    }
}

修改http-server里面的listen和host为监听端口和自己的地址或者域名，并在server下增加

        listen       39880; #这个端口是拉流端口
        server_name  192.168.32.130;
        # ...
        location /live{
		flv_live on;
		chunked_transfer_encoding  on;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
	}

推流测试

首先安装ffmpeg

apt install ffmpeg

假如本地有个intput.mp4的文件，可以通过以下命令推流，其中vcodec参数为转换后的编码，指定输出为flv，推流端口号和app信息可以看上面的nginx配置，test为自定义，可以随机生成。

ffmpeg -y -i input.mp4 -acodec aac -vcodec h264 -f flv  rtmp://192.168.32.130:39000/myapp/test

这时可以用vlc访问http://192.168.32.130:39880/live?port=39000&app=myapp&stream=test拉取视频流，注意观察各参数对应的是nginx的配置项。

用rtsp-h265进行推流

ffmpeg -re -rtsp_transport tcp -i "rtsp://ip:port/xxx/yyy" -acodec aac -vcodec libx264 -f flv  rtmp://192.168.32.130:39000/myapp/test

用amis构建一个页面

vim /usr/local/nginx/html/index.html

用以下代码覆盖

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>amis demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="stylesheet" href="/sdk/sdk.css" />
  <link rel="stylesheet" href="/sdk/helper.css" />
  <link rel="stylesheet" href="/sdk/iconfont.css" />
  <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
  <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
  <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
  <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
  <style>
    html,
    body,
    .app-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="root" class="app-wrapper"></div>
  <script src="/sdk/sdk.js"></script>
  <script type="text/javascript">
    (function () {
      let amis = amisRequire('amis/embed');
      // 通过替换下面这个配置来生成不同页面
      let amisJSON = {
        "type": "page",
        "body": {
          "type": "video",
          "isLive": true,
          "videoType": "video/x-flv",
          "src": "http://192.168.32.130:39880/live?port=39000&app=myapp&stream=test",
          "autoPlay": true
        }
      };
      let amisScoped = amis.embed('#root', amisJSON);
    })();
  </script>
</body>

</html>

从amis官网下载最新版的sdk，并解压到/usr/local/nginx/html/sdk目录。

这时，访问http://192.168.32.130:39880即可看到推流效果。

集成到其他前端项目

可以使用mpegts.js或者flv.js实现。

-- Write by PercyC

更新于：2023年4月19日