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

<!DOCTYPE HTML>
<html>

<head>
    <title>EasyPlayer</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
</head>

<body>
    <easy-player video-url="rtmp://10.10.110.212:1935/live/livestream.m3u8" video-title="RTSP转HLS播放" live="true" isresolution=“true”></easy-player>
    <script type="text/javascript" src="EasyPlayer-element.min.js"></script>
</body>

</html>
参数说明类型默认值
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

最终效果

发表回复