WebRTC – Agora （聲網）簡介與實現音視訊通話

夢想能進BAT發表於2018-10-18
WebGo

Agora （聲網）簡介

官網： https://www.agora.io/cn/

一個專注移動端的高清實時通話雲服務解決方案。

SD-RTN（Software Defined Real-time Network）
SD-RTN（Software Defined Real-time Network）是依賴於雲端計算技術並致力於全球實時音視訊業務傳輸的“智簡”網路，覆蓋全球 200+ 國家。作為提供實時音視訊業務的 PaaS（Platform as a Service）層，SD-RTN 專注為上層（SaaS）業務開放音視訊業務的網路基礎能力，解決開發者共性問題，營造友好的開發環境，實現敏捷開發，併為實時音視訊業務打造“專網”級別沉浸式網路體驗。

音訊
高保真、3D 環繞立體聲體驗

視訊
沉浸式視覺體驗

Agora SDK
面向客戶，輕鬆適配。
Agora SDK 意在靈活將 SDK 適配在更多新的需要實時傳輸應用場景如：IoT、教育、社交、金融、網路加速等。

Agora 原生 SDK
Agora 原生 SDK 支援 iOS，Android，Windows，和 Mac 等各平臺。原生 SDK 包含了所有常用的音訊和視訊解碼器，以及連線到 Agora 全球網路，並應對掉線和不穩定網路條件的演算法。這是常用的高階 API。

Agora 基於 Web 的 SDK
Agora 基於 Web 的 SDK 使基於 Web 開發的 App 能夠實現原生應用同樣的功能。

運用場景
語音通話（一對一、多對多）
視訊通話（一對一、多對多）
互動直播（語音、視訊直播連麥互動）
互動遊戲（遊戲內建實時語音、視訊通話）
錄製（服務端錄製）
信令（呼叫、訊息傳遞、狀態同步等）

Agora （聲網）實現音視訊通話

下面實現一下音視訊通話（一對一）的實現，主要分為兩部分，一部分是視訊通話，一部分是信令邀請其他人加入頻道進行視訊通話。

這裡直接上程式碼：

建立視訊通話

// 建立Client物件
client = AgoraRTC.createClient({ mode: `live`, codec: `h264` });

// 初始化Client物件
client.init(
  `appid`, // 這裡填註冊完後的APPID
  function() {
    console.log(`AgoraRTC client 初始化成功`);

    // 加入頻道
    client.join(
      null,
      `call`, // 頻道名稱，可以自己定義
      1111, // 使用者標識id,可以自己定義。唯一就可以
      function(uid) {
        console.log(`使用者id：` + uid + ` 加入頻道成功`);

        // 建立音視訊流
        localStream = AgoraRTC.createStream({
          streamID: uid,
          audio: true,
          video: true,
          screen: false,
        });

        // 初始化本地的音視訊流
        localStream.init(
          function() {
            console.log(`獲取使用者媒體成功`);
            localStream.play(`agora_video_myself`); // 顯示本地視訊播放<div>標籤id名

            // 釋出本地音視訊流
            client.publish(localStream, function(err) {
              console.log(`釋出本地音視訊流失敗: ` + err);
            });

            client.on(`stream-published`, function(evt) {
              console.log(`釋出本地音視訊流成功`);
            });
          },
          function(err) {
            console.log(`獲取使用者媒體失敗`, err);
          }
        );

           // --------- 訂閱遠端音視訊流 --------
        // 監聽到新的視訊
        client.on(`stream-added`, function(evt) {
          var stream = evt.stream;
          console.log(`有新的音視訊流: ` + stream.getId());

          client.subscribe(stream, function(err) {
            console.log(`訂閱音視訊流失敗`, err);
          });
        });
        // 訂閱遠端視訊
        client.on(`stream-subscribed`, function(evt) {
          var remoteStream = evt.stream;
          console.log(`訂閱遠端音視訊流成功: ` + remoteStream.getId());
          remoteStream.play(`agora_video`); // 顯示遠端視訊播放<div>標籤id名
        });
      },
      function(err) {
        console.log(`加入頻道失敗`, err);
      }
    );
  },
  function(err) {
    console.log(`AgoraRTC client 初始化失敗`, err);
  }
);

信令傳送邀請

// ------------------ 載入信令 ------------------

signal = Signal(`appid`); // 這裡填註冊完後的APPID

// 登入返回 Session物件
session = signal.login(1111, `_no_need_token`); // 使用者標識id,可以自己定義。唯一就可以

// 登入成功回撥
session.onLoginSuccess = function(uid) {
  console.log(`登入信令成功回撥`, uid);

  // ------------------ 邀請人加入頻道
  const call = session.channelInviteUser2(`call`, userId); // 頻道名稱、被邀請人id
  // 對方已收到呼叫邀請回撥
  call.onInviteReceivedByPeer = function() {
    console.log(`對方已收到呼叫邀請`);
  };
  // 對方接受邀請回撥
  call.onInviteAcceptedByPeer = function() {
    console.log(`對方接受邀請`);
  };
  // 對方拒絕邀請回撥
  call.onInviteRefusedByPeer = function() {
    console.log(`對方拒絕邀請`);
  };
  // 呼叫邀請失敗回撥
  call.onInviteFailed = function() {
    console.log(`呼叫邀請失敗`);
  };
  // 對方已結束呼叫回撥
  call.onInviteEndByPeer = function() {
    console.log(`對方已結束呼叫`);
  };
  // 本地已結束呼叫回撥
  call.onInviteEndByMyself = function() {
    console.log(`本地已結束呼叫`);
  };
};

// 登入失敗回撥
session.onLoginFailed = function(ecode) {
  console.log(`登入信令失敗`, ecode);
};

// 登出回撥設定
session.onLogout = function(ecode) {
  console.log(`登出信令成功`, ecode);
};

退出時的銷燬

// 取消釋出本地音視訊流
client.unpublish(localStream, function(err) {
  console.log(`取消釋出本地音視訊流失敗` + err);
});

// 退出頻道
client.leave(
  function() {
    console.log(`退出頻道成功`);
  },
  function(err) {
    console.log(`退出頻道失敗`, err);
  }
);

//登出信令
session.logout();

其他的更多功能可以檢視官方的API

相關文章