JavaScript SDK

Tips

This page has not been translated yet.

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 に設定することをおすすめします。

Quick start

Support browser