在Web网页播放网络摄像机（海康、大华等）RTSP视频流方案汇总

前言

由于项目需求，要在web上查看摄像机的实时视频（不能用付费方案），所以写下此文章记录下学习过程，也是踩了不少坑
Web端采用vue框架开发及测试
所有方案都离不开ffmpeg，感谢ffmpeg开发者
仅在Windows10下测试
EasyPlayer.js的使用教程请看这里

1 RTMP方案

方案描述：

ffmpeg 将rtsp视频流转为rtmp视频流，通过nginx代理，web接入rtmp协议播放，需要flash支持

后端：

ffmpeg命令[仅供参考！！！]：

ffmpeg -buffer_size 4096000 -rtsp_transport tcp -i rtsp://[用户名]:[密码]@[IP]:554/h264/ch1/main/av_stream -threads 8 -tune zerolatency -acodec aac -vcodec libx264 -r 25 -vb 2500k -vf scale=iw/2:-1 -f flv rtmp://localhost:1935/myapp/flv

nignx配置：（已包含方案1、2、3的配置）


#user  nobody;
worker_processes  1;

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

#pid        logs/nginx.pid;


events {
    worker_connections  4096;
}


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

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       9091;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

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

        location ^~ /uwb/ {
            proxy_pass http://127.0.0.1:18080;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded=-Proto $scheme;

            #proxy_http_version 1.1;
            #proxy_set_header Upgrade $http_upgrade;
            #proxy_set_header Connection "upgrade";
        }

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


        location /flv {
            flv_live on; #打开HTTP播放FLV直播流功能
            chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复

            add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
			add_header Cache-Control no-cache;
			add_header Access-Control-Allow-Headers "Origin, X-Requested-With, 	Content-Type, Accept";
			add_header Access-Control-Methods "GET, POST, OPTIONS";
        }

        location /hls/ {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }

            root media;
            add_header Cache-Control no-cache;
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Headers "Origin, X-Requested-With, 	Content-Type, Accept";
			add_header Access-Control-Methods "GET, POST, OPTIONS";
        }

        location /dash {
            root html/dash;
            add_header 'Cache-Control' 'no-cache';
        }

        location /stat {
            #推流播放和录制统计数据的配置

            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root html/stat; #指定stat.xsl的位置
        }

        #如果需要JSON风格的stat, 不用指定stat.xsl
        #但是需要指定一个新的配置项rtmp_stat_format

        #location /stat {
        #    rtmp_stat all;
        #    rtmp_stat_format json;
        #}

        location /control {
            rtmp_control all; #rtmp控制模块的配置
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
}



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模块在access.log中记录日志的间隔时间，对调试非常有用
    log_size     1m; #log模块用来记录日志的缓冲区大小

    server {
        listen 1935;
        # server_name www.test.*;  #当模块中，只有一个server时，可以不配置server_name，nginx对于请求，当找不到匹配的server_name时，会默认发给第一个server进行处理。

        application myapp {
            live on;
            gop_cache on; #打开GOP缓存，减少首屏等待时间
			record off;
			allow play all;
        }

        application hls {
            live on;
            hls on;
            hls_path ./media/hls;
			hls_fragment 1s;
			hls_playlist_length 3s;
			record off;
        }

        application dash {
            live on;
            dash on;
            dash_path ./media/dash;
        }
    }

}

Web播放组件：

video.js
EasyPlayer.js
~~vlc~~ (主流浏览器已不支持)
LivePlayer（与EasyPlayer.js惊人的相似）

方案结论：

web端必须要flash插件支持，然而现在主流的浏览器都不支持flash了，基本可以放弃此方案
nginx-rtmp-module在windows下编译很麻烦

2 HLS方案

方案描述：

基于方案1的扩展，ffmpeg 将rtsp视频流切片转存为多个ts视频缓存起来，并通过nginx代理出去，web接入hls协议(m3u8)播放
nginx-rtmp-module的原生支持，niginx.conf加个配置即可

后端：

ffmpeg + nginx + nginx-rtmp-module

