最近在工作中接触到了一个需求,需要在网页上进行摄像头的实施直播。经过研究,决定采用FFmpeg转RTSP为RTMP流,然后通过SRS转发为HLS流供浏览器播放。
前提条件
Linux服务器一台(用于搭建SRS环境)
FFmpeg(用于讲RTSP流转为RTMP流)
SRS(用于将RTMP流转为HLS流)
EasyPlayer.js(用于在HTML中播放HLS流)
安装SRS
第一步 获取SRS。详细参考GIT获取代码
git clone https://github.com/ossrs/srs
cd srs/trunk
或者使用git更新已有代码:
git pull
第二步 编译SRS。 这一过程比较耗时间
./configure && make
第三步可根据自己情况配置,此处我们不进行第三步
第三步 编写SRS配置文件。详细参考[HLS分发]HLS]和HTTP服务器
将以下内容保存为文件,譬如conf/http.hls.conf,服务器启动时指定该配置文件(srs的conf文件夹有该文件)。
# conf/http.hls.conf
listen 1935; #监听RTMP端口
max_connections 1000;
http_server {
enabled on;
listen 8080; #HLS服务端口
dir ./objs/nginx/html;
}
vhost __defaultVhost__ {
hls {
enabled on;
hls_path ./objs/nginx/html;
hls_fragment 10;
hls_window 60;
}
}
第四步 启动SRS。详细参考HLS分发和HTTP服务器
./objs/srs -c conf/http.hls.conf
第五步 测试安装
访问 服务器IP:你配置的HLS服务端口访问,看到下图就安装成功了!
安装FFmpeg
第一步 下载源码并解压。
wget http://ffmpeg.org/releases/ffmpeg-4.2.tar.bz2 #可在官网找到最新的版本
tar -jxvf ffmpeg-4.2.tar.bz2
第二步 安装FFmpeg。
cd ffmpeg-4.2
./configure
如果出现 nasm/yasm not found or too old. Use –disable-x86asm for a crippled build.需要先安装yasm !如果没报上面的错跳过这一步
异常处理 安装yasm !如果没报上面的错跳过这一步
apt-get install yasm
安装好yasm后重新执行命令 !如果没报上面的错跳过这一步
./configure
编译安装,编译过程有点慢
make
make install
第三步 测试安装。
输入 ffmpeg 命令,出现下图表示成功
下载EasyPlayer.js
git clone https://github.com/tsingsee/EasyPlayer.js.git
开始转码
第一步 通过FFmpeg讲RTSP流转为RTMP流并推送到SRS中。
ffmpeg -re -i rtsp://admin:[email protected]:554(替换为你的RTSP地址) -vcodec copy -acodec copy -f flv -y rtmp://10.10.110.212:1935(替换成你自己的服务器IP和配置的端口)/live/livestream
浏览器播放
编写HTML并引入EasyPlayer-element.min.js
EasyPlayer参数说明类型默认值video-url视频地址String–
video-title视频右上角显示的标题String–
snap-url视频封面图片String–
auto-play自动播放Booleantrue
live是否直播, 标识要不要显示进度条Booleantrue
alt视频流地址没有指定情况下, 视频所在区域显示的文字String无信号
muted是否静音Booleanfalse
aspect视频显示区域的宽高比String16:9
isaspect视频显示区域是否强制宽高比Booleantrue
loading指示加载状态, 支持 sync 修饰符String–
fluent流畅模式Booleantrue
timeout加载超时(秒)Number20
stretch是否不同分辨率强制铺满窗口Booleanfalse
show-custom-button是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准)Booleantrue
isresolution是否在播放 m3u8 时显示多清晰度选择Booleanfalse
isresolution供选择的清晰度 “yh,fhd,hd,sd”, yh:原始分辨率fhd:超清,hd:高清,sd:标清–
resolutiondefault默认播放的清晰度Stringhd
最终效果