如何在 Web 端搭建互动直播平台：推流、连麦、混流、聊天完整教程

在 Web 端搭建一个功能完整的互动直播平台，核心需要实现推流、拉流、连麦、混流、聊天五个模块。本教程以 ZEGO Express Web SDK 为例，从零开始逐步讲解实现流程。

前置准备

开始开发前，需要完成以下准备：

在 ZEGO 控制台创建项目，获取 AppID 和 Server 地址
确保使用 HTTPS 协议部署页面（WebRTC 要求安全上下文）
使用 Chrome 浏览器最新版本进行开发和测试

第一步：集成 SDK

将 Express Web SDK 引入项目。支持 NPM 安装和 CDN 引入两种方式。

// NPM 安装
npm install zego-express-engine-webrtc

// 或使用 CDN
// <script src="https://zego-xxx.com/express-webrtc-sdk.js"></script>

初始化 ZegoExpressEngine 实例：

import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

const zg = new ZegoExpressEngine(appID, serverURL);

SDK 包体积为 1.96MB（全功能版），如需精简包大小可联系技术支持进行功能裁剪。

第二步：实现推流

推流是把音视频数据从浏览器传输到服务器的过程。

创建本地流

// 创建摄像头流
const localStream = await zg.createZegoStream({
  camera: {
    video: true,  // 是否开启视频
    audio: true,  // 是否开启音频
  },
  // 可选的视频配置
  videoConfig: {
    width: 1280,
    height: 720,
    frameRate: 15,
    bitrate: 1200,
  }
});

// 预览本地画面
localStream.playVideo(document.querySelector('#local-video'));

登录房间并推流

// 登录房间（需先生成 Token）
const roomID = 'room-001';
const userID = 'user-001';
const token = 'your_generated_token';

await zg.loginRoom(roomID, token, { userID });

// 开始推流
const streamID = 'stream-001';
const result = await zg.startPublishingStream(streamID, localStream);

验证：控制台日志显示推流成功，可以在浏览器中看到本地摄像头画面。

第三步：实现拉流

拉流是观众从服务器获取主播音视频数据的过程。

// 监听房间内流更新事件
zg.on('roomStreamUpdate', async (roomID, updateType, streamList) => {
  if (updateType === 'ADD') {
    // 新流加入，开始拉流
    for (const stream of streamList) {
      const remoteStream = await zg.startPlayingStream(stream.streamID);
      remoteStream.playVideo(document.querySelector('#remote-video'));
    }
  } else if (updateType === 'DELETE') {
    // 流移除
    for (const stream of streamList) {
      await zg.stopPlayingStream(stream.streamID);
    }
  }
});

验证：当另一个用户加入同一房间并推流后，观众端自动显示远端画面。

第四步：实现连麦

连麦是互动直播的核心体验。当观众想要与主播互动时，申请上麦即可变为连麦者。

连麦流程

观众发起连麦申请 → 主播同意 → 观众开始推流 → 双方互拉流 → 连麦成功

连麦申请的发送和响应需要借助信令通道。可以使用 Express SDK 的自定义信令功能，也可以使用即时通讯 SDK（如 ZIM）来实现。

// 主播端：监听连麦申请（通过自定义信令）
// 假设收到连麦申请后，主播同意

// 观众端被同意后，开始推流
const cohostStream = await zg.createZegoStream({ camera: { video: true, audio: true } });
await zg.startPublishingStream('cohost-stream-001', cohostStream);

第五步：实现混流

连麦后多个直播画面需要混流为一路流，以便转推 CDN 或录制。ZEGO 支持手动混流和自动混流两种方式。

// 创建混流配置
const mixConfig = {
  // 混流输出流 ID
  outputStreamID: 'mix-stream-001',
  // 输入流列表
  inputList: [
    { streamID: 'stream-001', layout: { x: 0, y: 0, width: 640, height: 360 } },
    { streamID: 'cohost-stream-001', layout: { x: 640, y: 0, width: 640, height: 360 } },
  ],
  // 输出视频配置
  outputConfig: {
    width: 1280,
    height: 360,
    frameRate: 15,
  },
};

