目录

  • 引言
  • 整体架构
  • 配置步骤
  • 搭建nginx rtmp服务器
  • 编译安装nginx和nginx-http-flv-module
  • 配置启动nginx
  • ffmpeg编译安装
  • 启动ffmpeg开始推流
  • vue播放flv视频流代码片段参考


引言

通过上篇博客《 树莓派FFmpeg搭配rtmp服务器实现直播推流（一）》我们已经可以实现推拉rtmp流，本文在此基础上进一步介绍依靠新的模块————nginx-http-flv-module实现客户端拉取flv流，这可以使不支持flash的客户端（入谷歌浏览器）也能正常播放视频。需要注意的是，nginx-http-flv-module是基于nginx-rtmp-module开发的，完全兼容 nginx-rtmp-module的所有功能。

整体架构

  • 树莓派【采集本地csi摄像头输入借助ffmpeg工具推rtmp流到nginx服务器】
  • 一台具有公网IP的云服务器【部署nginx，提供rtmp推流地址和flv拉流地址】
  • 客户端【根据nginx服务器提供的推拉流地址拉取flv视频流本地播放】

配置步骤

搭建nginx rtmp服务器

编译安装nginx和nginx-http-flv-module

安装 NGINX 依赖项(可参考nginx官方源码编译步骤)
PCRE——支持正则表达式。NGINX Core和Rewrite模块需要。

wget github.com/PCRE2Project/pcre2/releases/download/pcre2-10.40/pcre2-10.40.tar.gz
tar -zxf pcre2-10.40.tar.gz
cd pcre2-10.40
./configure
make
sudo make install

zlib – 支持标头压缩。NGNX Gzip模块需要。

wget http://zlib.net/zlib-1.2.13.tar.gz
tar -zxf zlib-1.2.13.tar.gz
cd zlib-1.2.13
./configure
make
sudo make install

OpenSSL – 支持 HTTPS 协议。NGINX SSL模块和其他模块需要。

sudo apt install libssl-dev

从nginx.org下载最新稳定版的nginx

wget https://nginx.org/download/nginx-1.22.1.tar.gz
tar zxf nginx-1.22.1.tar.gz

下载nginx-http-flv-module

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

直接使用nginx一起编译nginx-http-flv-module

cd nginx目录
./configure --add-module=nginx-http-flv-module全路径
make
sudo make install

至此nginx和nginx-http-flv-module编译安装完成。

配置启动nginx

sudo vi /usr/local/nginx/conf/nginx.conf

添加下列配置搭到nginx配置文件（可参考nginx-http-flv-module官方配置说明）

worker_processes  1;

events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;  # 接受推流的端口号
        chunk_size 8192;

        application myapp { # myapp 模块，可以自行更换名字
            live on; # 打开直播
            # 非常重要， 设定让ngnix断开阻塞中的连接， 才能触发exec_record_done
            # 以及客户端的LFLiveKit reconnectCount自动重新连接才会好用
            drop_idle_publisher 5s;
            meta off; # 为了兼容网页前端的 flv.js，设置为 off 可以避免报错
            gop_cache on; # 支持GOP缓存，以减少首屏时间
            allow play all; # 允许来自任何 ip 的人拉流
        }
    }
}

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

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8080;  # http 服务的端口
        server_name  localhost;

        location /live { # 拉流时的 uri ，可以自行修改
            flv_live on; # 打开 http-flv 服务
            chunked_transfer_encoding on;
            add_header 'Access-Control-Allow-Origin' '*'; # 允许跨域
            add_header 'Access-Control-Allow-Credentials' 'true';
        }

    }

}

退出保存启动nginx

./usr/local/nginx/sbin/nginx

浏览器访问nginx服务器ip显示如下则nginx配置启动成功

rtsp推流服务器搭建 nginx rtmp推流服务器_媒体

ffmpeg编译安装

参考《 树莓派FFmpeg搭配rtmp服务器实现直播推流（一）》

启动ffmpeg开始推流

ffmpeg -s 720x480 -i /dev/video0 -b:v 2000000 -c:v h264_omx -f flv http://nginx服务器ip:8080/live?port=1935&app=myapp&stream=mystream

视频效果（可以维持在30fps左右，清晰度可通过调节ffmpeg参数进一步优化，这里不再赘述）

vue播放flv视频流代码片段参考

安装依赖

npm install --save flv.js

新建组件Monitor.vue

<template>
  <div>
    <video id="videoElement" controls autoplay muted width="600px" height="400px"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  name: "Monitor",
  data () {
    return {
      flvPlayer:null
    }
  },
  mounted() {
    if (flvjs.isSupported()) {
      let videoElement = document.getElementById('videoElement');
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        hasAudio: false,
        url: 'http://nginx服务器ip:8080/live?port=1935&app=myapp&stream=mystream'
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
    }
  }
}
</script>

<style scoped>

</style>

引入<Monitor></Monitor>即可正常播放。