agora.io Web SDK用(バージョン4：Next Generation)の変更点

#概要
agora.io Web SDKのNext Generation(バージョン4)のマイグレーションガイドを元に、
従来のWeb SDK(バージョン3)との変更点を確認します。

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

クイックスタートガイド(WebSDK用(バージョン4))は[こちら](https://qiita.com/v-cube/items/dd30a977b68855ceeb64)

#変更点
##１．Promiseを使用したAPIへ変更
NG(バージョン4)では、Promiseを使用してAPIをコールすることができるようになりました。

```sample.js
async function join() {
  // Use the Agora Web SDK NG
  const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
  try {
    const uid = await client.join("APPID", "Token", "Channel", null);
    console.log("join success");
  } catch (e) {
    console.log("join failed", e);
  }
}
```

##２．Streamから”Track”への変更

従来のWeb SDK(バージョン3)ではStreamを扱っていましたが、
NG(バージョン4)からはTrackに変更になりました。

[Trackの良い点]
StreamをTrackに分割することで、audioとvideoを別々に制御できる

[Trackのイメージ]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/9f74afbe-38cd-0da2-f8c8-2d0c73c902ca.png" width=85%>

##３．Channelイベントの改善

###・イベント名の変更
イベント名の一貫性、可読性を高めるための改善をしました。
たとえば、
　"onTokenPrivilegeWillExpire"　→　"token-privilege-will-expire"
　"peer-online"（又は"peer-offline"）→　"user-joined"（又は"user-left"）
　"stream-added"（又は"stream-removed"）→　"user-published"（又は"user-unpublished"）

###・イベント引数の変更
イベントの引数を直接設定できるように改善しました。

たとえば、従来(バージョン3)では、引数eのプロパティ(curState、prevState)を参照していましたが、
NG(バージョン4)では、引数を個々に直接設定することができるようになりました。

```before.js
// Use the Agora Web SDK
client.on("connection-state-change", e => {
  console.log("current", e.curState, "prev", e.prevState);
});
```

```after.js
// Use the Agora Web SDK NG
client.on("connection-state-change", (curState, prevState) => {
  console.log("current", curState, "prev", prevState);
});
```

###・イベント通知構造の変更

従来(バージョン3)では、切断、再入室のたびに、同じイベント情報を繰り返し通知してしまうことで、わかりづらいという問題がありました。
NG(バージョン4)では、変更のあった情報のみを通知するように改善しました。
これにより通知が直観的でわかりやすくなりました。

例えば、
1. A、B、C、DがChannelに入室
2. B、C、DのみPublish
3. Aが切断、再接続中
4. Bが退室、CがUnPublish
5. Aが再入室

このとき、Aに表示するイベント情報としては、
従来(バージョン3)では、再入室のたびに同じ情報が繰り返し表示されていました。
・C、DがChannelに入室したこと
・DがPublishしたこと
(これだと変更された情報が分かりづらい)

NG(バージョン4)では、変更した情報のみを表示するようになりました。
・Bが退室したこと
・CがUnpublishしたこと
(変更された情報のみが通知されるため分かりやすい)

#API変更例

##Join

[変更点]
・init()がなくなり、join()の引数にAPPIDが追加されました。
・異なるAPPIDでChannelにJoinする場合、CreateClient()を都度実行する必要がなくなりました。

```before.js
// Use the Agora Web SDK
const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
client.init("APPID", () => {
  client.join("Token", "Channel", null, (uid) => {
    console.log("join success", uid);
  }, (e) => {
    console.log("join failed", e);
  });
});
```

```after.js
// Use the Agora Web SDK NG
const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
try {
  const uid = await client.join("APPID", "Token", "Channel", null);
  console.log("join success");
} catch (e) {
  console.log("join failed", e);
}
```

##audio/video Trackの作成

[変更点]
・CreateStream()、init()がなくなり、Track用APIが追加されました。
　-audioはcreateMicrophoneAudioTrack()
　-videoはcreateCameraVideoTrack()
・play()は、再生時のみコールするように変更になりました。(従来は必須設定)

```before.js
// Use Agora Web SDK
const localStream = AgoraRTC.createStream({ audio: true, video: true });
localStream.init(() => {
  console.log("init stream success");
  localStream.play("DOM_ELEMENT_ID", { muted: true });
}, (e) => {
  console.log("init local stream failed", e);
});
```

```after.js
// Use Agora Web SDK NG
const localAudio = await AgoraRTC.createMicrophoneAudioTrack();
const localVideo = await AgoraRTC.createCameraVideoTrack();
console.log("create local audio/video track success");

localVideo.play("DOM_ELEMENT_ID");
```

##ローカルTrackのPublish
[変更点]
・setClientRole()設定が必須になりました。(従来は省略が可能でした)
・Trackを追加したい場合は、publish()を繰り返しコールして追加することができます。
・audioは複数個、videoは1個のみ

```before.js
// Use the Agora Web SDK
client.publish(localStream, err => {
  console.log("publish failed", err);
});
client.on("stream-published",  () => {
  console.log("publish success");
});
```

```after.js
// Use the Agora Web SDK NG
try {
  // Remove this line if the channel profile is not live broadcast.
  await client.setClientRole("host");
  await client.publish([localAudio, localVideo]);
  console.log("publish success");
} catch (e) {
  console.log("publish failed", e);
}
```



##リモートTrackのSubscribe
[変更点]
・stream-added, stream-removed, stream-updatedが"user-published"、"user-unpublished"に変更になりました。
・"user-published"は、MediaTypeの個数分(video、audioがあれば2回)コールされます。

```before.js
// Use the Agora Web SDK
client.on("stream-added", e => {
  client.subscribe(e.stream, { audio: true, video: true }, err => {
    console.log("subscribe failed", err);
  });
});

client.on("stream-subscribed", e => {
  console.log("subscribe success");
  e.stream.play("DOM_ELEMENT_ID");
});
```

```after.js
// Use the Agora Web SDK NG
client.on("user-published", async (remoteUser, mediaType) => {
  await client.subscribe(remoteUser, mediaType);
  if (mediaType === "video") {
    console.log("subscribe video success");
    remoteUser.videoTrack.play("DOM_ELEMENT_ID");
  }
  if (mediaType === "audio") {
    console.log("subscribe audio success");
    remoteUser.audioTrack.play();
  }
});
```

#参考リンク
・[概要(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)
・[API変更リスト](https://agoraio-community.github.io/AgoraWebSDK-NG/docs/en/migration_guide#api-change-list)


agora.io Web SDK用(バージョン4：Next Generation)の変更点の確認でした。

# 最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=394abef1fcdf818decb3)
[**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))