開発ガイド¶
接続する¶
配信と視聴の両方で接続する¶
sendrecv() を使用して接続します。
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
multistream: true,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
async function connect() {
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
await sendrecv.connect(mediaStream);
}
connect();
マルチストリームで接続した Connection オブジェクト は接続したチャネル ID に MediaStream が追加、削除されるとイベントハンドラが呼ばれます。イベントハンドラを利用して追加、削除された MediaStream を処理します。
sendrecv.on('track', (event) => {
const stream = event.streams[0];
const remoteVideos = document.querySelector('#remote-videos');
const remoteVideoId = 'remote-video-' + stream.id;
if (!remoteVideos.querySelector('#' + remoteVideoId)) {
const remoteVideo = document.createElement('video');
remoteVideo.id = remoteVideoId;
remoteVideo.autoplay = true;
remoteVideo.srcObject = stream;
remoteVideos.appendChild(remoteVideo);
}
});
sendrecv.on('removetrack', (event) => {
const remoteVideoId = 'remote-video-' + event.target.id;
const remoteVideo = document.querySelector('#' + remoteVideoId);
const remoteVideos = document.querySelector('#remote-videos');
if (remoteVideo) {
remoteVideos.removeChild(remoteVideo);
}
});
実際に動作するサンプルは sora-js-sdk/examples/sendrecv.html
配信者として接続する¶
sendonly() を使用して接続します。
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const sendonly = sora.sendonly(channelId, metadata);
async function connect() {
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
await sendonly.connect(mediaStream);
}
connect();
実際に動作するサンプルは sora-js-sdk/examples/sendonly.html
視聴者として接続する¶
recvonly() を使用して接続します。
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const recvonly = sora.recvonly(channelId, metadata);
async function connect() {
await recvonly.connect(mediaStream);
}
connect();
実際に動作するサンプルは sora-js-sdk/examples/recvonly.html
サイマルキャストで接続する¶
サイマルキャスト (Simulcast) は配信時に 1 つの RTCPeerConnection から複数種類のエンコードした映像を配信する機能です。 詳しくは Sora ドキュメント サイマルキャスト を参照してください。
オプション に simulcast: true
を指定します
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
videoCodecType: 'VP8',
multistream: true,
simulcast: true,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
async function connect() {
const mediaStream = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
sendrecv.connect(mediaStream);
}
スポットライトで接続する¶
スポットライト (Spotlight) は一定の音量を超えて音声を発している参加者の場合は音声や高画質映像を、それ以外の参加者は音声のない低画質映像を配信する機能です。 詳しくは Sora ドキュメント スポットライト を参照してください。
オプション に spotlight: true
multistream: true
を指定します
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
spotlight: true,
multistream: true,
videoCodecType: 'VP8',
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((mediastream) => {
return sendrecv.connect(mediastream);
});
音声や映像コーデックを指定する¶
音声や映像のコーデックタイプは オプション で指定します
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
multistream: true,
// 音声コーデックに Opus を利用する
audioCodecType: 'OPUS',
// 映像コーデックに VP9 を利用する
videoCodecType: 'VP9',
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
音声や映像のビットレートを指定する¶
音声のビットレート指定は推奨しません
音声や映像のビットレートは オプション で指定します
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
multistream: true,
audioBitRate: 64,
videoBitRate: 100,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
音声ビットレートに指定できる範囲は 6-510 です
映像ビットレートに指定できる範囲は 1-30000 です
映像と音声の可否を指定する¶
オプション で指定します
音声なし
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
audio: false,
multistream: true,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
映像なし
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
video: false,
multistream: true,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
sendrecv.connect();
クライアントIDを指定する¶
接続時やサーバー認証成功時に任意の文字列を指定できる値です。 詳しくは Sora ドキュメント WebSocket 経由のシグナリング client_id を参照してください。
オプション で指定します
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
multistream: true,
// client-id に xyz を指定する
// client-id は重複可能
clientId: 'xyz',
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
DataChannel 経由のシグナリングを使用する¶
WebRTC 接続確立後に、シグナリングを WebSocket 経由から DataChannel 経由に切り替える機能です。 詳しくは Sora ドキュメント DataChannel 経由のシグナリング を参照してください。
オプション で指定します
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
multistream: true,
// シグナリングを WebSocket 経由から DataChannel 経由に切り替えるかどうか
dataChannelSignaling: true,
// シグナリングを DataChannel 経由に切り替えたあとに WebSocket を切断するかどうか
ignoreDisconnectWebSocket: false,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
sendrecv.connect();
メッセージング機能を使用する¶
DataChannel を利用したデータの送受信を行える機能です。 詳しくは Sora ドキュメント メッセージング機能 も合わせて参照してください。
オプション で指定します。
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = null;
const options = {
multistream: true,
// メッセージング機能を利用するには、
// データチャネルを利用したシグナリングを有効にする必要がある
dataChannelSignaling: true,
dataChannels: [
{
// メッセージングのラベルは # から始める必要がある
label: '#example',
// メッセージングの方向、sendrecv は送受信可能
// sendonly の場合は送信のみ可能
// recvonly の場合は受信のみ可能
direction: 'sendrecv',
},
],
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
sendrecv.connect();
// メッセージ送信が可能な datachannel との接続が確立した場合に on datachannel イベントが発火する
sendrecv.on('datachannel', (event) => {
// event.datachannel にメッセージ送信可能な datachannel の情報が含まれる
const label = event.datachannel.label; // #example
console.log('ondatachannel', label);
// メッセージを送信する
sendrecv.sendMessage(label, new TextEncoder().encode('Hello world.'));
});
// メッセージを受信した際に on message イベントが発火する
sendrecv.on('message', (event) => {
const label = event.label;
const data = event.data;
console.log('onmessage', label, data);
});
メッセージングのみで接続することも可能です。
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = null;
// ConnectionOptions の dataChannels を指定する
const options = {
audio: false,
video: false,
multistream: true,
dataChannelSignaling: true,
dataChannels: [
{
label: '#example',
direction: 'sendrecv',
},
],
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
sendrecv.connect();
// メッセージを送信する
sendrecv.sendMessage('#example', new TextEncoder().encode('Hello world.'));