樹莓派通過ffmpeg和nginx把攝像頭輸出到網頁進行直播

這個flv和rtmp有啥區別

html網頁能直播flv,而不支持播放rtmp,這個模塊可以輸出http flv,支持html頁面播放....

首先安裝點基礎套件

sudo apt install -y ffmpeg libx264-dev libssl-dev yasm cmake libpcre3-dev

編譯安裝nginx

sudo git clone https://github.com/winshining/nginx-http-flv-module.git
sudo wget http://nginx.org/download/nginx-1.16.1.tar.gz
sudo tar -xvf nginx-1.16.1.tar.gz
cd nginx-1.16.1
sudo  ./configure --prefix=/usr/local/nginx  --add-module=../nginx-http-flv-module  --with-cc-opt="-Wimplicit-fallthrough=0"
# 上面的命令,個別機器會報錯,用下面這個取代:
# sudo  ./configure --prefix=/usr/local/nginx  --add-module=../nginx-http-flv-module

make -j4
make install

nginx配置文件

nano /usr/local/nginx/conf/nginx.conf

user www-data;
pid /tmp/nginx.pid;
worker_processes  4; #Nginx開啟4個子進程，子進程個數最好跟CPU的核心數一樣
worker_cpu_affinity 0001 0010 0100 1000; #CPU的mask，子進程使用它來綁定CPU核心，避免進程切換造成性能損失
error_log logs/error.log error; #錯誤日志位置和日志級別，如果使用默認編譯選項，位置為/usr/local/nginx/logs/error.log，error表示只打印錯誤日志
events {
    worker_connections  1024; #Nginx處理的最大連接數
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    keepalive_timeout  65;
    server {
        listen       8080; #Nginx監聽的HTTP請求端口
        location / {
            root   /www; #HTTP請求URL映射到服務器的位置
            index  index.html index.htm; #HTTP請求優先請求的文件，如http://localhost/，如果有index.html在/var/www目錄下，那么請求的是/var/www/index.html
        }
        location /live {
            flv_live on; #當HTTP請求以/live結尾，匹配這兒，這個選項表示開啟了flv直播播放功能
            #chunked_tranfer_encoding on;
            types{
                 video/x-flv                                      flv;
                }
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
            add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
        }
        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp;
            add_header 'Cache-Control' 'no-cache';
            #hls_path /tmp/hls;
        }

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

        location /stat {
            #configuration of push & pull status

            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            root /var/www/rtmp; #specify in where stat.xsl located
        }

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

rtmp_auto_push on; #因為Nginx可能開啟多個子進程，這個選項表示推流時，媒體流會發布到多個子進程
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp; #多個子進程情況下，推流時，最開始只有一個子進程在競爭中接收到數據，然后它再relay給其他子進程，他們之間通過unix domain socket傳輸數據，這個選項表示unix domain socket的路徑

rtmp {
    out_queue   4096;
    out_cork    8;
    max_streams 64; #Nginx能接受的最大的推流數
    server {
        listen 1935; #Nginx監聽的RTMP推流/拉流端口，可以省略，默認監聽1935
        application myapp {
            live on; #當推流時，RTMP路徑中的APP（RTMP中一個概念）匹配myapp時，開啟直播
            gop_cache on; #開啟GOP（Group of Picture）緩存，播放器解碼時，收到一個完整的GOP才會開始播放，這個是減少播放延遲的選項
            #pull rtmp://live.hkstv.hk.lxdns.com/live/hks; #如果懶得推流，那可以用這個，香港衛視的直播推流
        }
    }
    server {
        listen 1935;
        #server_name *.test.com; #或者www.test.*/www.test.com
        application myapp {
            live on;
            gop_cache on;
            hls on;
            hls_path /tmp/hls;
            hls_fragment 10s;
        }
    }
}

寫 systemd 配置文件

mkdir /usr/lib/systemd/system/
vim /usr/lib/systemd/system/nginx.service

[Unit]
Description=nginx optimized HTTP server
After=network.target remote-fs.target nss-lookup.target

[Service]
Type=forking
PIDFile=/tmp/nginx.pid
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/bin/kill -HUP $MAINPID
ExecsTOP=/usr/bin/kill -s QUIT $MAINPID
privateTmp=true

[Install]
WantedBy=multi-user.target

啟動

systemctl enable nginx
systemctl restart nginx
systemctl status nginx

推送

# 攝像頭采集推送
ffmpeg -i /dev/video0 -vcodec libx264 -max_delay 100 -s 640x480 -f flv -an  -g 5 -b 700000 rtmp://127.0.0.1:1935/myapp/1

# 視頻文件推送
ffmpeg -stream_loop -1 -i cutb.mp4 -vcodec libx264 -s 320x240 -f flv -an -g 5 -b 700000 rtmp://127.0.0.1:1935/myapp/1

播放

http://localhost:8080/live?app=myapp&stream=1

用flv.js播放:

  <script type="text/javascript" src="flv.min.js"></script>
  <video id="videoElement" autoplay="autoplay">
    您的瀏覽器不支持 video 標簽。
  </video>
  <script>
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById('videoElement');
      var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://localhost:8080/live?app=myapp&stream=1'
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    }
  </script>