如何在 Web/H5 端开播弹幕游戏(主播在浏览器开播弹幕游戏)

本文介绍，主播如何通过小游戏平台（ZEGO MiniGameEngine SDK）和实时音视频（ZEGO Express SDK）在 Web/H5 端开播弹幕游戏。

开播弹幕游戏条件

在实现主播直播弹幕游戏之前，请确保：

• 已在 ZEGO 控制台 创建项目，获取项目的 AppID，详情请参考 控制台 – 项目信息。
• 已联系 ZEGO 商务人员开通小游戏服务。
• 已在项目中集成 ZEGO MiniGameEngine SDK，详情请参考 集成 SDK。
• 已在项目中集成 ZEGO Express SDK，详情请参考实时音视频的 集成 SDK。

弹幕游戏直播实现流程

主播直播弹幕游戏的流程如下图所示：

1 （服务端）接入 ZEGO 服务端并获取 Token

1.1 接入 ZEGO 服务端

请参考 服务端 API – 调用方式 了解如何接入 ZEGO 小游戏产品的服务端，并在您的服务端上实现 获取游戏启动码，以便后续主播启动弹幕游戏前获取游戏启动码。

ZEGO 为您提供了服务端示例源码，可供参考。但为了您的数据安全，请勿将其直接用于线上生产环境。

1.2 在服务端生成 Token

当您的用户在使用 ZEGO 小游戏服务时，ZEGO 服务端会根据用户初始化 SDK 时携带的 Token 参数判断用户是否有权限，避免因权限控制缺失或操作不当引发的风险问题。

2 （客户端）初始化

2.1 创建 ZegoExpressEngine 并登录 RTC 房间

请参考实时音视频的 实现视频通话 – 创建引擎，创建 ZegoExpressEngine。

完成初始化之后，登录 RTC 房间。

2.2 初始化 ZEGO MiniGameEngine SDK

调用 init 接口，传入申请到的 AppID、您服务端生成的 Token、自定义的用户 ID 和用户名称、以及头像图片 URL 参数，初始化 ZEGO MiniGameEngine SDK。

示例代码如下：

const appID = ;  // 项目唯一标识 AppID，Number 类型，请从 ZEGO 控制台获取
const token = ""; // 从您的服务器获取到的 Token
const userInfo: ZegoUserInfo = {
    userId: "your user ID", // 自定义的用户 ID，必选，需要与生成 Token 的 userID 保持一致
    userName: "your user name", // 自定义的用户名称，必选
    avatar: "your user avatar", // 用户头像 URL，传输协议需为 HTTPS，可选
}
let instance = null;
await ZegoMiniGameEngine.init(appID, token, userInfo)
    .then((result) => {
        // 初始化成功
        result && (instance = result);
    })
    .catch((error) => {
        // 初始化失败
        console.log(`errorCode: ${error.errorCode}, message: ${error.message}`);
    });

2.3 设置游戏父容器并注册监听弹幕游戏事件

调用 setCloudGameContainer 设置游戏父容器，以便后续启动游戏。调用 on 接口注册监听 cloudGameError（弹幕游戏事件），相关事件在启动弹幕游戏后通过 ZegoEventHandler 回调返回。

示例代码如下：

// 设置弹幕游戏父容器，作为展示游戏的区域
// '#cloudGame' 需为集成 SDK 时规定的 div 的 ID
instance.setCloudGameContainer('#cloudGame');

// 设置事件代理
instance.on('cloudGameError', (data) => {
    // 弹幕游戏返回错误
});

3 （客户端）主播开始游戏

3.1 获取游戏列表

调用 getGameList 接口，传入 4（即 GameModeCloudGame，弹幕游戏），指定游戏模式为弹幕游戏模式，获取弹幕游戏列表，在列表中选择想玩的弹幕游戏 ID。

如下代码展示如何获取弹幕游戏模式的游戏列表：

// 获取弹幕游戏列表
// 指定第 1 个参数（gameMode）为 4，表示列表中的游戏的模式为弹幕游戏
instance.getGameList(4).then((res) => {
    // 返回查询数据
});

3.2 获取游戏启动码

