Tips

Plugin の使い方

Core ライブラリでは Plugin を使って追加の機能を利用できます。

現在提供されている Plugin は以下の 1 種類です。

• SFU Bot

SFU Bot を例に Plugin の登録方法を以下に示します。

// SkyWayContextを作成する
const context = await SkyWayContext.Create(tokenString);
// pluginのインスタンスを作成する
const plugin = new SfuBotPlugin(); // SkyWayContextにpluginを登録する
context.registerPlugin(plugin);

各 Plugin の詳しい使い方は各 Plugin の API リファレンスを参照してください。

カメラやマイクの切り替え

Publication の replaceStream API を使うことで、Publication の Stream を変更できます。

Stream を Publish した後に Publication の Stream を別のデバイスのカメラの Stream に入れ替える方法を以下に示します。

const devices = await SkyWayStreamFactory.enumerateInputVideoDevices();
const camera = await SkyWayStreamFactory.createCameraVideoStream({ deviceId: devices[0].id });

const publication = await person.publish(camera);

const anotherCamera = await SkyWayStreamFactory.createCameraVideoStream({ deviceId: devices[1].id });
publication.replaceStream(anotherCamera);

メディア通信の状態取得（getStats）

メディア通信（WebRTC）の状態を取得する方法について説明します。

※状態取得 API の形式は今後変更される予定があります。

LocalStream

ユーザーが送信する側の Stream(LocalStream)の通信状態を取得する方法

// subscriberIdはLocalStreamを受信しているMemberのID
// subscriberIdのMemberとの通信状態が取得できる
const stats = await localStream.getStats(subscriberId);

RemoteStream

ユーザーが受信している Stream(RemoteStream)の通信状態を取得する方法

const stats = await remoteStream.getStats();

リモートの Member に Publication を Subscribe させる

Token の members scope を次のように設定することで、リモートの Member に任意の Publication を Subscribe させたり Unsubscribe させることができます。

const members = [
  {
    id: "*",
    name: "*",
    actions: ["write"],
    publication: {
      actions: ["write"],
    },
    subscription: {
      actions: ["write"],
    },
  },
];

サンプルコード

//...

const person: LocalPerson = await channel.join({ name: "alice" });

const video = await SkyWayStreamFactory.createCameraVideoStream();
const publication = await localPerson.publish(video);

const remoteMember = channel.members.find((member) => member.name === "bob");
const remoteSubscription = await remoteMember.subscribe(publication);

リモートのメンバーの Subscription の stream を参照することはできません（stream プロパティの中身は常に undefined になります）

一時的なネットワーク切断時のハンドリング

通話中に一時的なネットワーク切断が生じた際、JavaScript SDKは自動的に再接続処理を行います。

この時に生じる通信状態の変化を Publication.onConnectionStateChanged または Subscription.onConnectionStateChanged イベントから取得することができます。

Publicationの場合

const publication = await localMember.publish(video);
publication.onConnectionStateChanged.add(({state, remoteMember}) => {
  // 通信状態が変化した際に実施したい処理
});

※SFU をご利用の場合はremoteMemberを取得することはできません。

Subscriptionの場合

const { stream, subscription } = await localMember.subscribe(publication.id);
subscription.onConnectionStateChanged.add((state) => {
  // 通信状態が変化した際に実施したい処理
});

上記の例において、引数として渡される state が通信状態を示します。通信状態は以下のように変化します。

• connected
  • 接続が完了している状態
• reconnecting
  • 再接続処理中
• disconnected
  • 通信が切断され、再接続処理が行われない状態

reconnecting に遷移した後、再接続が完了した場合はconnetedの状態に戻ります。 reconnecting に遷移してから一定時間内に再接続が完了しない場合は disconnected に遷移し、再接続処理は行われない状態になります。その場合は以下の項目の手順から再接続処理を行ってください。

state の持つそれ以外の状態に関しては https://javascript-sdk.api-reference.skyway.ntt.com/core/modules.html#TransportConnectionState を参照してください。

長時間ネットワークが切断された場合(onFatalError)のハンドリング

JavaScript SDK では短時間のネットワーク切断時に自動的に再接続処理を行っています。 しかし長時間ネットワークが切断されたなどの理由で onFatalError が呼ばれるとこの処理が中断されます。 再度接続を行いたい場合はアプリケーション側での実装が必要です。

• JavaScript SDK リファレンス:onFatalError

onFatalError をうけて再接続を行う例を以下に示します。変数名はご自身のアプリケーションの定義で読み替えてください。

• SkyWayContext.onFatalError を受け取った場合、以下の操作を実施する
  • SkyWayContext.dispose で SkyWay の利用を停止する
  • SkyWayContext.Create を実施して SkyWay の利用を再開する
  • SkyWayRoom.FindOrCreate で以前入っていた Room を取得する( Room ライブラリを利用している場合)
  • room.join で Room に再参加する

/*
...
// 事前のroom.join処理
let context = await SkyWayContext.Create(tokenString);
let room = await SkyWayRoom.FindOrCreate(context, {
  type: "p2p",
  name: "YourRoomName",
});
let me = await room.join();
...
*/

context.onFatalError.add(async () => {
  context.dispose();
  context = await SkyWayContext.Create(tokenString);

  room = await SkyWayRoom.FindOrCreate(context, {
    type: "p2p",
    name: "YourRoomName",
  });
  me = await room.join();
});

ログレベルの設定と種類

SkyWayContext を作成する際に、SDK が出力するログのログレベルが設定できます。

const context = await SkyWayContext.Create(tokenString, {
  log: {
    level: "debug"
  }
});

設定可能なログレベルと説明については、JavaScript SDK リファレンスを参照してください。

アプリケーション開発時は、不具合の調査やサポートとのやり取りを円滑に行うために、ログレベルを debug に設定することをおすすめします。 アプリケーションをプロダクションで運用する際は、ログレベルを error に設定することをおすすめします。

デバイス画面を映像メディアとして利用する方法（画面共有）の実装について

クイックスタートではマイクとカメラ映像を同時に取得して publish する例が記載されていましたが、画面共有機能を容易に実現するための関数も SDK 内に用意されています。

• StreamFactory.createDisplayStreams

画面共有の実装例は次のようになります。

/*
 * 事前にメディアを表示するための要素が作られている&room(channel)にjoinしている前提で例を示します
 * const localVideo = document.getElementById("local-video");
 * const me = await room.join();
 */

const { video } = await SkyWayStreamFactory.createDisplayStreams();

video.attach(localVideo);
await localVideo.play();

await me.publish(video);

createDisplayStreams の options について補足します。

// 次のような引数と返り値を設定することができます
const { video, audio } = await SkyWayStreamFactory.createDisplayStreams({
  video: { displaySurface: 'monitor' },
  audio: true,
});

options 引数はそれぞれ次の値を渡すことができます。

• video
  • displaySurface : 共有開始前のポップアップにてデフォルトで選ばれている共有方式
    • "monitor" : 画面全体
    • "window" : 特定のウィンドウ
    • "browser" : 利用しているブラウザのタブ
• audio
  • boolean(true/false)
    • true : displaySurface: "browser" の場合にそのタブが発している音声を返り値: audio で取得できます。
      • 画面共有時のポップアップにて、「タブの音声も共有する」のトグルが利用可能になるのでユーザ側で操作が必要です。
      • この機能は一部の PC 版ブラウザのみ利用可能です。最新の対応状態については以下のリンクを確認してください。
        • mdn web docs:ブラウザの互換性 - Audio capture support
    • false : タブが発生する音声の共有機能を利用しません。
      • 画面共有時のポップアップにてトグルが出なくなります。