概要
agora.io Web SDKのNext Generation(バージョン4)のマイグレーションガイドを元に、
従来のWeb SDK(バージョン3)との変更点を確認します。
公式ページはこちら
クイックスタートガイド(WebSDK用(バージョン4))はこちら
変更点
１．Promiseを使用したAPIへ変更
NG(バージョン4)では、Promiseを使用してAPIをコールすることができるようになりました。
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)では、引数を個々に直接設定することができるようになりました。
// Use the Agora Web SDK
client.on("connection-state-change", e => {
console.log("current", e.curState, "prev", e.prevState);
});
// 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()を都度実行する必要がなくなりました。
// 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);
});
});
// 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()は、再生時のみコールするように変更になりました。(従来は必須設定)
// 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);
});
// 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個のみ
// Use the Agora Web SDK
client.publish(localStream, err => {
console.log("publish failed", err);
});
client.on("stream-published", () => {
console.log("publish success");
});
// 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回)コールされます。
// 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");
});
// 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)の変更点の確認でした。
