最近在工作中接触到了一个需求，需要在网页上进行摄像头的实施直播。经过研究，决定采用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:12345@10.10.10.105: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

最终效果