只需四個步驟幾行代碼，即可快速實現直播彈幕功能

在視頻直播中，互動是不可缺少、不容小覷的內容，主要包括發送彈幕、打賞、點贊等。想要快速實現這些功能，需要進行怎樣的操作呢？

其實，實現直播彈幕功能只需“四個步驟”和“幾行代碼”！

現在，我們使用雲巴 Javascript SDK ，手把手教你實現直播彈幕功能吧！

 

 步驟流程圖

 

 

步驟一：注冊雲巴賬號

打開網址（https://yunba.io/），或直接搜索“雲巴”，進行注冊並登錄。

 

 

步驟二：在雲巴 Portal 創建應用

登錄后，點擊側欄 “應用管理” ，再點擊“創建應用”，填寫您的視頻直播應用的名稱、應用包名等內容。

如圖所示：

 

 

創建后，您會在“應用列表”→“管理”→“應用詳情”內，看到該應用的 AppKey 和 SecretKey 等信息。

 

步驟三：下載雲巴 Javascript SDK

在雲巴官網（https://yunba.io/）頂菜單欄“開發者資源”→“SDK下載”，或在雲巴的 Github 頁面（https://github.com/yunba）找到 Javascript SDK 並下載。

 

步驟四：集成 Javascript SDK

將 Javascript SDK 集成到你的應用中，此處會用到 Appkey。

 

1.引入 Javascript SDK

由於 Yunba JavaScript SDK 依賴於 Socket.IO，所以要確保 Socket.IO 先被引入：

<script type="text/javascript" src="javascripts/socket.io-1.3.5.min.js"></script>
<script type="text/javascript" src="../yunba-js-sdk.js"></script>

 

2.創建雲巴實例

使用在雲巴 Portal 上創建應用獲取的 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);
    }
  }
);

 

同理，你還可以通過訂閱“點贊”、“統計信息”等頻道，實現點贊、在線信息統計等功能，每種功能只需“幾行代碼”即可輕松實現。

具體可參考：https://github.com/yunbademo/yunba-live-video/blob/master/main.js

雲巴視頻直播案例的效果圖如下：

雲巴視頻直播案例的在線演示地址：http://yunbademo.github.io/yunba-live-video/

基於 MQTT，使用 Erlang 編寫的雲巴實時通信雲服務，通過 Pub/Sub 模型的雙向實時系統，可為直播平台實現所有的實時消息傳輸。

使用雲巴的實時通信雲服務構建的直播聊天室，具備以下特征或功能：

1.直播聊天室無人數上限；

2.支持接入任意直播接口；

3.可查看聊天室歷史消息記錄；

4.支持聊天室消息自定義，打賞、點贊、獻花等功能可輕松實現；

5.聊天室數據支持 SSL 安全協議加密；

6.穩定的消息高並發能力；

7.消息控制在 200 毫秒的延遲內；

此外，雲巴還可根據客戶需要提供更為優秀的定制服務，以滿足直播平台的功能需求。對於初創團隊，雲巴可提供每月 100 萬次的免費 API 調用，以及每月 100 萬次的免費推送。