ffmpeg命令[仅供参考！！！]

ffmpeg -f rtsp -rtsp_transport tcp -i rtsp://[用户名]:[密码]@[IP]:554/h264/ch1/main/av_stream -c copy -f hls -hls_time 1 -hls_list_size 3 -hls_wrap 3 D:/nginx-1.19.3/media/hls/test.m3u8

nginx配置：参考方案1

Web播放组件：

方案结论：

相对比较简单的一个方案了
延时过高，在3-5秒以上，甚至更久，适合点播
nginx-rtmp-module在windows下编译很麻烦

3 HTTP-FLV方案

方案描述：

本质上还是ffmpeg将rtsp视频流转为rtmp视频流，只是ffmpeg在转码的时候已经将视频转换成了flv格式的，nginx-http-flv-module将rtmp流转为http-flv流，web播放flv格式视频（可能我的理解有误，具体原理没有深究）
nginx-http-flv-module是基于nginx-rtmp-module的二次开发，作者貌似又新弄了一个 nginx-http-live-module，不免费也不开源，有兴趣的自行去了解

后端：

ffmpeg + nginx + nginx-http-flv-module

ffmpeg命令：与1方案一致，已经包含了flv视频流的转码
nginx配置：与1方案一致

Web播放组件：

方案结论：

网上说flv方案的延时在1-3秒，然而我实际测试远不止3秒，用flv.js播放能有20多秒延时…
nginx-http-flv-module在windows下编译很麻烦

4 JSMpeg方案（推荐）

方案描述：

ffmpeg + http server(接流)+ websocket(server中继转发,client接收流) + jsmpeg.js

后端：

ffmpeg + http server + websocket server

http服务端：用于接收ffmpeg转码后的流
websocket服务端：用于http server收到的流推送给各个客户端

Web播放组件：

jsmpeg.js

方案结论：

jsmpeg.js采用软解码方式，支持mpeg1格式视频、mp2格式音频，将视频流解码成图片并渲染到canvas上，并且可在源码基础上二次开发
延迟较低，1s左右
由于是客户端解码，清晰度和码率不能太高，客户端多路同屏数建议不要超过6个，否则客户端cpu占用过高，对性能有要求的只能上webrtc
详细介绍见我的另一篇文章JSMpeg介绍以及学习记录

5 WebRTC方案（比较推荐）

方案描述：

WebRTC可以使得web端直接连接rtsp视频流，不过初步了解了后，感觉学习成本有点大，便没有深究

后端：

需要搭建一个信令服务器

Web播放组件：

使用原生video元素即可

方案结论：

性能好，延迟低，实时性要求高的可以使用本方案
学习成本较大，暂未深入了解，可参考以下文章：
Vue + WebRTC 实现音视频直播（附自定义播放器样式）
基于 WebRTC 的 RTSP 视频实时预览
 webrtc-streamer

6 方案延时对比：

由于开发的时候忘记截图对比了，所以这里就文字描述吧。

RTMP : 3秒以上
HLS: 5秒以上
FLV: 20秒以上（未经多次测试，可能不准）
JSMPEG: 1秒左右
WebRTC：未测试，理论延迟是毫秒级别的

7 其他方案

付费方案：
- 猿大师
开源方案：
- ZLMediaKit (目前项目已转到此方案，推荐)
- SRS(简单高效的实时视频服务器，支持RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181)

后语

最终采用jsmpeg方案，后续会写一篇文章来介绍
写文章不易，如果对你有用的话就点个赞吧~
如有不足，请指出
参考的文章：
网络摄像头RTSP视频流WEB端实时播放实现方案
 videojs+hls+rtmp网页播放
 Web下无插件播放rtsp视频流的方案总结

在Web网页播放网络摄像机（海康、大华等）RTSP视频流方案汇总

前言

1 RTMP方案

2 HLS方案

3 HTTP-FLV方案

4 JSMpeg方案（推荐）

5 WebRTC方案（比较推荐）

6 方案延时对比：

7 其他方案

后语

悦读