開発ガイド

接続する

配信と視聴の両方で接続する

sendrecv() を使用して接続します。

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
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 = "sorajssdk";
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 = "sorajssdk";
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 ドキュメント サイマルキャスト を参照してください。

SendRecv オブジェクトのオプション に simulcast: true を指定します

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
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 ドキュメント スポットライト を参照してください。

SendRecv オブジェクトのオプション に spotlight: true multistream: true を指定します

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
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);
});

映像・音声コーデックを指定する

SendRecv オブジェクトのオプション で指定します

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
const metadata = "";
const options = {
  multistream: true,
  audioCodecType: "OPUS",
  videoCodecType: "VP9",
};
const sendrecv = sora.sendrecv(channelId, metadata, options);

ビットレートを指定する

音声のビットレート指定は推奨しません

SendRecv オブジェクトのオプション で指定します

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
const metadata = "";
const options = {
  multistream: true,
  audioBitRate: 64,
  videoBitRate: 100,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);

映像と音声の可否を指定する

SendRecv オブジェクトのオプション で指定します

音声なし

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
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 = "sorajssdk";
const metadata = "";
const options = {
  video: false,
  multistream: true,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);

クライアントIDを指定する

接続時やサーバー認証成功時に任意の文字列を指定できる値です。 詳しくは Sora ドキュメント WebSocket 経由のシグナリング client_id を参照してください。

SendRecv オブジェクトのオプション で指定します

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
const metadata = "";
const options = {
  multistream: true,
  clientId: "clientid",
};
const sendrecv = sora.sendrecv(channelId, metadata, options);

DataChannel 経由のシグナリングを使用する

WebRTC 接続確立後に、シグナリングを WebSocket 経由から DataChannel 経由に切り替える機能です。 詳しくは Sora ドキュメント DataChannel 経由のシグナリング を参照してください。

SendRecv オブジェクトのオプション で指定します

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
const metadata = "";
const options = {
  multistream: true,
  // シグナリングを WebSocket 経由から DataChannel 経由に切り替えるかどうか
  dataChannelSignaling: true,
  // シグナリングを DataChannel 経由に切り替えたあとに WebSocket を切断するかどうか
  ignoreDisconnectWebSocket: false,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);

メッセージング機能を使用する

DataChannel を利用したデータの送受信を行える機能です。 詳しくは Sora ドキュメント メッセージング機能 も合わせて参照してください。

SendRecv オブジェクトのオプション で指定します。

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
const metadata = null;
// ConnectionOptions の dataChannels を指定する
const options = {
  multistream: true,
  dataChannelSignaling: true,
  dataChannels: [
    {
      label: "#example",
      direction: "sendrecv",
    },
  ],
}
const sendrecv = sora.sendrecv(channelId, metadata, options);

// メッセージ送信が可能な datachannel との接続が確立した場合に on datachannel イベントが発火する
sendrecv.on("datachannel", (event) => {
  // event.datachannel にメッセージ送信可能な datachannel の情報が含まれる
  const label = event.datachannel.label; // #example
  // メッセージを送信する
  sendrecv.sendMessage(label, new TextEncoder().encode("Hello world."));
});

メッセージングのみで接続することも可能です。

const debug = true;
const sora = Sora.connection("ws://192.0.2.100:5000/signaling", debug);
const channelId = "sorajssdk";
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.sendMessage('#example', new TextEncoder().encode("Hello world."));
© Copyright 2022, Shiguredo Inc. Created using Sphinx 5.1.1