開発ガイド

配信者として接続する

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);

navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((mediastream) => {
  return sendonly.connect(mediastream);
});

視聴者として接続する

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);

recvonly.connect();

マルチストリームで接続する

マルチストリームとは、一つのピア接続で複数のメディアストリームを管理する機能です。 詳しくは Sora ドキュメント マルチストリーム を参照してください。

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

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);

navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((mediastream) => {
  return sendrecv.connect(mediastream);
});

マルチストリームで接続した Sendrecv オブジェクトは接続したメディアチャネル 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);
  }
});

Recvonly オブジェクトでは配信中の Sendrecv Multistream 接続を視聴可能です。

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 recvonly = sora.recvonly(channelId, metadata, options);
recvonly.connect();

recvonly.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);
  }
});

recvonly.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);
  }
});

サイマルキャストで接続する

サイマルキャスト (Simulcast) は配信時に 1 つの RTCPeerConnection から複数種類のエンコードした映像を配信する機能です。 詳しくは Sora ドキュメント サイマルキャスト を参照してください。

Sendonly オブジェクトのオプションに 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",
  simulcast: true,
};
const sendonly = sora.sendonly(channelId, metadata, options);

navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((mediastream) => {
  return sendonly.connect(mediastream);
});

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

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

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

ビットレートを指定する

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

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

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

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

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

音声なし

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