功能描述

将直播流发布到 CDN(Content Delivery Network)的过程称为 CDN 直播推流,用户无需安装 App,可以通过 Web 浏览器观看直播。

在推流到 CDN 过程中,当频道中有多个主播时,通常会涉及到转码,将多个直播流组合成单个流,并设置这个流的音视频属性和合图布局。

推流实现原理如下:

../_images/live_ios_publishing_stream_cn.png

前提条件

请确保已开通 CDN 旁路推流功能,步骤如下:

  1. 登录控制台,点击左侧导航栏 img 按钮进入产品用量页面。
  2. 在页面左上角展开下拉列表选择需要开通 CDN 旁路推流的项目,然后点击旁路推流下的分钟数
  3. 点击开启旁路推流服务
  4. 点击应用 即可开通旁路推流服务,并得到 500 个最大并发频道数。
并发频道数 N,指用户可以同时使用 N 路流进行推流转码。

开通成功后,你可以在用量页面看到旁路推流的使用情况。

实现方法

声网推出的 CDN 旁路推流方案主要基于以下 API 进行推流、转码和布局设置:

其中:

  • 主播在 joinChannel 成功后通过 setLiveTranscoding 接口定义转码参数和设置(RTMP 画布大小等信息)。CDN 音频推流时仍需设置一个 16 × 16 的最小视窗。
  • 主播通过 addPublishStreamUrl接口指定推流地址。推流地址可以在开始推流后动态增删。

示例代码

//CDN 转码设置
LiveTranscoding config;
config.audioSampleRate = TYPE_44100;
config.audioChannels = 2;
config.audioBitrate = 48;
config.width = 640;
config.height = 720;
config.videoFramerate = 30;
config.userCount = 1;  //如果 userCount > 1,则需要为每个 transcodingUsers 分别设置布局
config.videoCodecProfile = HIGH;

//分配用户视窗的合图布局
LiveTranscoding transcoding = new LiveTranscoding();
LiveTranscoding.TranscodingUser user = new LiveTranscoding.TranscodingUser();
user.uid = 123456;
transcoding.addUser(user);
user.x = 0;
user.audioChannel = 0;
user.y = 0;
user.width = 640;
user.height = 720;

rtcEngine.setLiveTranscoding(transcoding);
// 添加推流地址
// transcodingEnabled 设置为 true,表示开启转码。如开启,则必须通过 setLiveTranscoding 接口配置 LiveTranscoding 类。单主播模式下,我们不建议使用转码。
rtcEngine.addPublishStreamUrl(url, true);
// 删除推流地址
rtcEngine.removePublishStreamUrl(url);

调整合图布局

频道内有多个主播时,需要通过设置 transcodingUser 调整合图布局。

主播需要在 joinChannel 后通过 setLiveTranscoding 接口定义转码参数和设置(RTMP 画布大小、多人混流布局等信息)。

示例 1: 两人横向平铺

如果你想显示以下布局:

../_images/sei_2host.png

设置参数如下:

Canvas:
     width: 640
     height: 360
     backgroundColor: #FFFFFF

User0:
      userId: 123
      x: 0
      y: 0
      width: 320
      height: 360
      zOrder: 1
      alpha: 1.0

User1:
      userId: 456
      x: 320
      y: 0
      width: 320
      height: 360
      zOrder: 1
      alpha: 1.0

示例 2: 三人纵向平铺

如果你想显示以下布局:

../_images/sei_3host.png

设置参数如下:

Canvas:
      width: 360
      height: 640
      backgroundColor: #FFFFFF

   User0:
      userId: 123
      x: 0
      y: 0
      width: 360
      height: 640
      zOrder: 1
      alpha: 1.0

   User1:
       userId: 456
       x: 0
       y: 320
       width: 180
       height: 320
       zOrder: 2
       alpha: 1.0

   User2:
       userId: 789
       x: 180
       y: 320
       width: 180
       height: 320
       zOrder: 2
       alpha: 1.0

示例 3: 1 人全屏 + 多人任意悬浮小窗

如果你想显示以下布局:

../_images/sei_random.png

设置参数如下:

Canvas:
   width: 360
   height: 640
   backgroundColor: #FFFFFF

User0:
   userId: 123
   x: 0
   y: 0
   width: 360
   height: 640
   zOrder: 1
   alpha: 1.0

User1:
    userId: 456
    x: 45
    y: 390
    width: 110
    height: 213
    zOrder: 2
    alpha: 1.0

User2:
    userId: 789
    x: 185
    y: 390
    width: 110
    height: 213
    zOrder: 2
    alpha: 1.0