agora.io クイックスタートガイドWebSDK用(バージョン4：Next Generation)

[**agoraがよくわかる！無料セミナー実施中！>**](https://jp.vcube.com/service/agora#seminar)  

#概要
agora.io Web SDKのNext Generation(通称NG)をご紹介します。
(Web SDKの[v4.0.0](https://agoraio-community.github.io/AgoraWebSDK-NG/docs/en/release_note#v400)が2020/07/15にリリースしました。)

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

公式ページは[こちら](https://agoraio-community.github.io/AgoraWebSDK-NG/en/)

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

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

３．従来のWeb SDKに引き続き、メジャーなブラウザをサポートしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/aa3bee92-6a8d-9c4e-8ba6-a0f496ab1160.png)

#参考リンク
・[概要(Agora Web SDK NGとは？)](https://agoraio-community.github.io/AgoraWebSDK-NG/docs/en/overview.html)
・[デモ](https://agoraio-community.github.io/AgoraWebSDK-NG/demo/)
・[Githubサンプル](https://github.com/AgoraIO-Community/AgoraWebSDK-NG)
・[APIリファレンス](https://agoraio-community.github.io/AgoraWebSDK-NG/api/en/)
・[マイグレーションガイド](https://agoraio-community.github.io/AgoraWebSDK-NG/docs/en/migration_guide)



#STEP1. Agora Accountの作成とApp IDの取得
この手順は従来のWeb SDKと同じです。
参考記事：[agora.io クイックスタートガイド WebSDK用(バージョン3)](https://qiita.com/v-cube/items/b247f89859437589b0a6#step1-agora-account%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%A8app-id%E3%81%AE%E5%8F%96%E5%BE%97)

#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.[こちら](https://github.com/AgoraIO-Community/AgoraWebSDK-NG/releases)よりSDKの最新バージョンをダウンロード
2.ダウンロードしたSDKをディレクトリに保存
3.以下のコードを追加

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

##実装
※[サンプル(GitHub)](https://github.com/AgoraIO-Community/AgoraWebSDK-NG)の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);
}

```

#動作確認
※[サンプル(GitHub)](https://github.com/AgoraIO-Community/AgoraWebSDK-NG)のDemo\basicVideoCall\index.htmlを利用

1.index.htmlをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/aee3c825-7da0-1861-f811-07c39f41d715.png)

2.APPID、Channel名を入力し、Joinクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505696/a616ff40-b237-c0a5-aac2-bbf07c53cabf.png)

3.Leaveクリックで退室

agora.io Web SDKのNext Generationの概要でした。

# 最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=dd30a977b68855ceeb64)
[**agoraがよくわかる！無料セミナー実施中！**](https://jp.vcube.com/service/agora#seminar)  
[<img width="912" alt="Agoraの詳細はこちら" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5865441c-9d31-c702-3698-3aeb84927f28.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=dd30a977b68855ceeb64)