监控视频web播放方案

在线监控视频用的海康，RTSP协议，支持直播和回放，项目前期用的flash播放器，到2020年底flash已不再被浏览器支持，因此公司需要实现一种支持浏览器（H5）播放的方案。

直播

目前直播的技术方案一般是：把RTSP流转成RTMP流推到RTMP流媒体服务器上，浏览器请求RTMP流开始播放。
RTMP是Adobe公司推出的格式，视频格式是flv，这个不能直接在浏览器里播放除非用flash播放器，可以把flv.js把flv视频流转成http流。
用nginx做为RTMP流媒体服务器，
RTSP流转成RTMP流用ffmpeg实现，ffmpeg api不太好用，因此用java Process调ffmpeg命令行实现，需要把process的inputStream和errorStream要读取出来。
命令demo:

ffmpeg -re -rtsp_transport tcp -i rtsp://ip:554/Streaming/Channels/101?transportmode=unicast -vcodec copy -acodec aac -f flv rtmp://ip:1935/live/c1233a2402615b76f04e8cc16869e6a8_live

nginx配置：

rtmp {
    server {
        listen 1935;  # 接受推流的端口号
        chunk_size 8192; # 单一推流数据包的最大容量？

        application live { # 可以自行更换名字
            live on; # 打开直播
            meta off; # 为了兼容网页前端的 flv.js，设置为 off 可以避免报错
            gop_cache on; # 支持GOP缓存，以减少首屏时间，但也会增加视频延时
            allow play all; # 允许来自任何 ip 的人拉流
        }
    }
}

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';
        }

location /playback {
             root html;
             add_header 'Access-Control-Allow-Origin' '*';

       }

回放

回放视频转码和直播一样，前端用video.js。
flv.js不支持手机浏览器，同时也为了在回放的时候可以暂停、拖动，因此回放采用了hls方案，hls的延迟会更大，但是把hls_time设小点也能减少延迟。
参数示例：

ffmpeg/bin/ffmpeg -re -rtsp_transport tcp -i rtsp://ip:554/Streaming/tracks/101?starttime=20201102t110204z&endtime=20201102t120920z -ss 00:00:00 -to 01:07:16 -tune zerolatency -preset ultrafast -hls_flags split_by_time -hls_time 2 -hls_list_size 0 -hls_wrap 0 -s 720x576 -r 25 -vcodec libx264 -b:v 500000 -acodec aac -b:a 64000 -g 30 -y /usr/local/nginx/html/playback/2829fa0d1b98c75ef90baa979944da2d_playback.m3u8

注意点

1. ffmpeg的命令参数位置不能乱放，参数主要针对视频、音频编码，码率，帧率，分辨率，gop_size, 编码速度等方面的配置。
2. 直播上显示的时间和系统时间会有5秒的延迟，这方面可以把gop_cache禁掉，但是首屏打开要很长时间。
3. flv.js在播放一段时间后，会产生累积延迟，这个是TCP特性造成的，可以在js里定时任务判断追平。

参考：
https://blog.csdn.net/wishfly/article/details/53079303
https://www.cnblogs.com/yulibostu/articles/11623493.html
https://blog.csdn.net/kingvon_liwei/article/details/79271361
https://blog.csdn.net/weixin_40777510/article/details/103764198
https://blog.csdn.net/string_kai/article/details/100598268
https://ffmpeg.org/ffmpeg.html