树莓派通过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>