如何用云巴实现弹幕功能

在云巴官网的《视频直播弹幕互动》案例中,介绍了为什么云巴非常适合应用于视频直播的弹幕、点赞等场景。

本文主要介绍如何使用云巴的 JavaScript SDK 来实现弹幕功能(可参考案例的 GitHub 页)。

如果你想实现 iOS 系统的视频直播 App,可参考云巴 iOS 视频直播弹幕案例的 GitHub 页。

第一步 注册账号

打开 云巴官方网站,注册并登录。

第二步 创建新应用

登录后,点击界面右上角 “我的应用 --> 创建新应用”,填写您的视频直播应用的名称、应用包名等内容。详见 Portal 的说明文档

创建后,您会在应用详情页面看到该应用的 AppKey

第三步 下载 SDK

在云巴官网的 开发者页面 或云巴的 Github 上找到所需平台的 SDK,并下载。

每种 SDK 的文件包内都包含一个 Demo,用来演示主要 API 的用法和功能。 建议您从运行 Demo 开始熟悉云巴的 SDK,详见各个 SDK 的 Demo 运行的文档。

第四步 集成 SDK

将云巴 SDK 集成到您的应用中(此时会用到第二步中的 AppKey)。

我们以 云巴视频直播案例 所使用的 JavaScript SDK 为例,介绍一下集成 SDK 的步骤:

1. 引入 SDK

Yunba JavaScript SDK 依赖于 Socket.IO,所以要先引入 Socket.IO。 请参考(SDK 中的)Demo 分别引入 Socket.IO 和 yunba-js-sdk。

2. 创建 Yunba 实例

用 “第二步” 中获取到的 AppKey 创建 Yunba 实例。

...
window.yunba = new Yunba({
  server: 'sock.yunba.io',
  port: 3000,
  appkey: APPKEY // 这里是您在 “第二步” 中获取到的 AppKey。
});

3. 初始化、连接消息服务器、订阅 “弹幕” 频道

假设弹幕的频道名称为 TOPIC_BULLET

...

yunba.init(function(success) {
  if (success) {
    var cid = Math.random().toString().substr(2);

    // 连接云巴服务器
    yunba.connect_by_customid(cid,
      function(success, msg, sessionid) {
        if (success) {
          console.log('sessionid:' + sessionid);

          // 设置收到信息回调函数
          yunba.set_message_cb(yunba_msg_cb);

            // 订阅弹幕 TOPIC
            yunba.subscribe({
                'topic': TOPIC_BULLET
              },
              function(success, msg) {
                if (success) {
                  console.log('subscribed');
                } else {
                  console.log(msg);
                }
            });
        } else {
          console.log(msg);
        }
      });
  } else {
    console.log('yunba init failed');
  }
});

4. 发布 “弹幕”

用下面的几行代码就可以发布弹幕:

...

var bullet = {
  "mode": mode,
  "text": text,
  "color": color,
  "dur": dur
};

yunba.publish({
    topic: TOPIC_BULLET,
    msg: JSON.stringify(bullet)
  },
  function(success, msg) {
    if (!success) {
      console.log(msg);
    }
  }
);

更详细的代码示例,请参考该案例的 GitHub 页,以及 iOS 视频直播 App Demo 的 GitHub 页。