// 开始混流
await zg.startMixerTask(mixConfig);

验证：混流后的输出流 mix-stream-001 可以在另一个页面拉流查看。

第六步：实现聊天功能

直播互动需要聊天功能。可以使用 Express SDK 内置的实时消息能力，也可以接入 ZIM 即时通讯 SDK 获得更完整的消息功能。

使用广播消息（简单聊天）

// 发送广播消息（房间内所有用户收到）
zg.sendBroadcastMessage(roomID, '大家好！', (code) => {
  if (code === 0) {
    console.log('消息发送成功');
  }
});

// 监听接收消息
zg.on('IMRecvBroadcastMessage', (roomID, messageList) => {
  for (const msg of messageList) {
    console.log(`${msg.fromUser.userID}: ${msg.message}`);
  }
});

捐赠礼物（自定义消息）

类似地，可以通过广播消息或自定义信令实现礼物、点赞等互动功能。ZEGO 的互动直播 UIKit（Live Streaming Kit）开箱即支持送礼物功能，无需额外开发。

将直播转推到 CDN 做大规模分发

当需要扩大观众规模时，可以将直播流转推到 CDN：

// 推流成功后，转推到 CDN
const cdnURL = 'rtmp://your-cdn-domain/live/stream-001';
await zg.addPublishCdnUrl(streamID, cdnURL);

CDN 转推后，观众可以通过标准 HLS/RTMP 播放器观看，适合数百万级别的并发场景。

完整 Demo 示例

以下是一个极简的完整 HTML 页面，集成推流和拉流：

<!DOCTYPE html>
<html>
<body>
  <video id="local-video" autoplay muted></video>
  <video id="remote-video" autoplay></video>

  <script type="module">
    import { ZegoExpressEngine } from 'zego-express-engine-webrtc';

    const zg = new ZegoExpressEngine(123456789, 'wss://webliveroom-xxx.zego.im/ws');

    async function init() {
      // 登录房间
      await zg.loginRoom('room-001', 'token', { userID: 'user-001' });

      // 推流
      const localStream = await zg.createZegoStream({ camera: { video: true, audio: true } });
      localStream.playVideo('#local-video');
      await zg.startPublishingStream('stream-001', localStream);

      // 拉流
      zg.on('roomStreamUpdate', async (_, type, list) => {
        if (type === 'ADD') {
          const remoteStream = await zg.startPlayingStream(list[0].streamID);
          remoteStream.playVideo('#remote-video');
        }
      });
    }

    init();
  </script>
</body>
</html>

常见问题

Web 直播最多支持多少人同时连麦？

ZEGO Express Web SDK 支持 50 路实时音视频互动，即一个房间内最多可以有 50 个用户同时推拉流。

推送的直播流可以转到第三方 CDN 吗？

可以。通过 addPublishCdnUrl 接口可以将 ZEGO 音视频云的流动态转推到您指定的 CDN 地址，支持多家 CDN 厂商同时转推。

直播聊天需要额外引入 SDK 吗？

简单的文本聊天可以使用 Express SDK 内置的广播消息功能。如果需要完整消息能力（已读回执、历史消息、离线推送、群组管理等），建议接入即时通讯 SDK（如 ZIM）。

总结

集成 ZEGO Express Web SDK 后，通过 createStream、startPublishingStream、startPlayingStream 三个核心接口即可实现基础推拉流直播。
连麦 + 混流是实现多人互动直播的关键组合，混流的输出流可用于转推 CDN 或录制存档。
聊天和礼物功能可通过 SDK 内置消息或内置 UIKit 快速接入，无需额外开发。

本文为原创稿件，版权归作者所有，如需转载，请注明出处：https://www.nxrte.com/jishu/yinshipin/69925.html