前言

这篇文章主要记录直播app源代码DEMO的实现，主要通过RTMP推流，通过HTTP-FLV拉流，并在页面中播放。

同系列文章：

1 搭建流媒体服务器

安装添加RTMP和HTTP-FLV模块的Nginx，并进行配置。如果已安装过nginx，可以跳过安装步骤，直接添加模块，这里不再赘述。

1.1 安装Nginx

以CentOS系统为例：首先更新CentOS系统

yum update

安装编译nginx所需的开发包

yum install gcc
yum install pcre pcre-devel
yum install openssl openssl-devel
yum install wget unzip

下载 nginx和 nginx-http-flv-module（也可以用 git clone）。 nginx-http-flv-module基于 nginx-rtmp-module，所以不用再安装 nginx-rtmp-module。

wget http://nginx.org/download/nginx-1.20.1.tar.gz # 可到http://nginx.org/download/查看stable版本
wget https://github.com/winshining/nginx-http-flv-module/archive/refs/heads/master.zip
tar -zxvf nginx-1.20.1.tar.gz
unzip master.zip

添加模块，编译和安装nginx。

cd nginx-1.20.1
./configure --with-http_ssl_module --with-http_secure_link_module --add-module=../nginx-http-flv-module-master
make
sudo make install

make install后，nginx默认会安装在 /usr/local/nginx/目录下。

1.2 Nginx配置

在 /usr/local/nginx/conf/nginx.conf中，添加相关的配置。

http {
    server {
        listen 80;
        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 头
        }
    }
}
rtmp_auto_push on;
rtmp {
    server {
        listen 1935;
        notify_method get;
        access_log  /var/log/nginx/access.log;
        chunk_size 4096;
        application live {
            # 开启直播模式
            live on;
            # 允许从任何源push流
            allow publish all;
            # 允许从任何地方来播放流
            allow play all;
            # 20秒内没有push，就断开链接。
            drop_idle_publisher 20s;
        }
    }
}

rtmp推流地址：

rtmp://example.com[:port]/appname/streamname

http-flv拉流播放地址：

http://example.com[:port]/dir?[port=xxx&]app=appname&stream=streamname

更多配置可以参考 nginx-http-flv-module README。检查配置，重启nginx。

/usr/local/nginx/sbin/nginx -t
systemctl reload nginx

1.3 试验

可以在本地下载安装ffmpegffmpeg后，读取一个mp4文件，推流到上面搭建的直播服务，来进行试验。命令如下， test.mp4就是你本地的视频文件名称， live是前面配置的application名称， test就是自定义的流名称。

ffmpeg -re -i test.mp4 -c copy -f flv "rtmp://example.com[:port]/live/test"

看到如下的信息即开始推流了。

可以执行 ffplay命令在本地观看正在直播的视频。

ffplay "rtmp://example.com[:port]/live/test"

2 数据采集和推流

以windows为例，首先查询本机的音视频采集设备：

ffmpeg -list_devices true -f dshow -i dummy

推流摄像头和麦克风内容， USB2.0 PC CAMERA和 麦克风 (USB2.0 MIC)是上面查询的结果。

ffmpeg -f dshow -i video="USB2.0 PC CAMERA":audio="麦克风 (USB2.0 MIC)" -vcodec libx264 -acodec aac -f flv "rtmp://example.com[:port]/live/test"

更多命令可以查看 ffmpeg的文档。

3 拉流

开发直播app源代码前端页面，借助 flv.js拉流。

import React, { createRef, RefObject } from 'react';
import flvjs from 'flv.js/dist/flv.js';
import './index.css';
interface IProps {
}
interface IState {
}
class Live extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
    };
  }
  _videoRef = (createRef() as RefObject<HTMLVideoElement>);
  componentDidMount() {
    if (flvjs.isSupported()) {
      const videoElement = this._videoRef.current;
      try {
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'https://example.com[:port]/flv?app=live&stream=test'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
      } catch (e) {
        console.error(e);
      }
    }
  }
  render() {
    return (
      <div>
        <video ref={this._videoRef} className="video" controls={true} muted={true}></video>
      </div>
    );
  }
}
export default Live;

效果如下：

这样，我们就实现了直播app源代码推拉流。
声明：本文由云豹科技转发自MurphyLee博客，如有侵权请联系作者删除

ITPub博客

直播app源代码，如何实现系统推流和拉流

前言