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

在視頻直播中,互動是不可缺乏、不容小覷的內容,主要包括髮送彈幕、打賞、點贊等。想要快速實現這些功能,須要進行怎樣的操做呢?javascript

其實,實現直播彈幕功能只需「四個步驟」和「幾行代碼」!java

如今,咱們使用雲巴 Javascript SDK ,手把手教你實現直播彈幕功能吧!git

步驟流程圖

步驟一:註冊雲巴帳號
打開網址(https://yunba.io/),或直接搜索「雲巴」,進行註冊並登陸。github

步驟二:在雲巴 Portal 建立應用
登陸後,點擊側欄 「應用管理」 ,再點擊「建立應用」,填寫您的視頻直播應用的名稱、應用包名等內容。安全

如圖所示:服務器

圖片描述

建立後,您會在「應用列表」→「管理」→「應用詳情」內,看到該應用的 AppKey 和 SecretKey 等信息。session

步驟三:下載雲巴 Javascript SDK
在雲巴官網(https://yunba.io/)頂菜單欄「開發者資源」→「SDK下載」,或在雲巴的 Github 頁面(https://github.com/yunba)找到 Javascript SDK 並下載。併發

步驟四:集成 Javascript SDK
將 Javascript SDK 集成到你的應用中,此處會用到 Appkey。app

1.引入 Javascript SDK
因爲 Yunba JavaScript SDK 依賴於 Socket.IO,因此要確保 Socket.IO 先被引入:dom

<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/...

雲巴視頻直播案例的效果圖以下:

圖片描述

雲巴視頻直播案例的在線演示地址:http://yunbademo.github.io/yu...

基於 MQTT,使用 Erlang 編寫的雲巴實時通訊雲服務,經過 Pub/Sub 模型的雙向實時系統,可爲直播平臺實現全部的實時消息傳輸。

使用雲巴的實時通訊雲服務構建的直播聊天室,具有如下特徵或功能:
1.直播聊天室無人數上限;
2.支持接入任意直播接口;
3.可查看聊天室歷史消息記錄;
4.支持聊天室消息自定義,打賞、點贊、獻花等功能可輕鬆實現;
5.聊天室數據支持 SSL 安全協議加密;
6.穩定的消息高併發能力;
7.消息控制在 200 毫秒的延遲內;

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

相關文章
相關標籤/搜索