preface

• The Web side adopts vue framework for development and testing
• Test only under Windows 10
• See the tutorial of EasyPlayer.js here

RTMP scheme

Scheme Description:

ffmpeg transfers rtsp video to rtmp video stream, which is played through nginx proxy and web access rtmp protocol. flash support is required

Back end:

ffmpeg + nginx + nginx-rtmp-module

• ffmpeg command [for reference only!!!]:

ffmpeg -buffer_size 4096000 -rtsp_transport tcp -i rtsp://[user name]: [password] @ [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 configuration: (configurations of 1.1, 1.2 and 1.3 are included)

#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; #Open HTTP play FLV live stream function
            chunked_transfer_encoding on; #Support 'transfer encoding: chunked' reply

            add_header 'Access-Control-Allow-Origin' '*'; #Add additional HTTP headers
            add_header 'Access-Control-Allow-Credentials' 'true'; #Add additional HTTP headers
			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 {
            #Configuration of streaming playback and recording statistics

            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root html/stat; #Specify the location of stat.xsl
        }

        #If you need JSON style stat, don't specify stat.xsl
        #However, you need to specify a new configuration item rtmp_stat_format

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

        location /control {
            rtmp_control all; #Configuration of rtmp control module
        }

        # 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; #The log module records the log interval in access.log, which is very useful for debugging
    log_size     1m; #The log module is used to record the buffer size of the log

    server {
        listen 1935;
        # server_name www.test.*;  #When there is only one server in the module, the server can not be configured_ Name, nginx for the request, when no matching server is found_ Name, it will be sent to the first server for processing by default.

        application myapp {
            live on;
            gop_cache on; #Open GOP cache to reduce the waiting time for the first screen
			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 playback component:

1. video.js
2. EasyPlayer.js
3. vlc (not supported by mainstream browsers)
4. LivePlayer

Scheme conclusion:

• The web side must be supported by flash plug-ins, but now the mainstream browsers do not support flash, so we can basically give up this scheme
• Nginx RTMP module is very troublesome to compile under windows
  
  
  

HLS scheme

Scheme Description:

• Based on the extension of scheme 1.2, ffmpeg transfers rtsp video stream slices to multiple ts videos for caching, and then sends them out through nginx proxy and plays them through web access hls protocol (m3u8)
• Native support for nginx RTMP module. niginx.conf can be configured

Back end:

ffmpeg + nginx + nginx-rtmp-module

• ffmpeg command [for reference only!!!]

ffmpeg -f rtsp -rtsp_transport tcp -i rtsp://[user name]: [password] @ [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 configuration: refer to 1.1

Web playback component:

1. video.js
2. EasyPlayer.js

Scheme conclusion:

• A relatively simple scheme
• The delay is too high, more than 3-5 seconds, or even longer. It is suitable for on-demand broadcasting
• Nginx RTMP module is very troublesome to compile under windows
  
  
  

HTTP-FLV scheme

Scheme Description:

• In fact, ffmpeg transfers rtsp video to rtmp video stream, but ffmpeg has converted the video into FLV format when transcoding. Nginx HTTP flv module transfers rtmp to HTTP flv stream, and FLV format video is played on the web (maybe my understanding is wrong, and the specific principle is not studied in depth)
• Nginx HTTP flv module is based on nginx-rtmp-module For the secondary development of, the author seems to have got a new nginx HTTP live module, which is neither free nor open source. If you are interested, you can find out by yourself

Back end:

ffmpeg + nginx + nginx-http-flv-module

• ffmpeg command: consistent with scheme 1.1, it already contains the transcoding of flv video stream
• nginx configuration: consistent with 1.1

Web playback component:

1. flv.js
2. videojs-flvjs
3. EasyPlayer.js

Scheme conclusion:

• It is said on the Internet that the delay of FLV scheme is 1-3 seconds, but my actual test is far more than 3 seconds. Playing with flv.js can have a delay of more than 20 seconds
• Nginx HTTP flv module is very troublesome to compile under windows

JSMpeg scheme

Scheme Description:

• ffmpeg + websocket(server relay forwarding, client receiving stream)+ jsmpeg.js

Back end:

ffmpeg + websocket server

• websocket server: used to push the stream after ffmpeg transcoding to each client

Web playback component:

• jsmpeg.js

Scheme conclusion:

• jsmpeg.js adopts soft decoding method, supports decoding ts video stream, mp2 format audio stream, MPEG 2 video stream decodes into pictures and renders them to canvas, and can be redeveloped on the basis of source code
• The delay is low, about 1s
• The definition and bit rate should not be too high, otherwise the cpu occupation of the client is too high

WebRTC scheme

Scheme Description:

• WebRTC can make the web directly connect to rtsp video stream, but after a preliminary understanding, I feel that the learning cost is a little high, so I don't go deep into it

Back end:

• A signaling server needs to be built

Web playback component:

• Use the native video element

Scheme conclusion:

• The learning cost is high, so we haven't got a deep understanding yet. Please refer to the following articles:
  Vue + WebRTC to realize audio and video live broadcasting (with custom player style)
  Real time preview of RTSP video based on WebRTC
  
  
  

Scheme delay comparison:

• RTMP: more than 3 seconds
• HLS: more than 5 seconds
• Flv: more than 20 seconds (may not be allowed without multiple tests)
• Jsmpeg: about 1 second

Post language

• Finally, the jsmpeg scheme is adopted, and an article will be written later to introduce it
• If there are any deficiencies, please point out
• Reference articles:
  Implementation scheme of real-time playback of RTSP video stream on WEB end of webcam
  videojs+hls+rtmp web page playback