以下仅仅为个人的搭建记录,食用时请根据自己的实际情况进行。

大致思路:使用srs作为本地的流媒体服务器运行,使用obs推流到srs,然后用frp把srs服务器转发到公网。在线播放器是使用flv.js来播放flv直播流媒体文件。

安装srs、nginx、vlc和python3

sudo apt install nginx python3 vlc

使用git克隆srs的仓库

git clone gitee.com/winlinvip/srs.oschina

从srs源码进行编译:

./configure && make

编辑conf/http.flv.live.conf,将http_server下的listen修改为34567(因为默认的8080端口可能与其它软件占用)

保存后运行srs

./objs/srs -c conf/http.flv.live.conf

安装obs

sudo apt install ffmpeg obs-studio

在底部第二个地方 来源 中添加直播源,比如背景图像、文字、屏幕录制等等;
在底部第三个地方 混音器 中可以选择麦克风和电脑音效的大小,根据需要调节。

打开菜单→工具→自动配置向导

选择第一个“优先考虑推流”,然后选择自己需要的canvas分辨率和期望的帧数(注:canvas分辨率不代表输出分辨率)。流的类型选择 自定义 ,服务器填写rtmp://127.0.0.1/live,密钥填写livestream。把 通过带宽估测比特率 关掉,因为它比较耗费时间;

这些配置项在obs菜单-文件-设置-视频中也可以手动修改

完成后,点击右下角的 开始推流

使用vlc测试本地直播流运行是否正常

打开vlc,进入菜单栏→媒体→打开网络串流,地址填写rtmp://127.0.0.1/live/livestream

如果顺利的话,可以看到直播画面已经播放起来了。

使用frp获取公网地址

此处我使用公用的sakura frp服务

创建一个隧道,服务器选择国内的节点,类型选tcp隧道,本地地址填写127.0.0.1,本地端口填写34567

完成之后到用户后台左侧“软件下载”,下载linux(amd64)版本的命令行软件。

为下载完成的frp程序文件赋予可执行权限:

chmod +x ./frp程序文件

然后回到用户后台左侧“隧道列表”,找到刚刚新建的隧道,查看这个隧道的配置文件:

站内下载的 frpc 直接使用启动参数:
-f abcdefg:123456

在终端中运行./frp程序文件 -f abcdefg:123456

出现“隧道成功启动”字样说明隧道已经成功运行

在网页中播放你开在公网的直播

在frp输出中找到服务器映射在公网上的域名和端口,这是在隧道创建时随机分配的、也是创建之后便固定不变的。

在本地新建一个文本文件,命名为index.html;编辑index.html,并加入以下内容:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>web端直播页面</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">web端直播页面</a>
      </div>
    </div>
  </nav>
  <br />
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <video id="videoElement" controls="controls" style="width:100%" autoplay="autoplay">
        </video>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js" autoplay="autoplay"></script>

然后换行,继续加入以下代码

<script>
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://cn-zz-bgp.sakurafrp.com:60284/live/livestream.flv'
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
  }
</script>

并把刚刚加入代码中url这行右边的http://cn-zz-bgp.sakurafrp.com:60284/live/livestream.flv改成http://服务器映射在公网上的域名:端口/live/livestream.flv

保存文件,然后双击这个index.html网页文件

稍等几秒,直播应当已经顺利在浏览器中打开和播放了。