确定需要玩的游戏后，主播还需要获取相应的游戏启动码。以上场景的核心能力，您已在接入 ZEGO 服务端实现了。此时，您需要自行实现如何在客户端向您的后台发起请求。

3.3 启动弹幕游戏

调用 startCloudGame 接口，传入游戏房间 ID 和游戏 ID，启动游戏。

const gameID = "your game ID"; // 游戏ID
const roomID = "your room ID"; // 游戏房间 ID，建议与您的业务房间 ID 保持一致

// 设置游戏的配置，选填
const gameConfig =  {
    // 此处可以传入游戏启动码和其他参数，参数格式视游戏而不同，请联系 ZEGO 技术支持。
    // （建议）如果此处输入游戏启动码，则在 startCloudGame 接口调用完成后，游戏自动开始。
    // 如果为空，则在 startCloudGame 接口调用完后，游戏内会要求用户输入游戏启动码。
    runningParameters: "游戏启动码",
};
// 开始游戏
instance.startCloudGame(gameID, roomID, gameConfig)
    .then((result) => {
        // 返回运行结果
    })
    .catch((error) => {
        // 启动弹幕游戏失败
        console.log(`errorCode: ${error.errorCode}, message: ${error.message}`);
    });

3.4 转推弹幕游戏视频至 RTC 房间

游戏启动后，调用 startPublishCloudGameStream 接口，将弹幕游戏视频流转推到 RTC 房间时。

const gameID = "your game ID"; // 游戏 ID 
const roomID = "your room ID"; // 游戏房间 ID，建议与您的业务房间 ID 保持一致
const streamID = "your stream ID"; // 流 ID，长度不超过 256 的字符串，由您自定义
                              // 仅支持数字，英文字符 和 '-', '_'。
                              // 在同一个 AppID 下，开发者需要保证“streamID” 全局唯一，如果不同用户各推了一条 “streamID” 相同，后推流的用户会推流失败。
instance.startPublishCloudGameStream(gameID, roomID, streamID)
    .then((res)=>{
        if (res.code === 0) {
            // 转推成功
        } else {
            // 转推失败
        }
    });

4 （客户端）主播停止游戏

主播需要先停止转推，再停止弹幕游戏。

4.1 停止转推

当需要停止转推游戏视频流时，请调用 stopPublishCloudGameStream 接口。

const gameID = "your game ID"; // 游戏 ID 
const roomID = "your room ID"; // 游戏房间 ID，建议与您的业务房间 ID 保持一致
const streamID = "your stream id"; // 流ID
instance.stopPublishCloudGameStream(gameID, roomID, streamID)
    .then((res)=>{
        if (res.code === 0) {
            // 停止转推成功
        } else {
            // 停止转推失败
        }
    });

4.2 停止弹幕游戏

当需要停止游戏时，调用 stopCloudGame 接口停止弹幕游戏。

示例代码如下：

const gameID = "your game ID"; // 游戏 ID 
const roomID = "your room ID"; // 游戏房间 ID，建议与您的业务房间 ID 保持一致
instance.stopCloudGame(gameID, roomID)
    .then((result) => {
        // 停止弹幕游戏结果
    })
    .catch(()=>{
        // 停止弹幕游戏失败
        console.log(`errorCode: ${error.errorCode}, message: ${error.message}`);
    });

5 （客户端）反初始化

如果不再需要开播弹幕游戏，可以通过退出 RTC 房间、销毁 ZegoExpressEngine 以及反初始化 ZEGO MiniGameEngine SDK，以释放资源。

5.1 退出 RTC 房间

请参考实时音视频的 实现视频通话 – 退出房间，完成退出 RTC 房间。

5.2 销毁 ZegoExpressEngine

请参考实时音视频的-实现视频通话 – 销毁引擎，完成销毁。

5.3 反初始化 ZEGO MiniGameEngine SDK

调用 unInit 接口反初始化 ZEGO MiniGameEngine SDK。

示例代码如下：

instance.unInit();

通过以上步骤就可在 Web/H5 端开播弹幕游戏了。

延申阅读：主播在 PC 端开播弹幕游戏