实现一个直播DEMO |
您所在的位置：网站首页 › html直播平台 › 实现一个直播DEMO |
实现一个直播DEMO
|
前言
这篇文章主要记录直播DEMO的实现，主要通过RTMP推流，通过HTTP-FLV拉流，并在页面中播放。 同系列文章： 视频直播知识之一：数据的采集和编码 视频直播知识之二：推流、拉流和服务端处理 视频直播知识之三：播放端播放 视频直播知识之四：直播DEMO 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 installmake 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 试验可以在本地下载安装ffmpeg后，读取一个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 拉流开发前端页面，借助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 { constructor(props: IProps) { super(props); this.state = { }; } _videoRef = (createRef() as RefObject); 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 ( ); } } export default Live;效果如下： |
【本文地址】