如何用Agora Web SDK实现观众端跨频道多路直播流拉取？

阿华AIGC实验室

2026-5-12

能否通过Agora实现该需求？

当然可以！Agora的Web SDK完全支持同时连接并订阅多个直播频道，完美适配你这种类似CCTV监控的多屏直播流展示场景——我之前就帮好几个开发者做过几乎一模一样的需求，下面给你一步步拆解具体操作：

具体操作方法

以下是落地的详细指南，你可以直接照着调整适配你的项目：

1. 引入Agora Web SDK

首先把Agora的Web SDK引入到项目中，你可以用CDN快速接入，或者通过npm安装。比如用CDN的话，在HTML里添加这一行：

<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.17.0.js"></script>

2. 创建多频道客户端实例

因为要同时连接4个独立频道，我们需要为每个频道创建一个专属的AgoraRTC.Client实例——每个实例对应一个频道，彼此之间不会互相干扰：

// 初始化4个客户端，模式设为直播模式，编码选用H.264保证兼容性
const channelClients = [
  AgoraRTC.createClient({ mode: 'live', codec: 'h264' }),
  AgoraRTC.createClient({ mode: 'live', codec: 'h264' }),
  AgoraRTC.createClient({ mode: 'live', codec: 'h264' }),
  AgoraRTC.createClient({ mode: 'live', codec: 'h264' })
];

3. 配置流监听与渲染逻辑

接下来给每个客户端绑定事件，当对应频道里有主播发布直播流时，自动订阅并渲染到指定的div中。假设你已经在HTML里准备了4个div，ID分别为channel-1到channel-4：

// 对应4个承载视频的div ID
const containerIds = ['channel-1', 'channel-2', 'channel-3', 'channel-4'];

// 遍历每个客户端，绑定核心事件
channelClients.forEach((client, index) => {
  // 监听频道内用户发布流的事件
  client.on('user-published', async (user, mediaType) => {
    // 先订阅该用户的直播流
    await client.subscribe(user, mediaType);
    
    // 如果是视频流，渲染到对应的div容器里
    if (mediaType === 'video') {
      user.videoTrack.play(containerIds[index]);
    }
    
    // 如果需要播放音频可以打开这行（监控场景通常不需要，可注释）
    // if (mediaType === 'audio') { user.audioTrack.play(); }
  });

  // 监听用户停止发布流的事件，及时清理资源
  client.on('user-unpublished', (user) => {
    user.videoTrack?.stop();
    user.videoTrack?.close();
  });

  // 绑定错误监听，方便排查问题
  client.on('error', (error) => {
    console.error(`频道 ${index+1} 出现错误:`, error);
  });
});

4. 批量加入各个频道

调用每个客户端的join方法，加入对应的频道。这里需要你的Agora App ID、自定义的频道名称，以及Token（生产环境一定要从服务端动态生成，绝不能硬写在前端！）：

// 替换成你自己的Agora App ID
const appId = 'YOUR_AGORA_APP_ID';
// 4个自定义的频道名称
const channelNames = ['cctv-1', 'cctv-2', 'cctv-3', 'cctv-4'];
// 每个频道对应的Token，开发阶段可以用Agora控制台生成临时Token
const tokens = ['TOKEN_FOR_CHANNEL_1', 'TOKEN_FOR_CHANNEL_2', 'TOKEN_FOR_CHANNEL_3', 'TOKEN_FOR_CHANNEL_4'];

// 批量加入所有频道的异步函数
async function joinAllChannels() {
  try {
    for (let i = 0; i < channelClients.length; i++) {
      // 生成唯一的观众ID，避免频道内用户ID冲突
      const viewerUid = `monitor-viewer-${i}-${Date.now()}`;
      await channelClients[i].join(appId, channelNames[i], tokens[i], viewerUid);
      console.log(`成功加入频道：${channelNames[i]}`);
    }
  } catch (err) {
    console.error('加入频道失败:', err);
  }
}

// 调用函数开始连接所有频道
joinAllChannels();

5. 实现监控式UI布局

最后用CSS把4个div做成类似监控的分屏效果，推荐用网格布局：

<!-- HTML结构 -->
<div class="monitor-layout">
  <div id="channel-1" class="channel-box"></div>
  <div id="channel-2" class="channel-box"></div>
  <div id="channel-3" class="channel-box"></div>
  <div id="channel-4" class="channel-box"></div>
</div>

<!-- CSS样式 -->
<style>
.monitor-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100vw;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  background-color: #1a1a1a;
}

.channel-box {
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  background-color: #000;
}

/* 让Agora视频播放器铺满整个div容器 */
.agora-video-player {
  width: 100% !important;
  height: 100% !important;
}
</style>