概要

agora.io Web SDKのNext Generation(通称NG)をご紹介します。
(Web SDKのv4.0.0が2020/07/15にリリースしました。)

Agora Web SDK NGは、Web SDKの次世代バージョン(ver.4.x)です。

公式ページはこちら

特徴

１．Agora Web SDKの内部アーキテクチャを大幅にリファクタリングし、APIの利便性を向上しました。
　-Promise-based APIの採用
　-Typescriptサポート

２．従来のWeb SDKで利用していた"Stream"が、”LocalTrack”、”RemoteTrack”に変更されました。

３．従来のWeb SDKに引き続き、メジャーなブラウザをサポートしています。

参考リンク

・概要(Agora Web SDK NGとは？)
・デモ
・Githubサンプル
・APIリファレンス
・マイグレーションガイド

STEP1. Agora Accountの作成とApp IDの取得

この手順は従来のWeb SDKと同じです。
参考記事：agora.io クイックスタートガイド WebSDK用(バージョン3)

STEP2. Agora Web SDKの取り込み

以下の3通りの方法があります。
Case1.npm経由
1.以下のコマンドを実行

npm install agora-rtc-sdk-ng --save

2.以下のコードを追加

index.js

import AgoraRTC from "agora-rtc-sdk-ng"
const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });

Case2.CDN経由
1.以下のコードを追加

index.html

<script src="https://download.agora.io/sdk/web/AgoraRTC_N-4.1.0.js"></script>

Case3.SDKダウンロード

1.こちらよりSDKの最新バージョンをダウンロード
2.ダウンロードしたSDKをディレクトリに保存
3.以下のコードを追加

index.html

<script src="./AgoraRTC_N-4.1.0.js"></script>

実装

※サンプル(GitHub)のDemo\basicVideoCall\index.htmlを利用

1.通話開始まで
(1).createClient()をコール

basicVideoCall.js

client = AgoraRTC.createClient({ mode: "rtc", codec: "h264" });

(2).join()をコール

basicVideoCall.js

client.join(options.appid, options.channel, options.token || null)

(3).createMicrophoneAudioTrack()とcreateCameraVideoTrack()をコール

basicVideoCall.js

AgoraRTC.createMicrophoneAudioTrack(),
AgoraRTC.createCameraVideoTrack()

(4).publish()をコール

basicVideoCall.js

client.publish(Object.values(localTracks));

2.リモートユーザ側
(1).AgoraRTCClient.on("user-published")でAgoraRTCRemoteUserを取得
(2).subscribe()をコール
(3).remoteVideoTrack.play()とremoteAudioTrack.play()をコール

basicVideoCall.js

async function subscribe(user, mediaType) {
  const uid = user.uid;
  // subscribe to a remote user
  await client.subscribe(user, mediaType);
  console.log("subscribe success");
  if (mediaType === 'video') {
    const player = $(`
      <div id="player-wrapper-${uid}">
        <p class="player-name">remoteUser(${uid})</p>
        <div id="player-${uid}" class="player"></div>
      </div>
    `);
    $("#remote-playerlist").append(player);
    user.videoTrack.play(`player-${uid}`);
  }
  if (mediaType === 'audio') {
    user.audioTrack.play();
  }
}

function handleUserPublished(user, mediaType) {  
  const id = user.uid;
  remoteUsers[id] = user;
  subscribe(user, mediaType);
}