海康监控视频转换为网页可用格式

1.准备工作

a. 一部装有ubuntu系统的主机/服务器，本次记录所用为ubuntu 22.0.4.1的服务器。

b. 可以拿到rtsp格式视频流的海康摄像头。

海康视频流的rtsp地址格式通常如下：

rtsp://<username>:<password>@<ip_address>:<port>/<stream_path>

其中，<username>是登录海康设备的用户名，<password>是登录密码，<ip_address>是海康设备的IP地址，<port>是端口号，<stream_path>是流媒体路径。请注意，这些信息需要根据您所使用的设备进行相应的更改。本次所用rtsp为 rtsp://:@<ip_address>:/Streaming/Channels/102 （为了保密，username，password，ip_address,port都不展示，下文展示的链接皆如此，请注意替换）

c. 可播放视频流的视频播放器，推荐下载VLC播放器

2.搭建nginx环境

a.登录ubuntu服务器

b.安装nginx，本次记录所用版本为1.24.0，安装之前，需要确保一些依赖已安装，详情可百度‘ubuntu源码安装nginx’

下载nginx源码

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

解压

tar -zxvf nginx-1.24.0.tar.gz

下载nginx-http-flv-module，这是一个使nginx支持直播流的模块，基于nginx-rtmp-module

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

大概效果如下

开始编译nginx并安装

cd nginx-1.24.0

./configure --add-module=/path/to/nginx-http-flv-module
make
make install

注册nginx为系统服务，并开机启动

cd /usr/lib/systemd/system

touch nginx.service

vi nginx.service

其中nginx.service内容为

[Unit]
Description=nginx service
After=network.target 

[Service]
Type=forking 
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s quit
PrivateTmp=true 

[Install]
WantedBy=multi-user.target

保存，设定开机启动

systemctl enable nginx.service

设置nginx.conf,一般路径为'/usr/local/nginx/conf/nginx.conf'以下是本次记录完整的nginx.conf,主要是rtmp设置，注意8000,8001,1935端口，可根据实际，自行替换

#user  nobody;
worker_processes  1;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    server {
       listen       8000;
       server_name  localhost;

       location / {
            root   html;
            index  index.html index.htm;
            # 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 Access-Control-Allow-Headers range;
            # add_header 'Cache-Control' 'no-cache';
       }
       location /live {
            flv_live on;
           
            chunked_transfer_encoding  off; #close 'Transfer-Encoding: chunked' response
            add_header Access-Control-Allow-Origin * ; #add ad ditional HTTP header
            add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';
            add_header Access-Control-Allow-Headers range;
        }
    }
    server {
        listen       8001;
        server_name  localhost;
        
        location /hls {
            root   html;
            index  index.html index.htm;
            types{
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            add_header Access-Control-Allow-Origin *; #add additional HTTP header
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            add_header Cache-Control no-cache;
        }
    }

}
rtmp{ 
    server{
        listen 1935; 
        application live{ 
            live on; 
            record off; 
        } 
        application hls{ 
            live on; 
            hls on; 
            hls_path nginx-rtmp-module/hls; 
            hls_cleanup off; 
        } 
    } 
}

在nginx指向的server的目录创建hls目录

cd /usr/local/nginx/html
mkdir hls
chmod -R 775 ./hls

启动nginx

systemctl start nginx.service

3.安装ffmpeg

sudo apt update
sudo apt install ffmpeg

如果成功

先试试转rtmp和flv

nohup ffmpeg -i "rtsp://<username>:<password>@<ip_address>:<port>/Streaming/Channels/102 " -c:v libx264 -f flv -r 5 -s 640*360 -an "rtmp://127.0.0.1:1935/hls/mystream" & 

vlc打开以下两个链接测试

rtmp://yourip:1935/hls/mystream

http://yourip:8000/live?port=1935&app=hls&stream=mystream

运行皆成功，但是在网页端，rtmp依赖于flash，遂放弃，引入flv.js，http://:8000/live?port=1935&app=hls&stream=mystream播放无效，暂时也找不到问题所在，遂该方案放弃

4.转成m3u8

nohup ffmpeg -i "rtsp://<username>:<password>@<ip_address>:<port>/Streaming/Channels/102" -c:v libx264 -preset veryfast -c:a aac -f hls -hls_time 4 -hls_playlist_type event -hls_wrap 5 /usr/local/nginx/html/hls/107.m3u8 & 

注意-hls_wrap 5，该参数目的是为了覆盖.ts切片文件，下载最多5个切片， 让他不要一直创建

如果成功,该文件夹下会生成ts和m3u8后缀的文件

vlc测试链接

http://yourip:8001/hls/107.m3u8

显示成功，在网页上引入video.js, 测试播放成功，注意video标签，要加入红框的属性。

5.结尾

m3u8目前兼容大部分浏览器，配合video.js可放心使用，在服务器端nohup启动ffmpeg命令时会生成nohup.out日志文件，可在它生成后删除nohup.out，防止该文件随着时间越长越大（此方法仅供参考，请自行判断）