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

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

公式ページはこちら

クイックスタートガイド(WebSDK用(バージョン4))はこちら

#変更点
##１．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のイメージ]

##３．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とは？)
・デモ
・Githubサンプル
・APIリファレンス
・マイグレーションガイド
・API変更リスト

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

最後に

agora.ioに関するお問い合わせはこちらから
agoraがよくわかる！無料セミナー実施中！
)