チュートリアル¶

本章では Sora JavaScript SDK を使って音声と映像を送受信できるプリケーションを作成します。

プロジェクトの作成¶

開発環境ツールとして Vite を利用します。無理に Vite を利用する必要は無く、慣れたツールを利用してください。

パッケージマネージャーとしては pnpm を利用していますが、 npm または yarn でも問題ありません。

$ pnpm create vite@latest
✔ Project name: … sora-js-sdk-tutorial
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /private/tmp/sora-js-sdk-tutorial...

Done. Now run:

  cd sora-js-sdk-tutorial
  pnpm install
  pnpm run dev

tree
.
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── counter.ts
│   ├── main.ts
│   ├── style.css
│   ├── typescript.svg
│   └── vite-env.d.ts
└── tsconfig.json

sora-js-sdk の追加¶

$ pnpm add -D sora-js-sdk

vite と typescript を最新にする¶

$ pnpm up vite@latest typescript@latest

index.html の変更¶

local-video は自分が取得した映像を出力する
remote-videos は他の映像を表示する

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + TS + Sora JS SDK</title>
</head>

<body>
  <video id="local-video" autoplay="" playsInline="" controls="" muted=""></video>
  <hr />
  <div id="remote-videos"></div>

  <script type="module" src="./src/main.ts"></script>
</body>

</html>

main.ts の変更¶

wss://sora.example.com/signaling の部分をご自身の環境に合わせて変更してください。

import Sora from "sora-js-sdk";

const connectToSora = async () => {
  // カメラデバイスからストリームを取得
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });

  const debug = true;
  // シグナリング URL を指定する
  const sora = Sora.connection("wss://sora.example.com/signaling", debug);
  const channelId = "sora-js-sdk";
  // アクセストークンを指定する場合はここで
  // {access_token: "<access_token>"} を指定しする
  const metadata = "";
  const options = {
    multistream: true,
  };
  const sendrecv = sora.sendrecv(channelId, metadata, options);

  sendrecv.on("track", (event) => {
    const stream = event.streams[0];
    const remoteVideoId = `remote-video-${stream.id}`;
    if (!document.querySelector(`#${remoteVideoId}}`)) {
      const video = document.createElement("video");
      video.id = remoteVideoId;
      video.autoplay = true;
      video.playsInline = true;
      video.srcObject = stream;
      document.querySelector("#remote-videos")!.appendChild(video);
    }
  });

  sendrecv.on("removetrack", (event) => {
    // rmeovetrack は MediaStream で発火する
    const target = event.target as MediaStream;
    const remoteVideo = document.querySelector(`#remote-video-${target.id}`);
    if (remoteVideo) {
      // target は mediaStream なので target.id は mediaStream.id と同じ
      remoteVideo.remove();
    }
  });

  // ここで Sora へ接続を試みる
  await sendrecv.connect(stream);
  document.querySelector<HTMLVideoElement>("#local-video")!.srcObject = stream;
};

connectToSora();

起動¶

$ pnpm run dev
VITE v4.4.4  ready in 76 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

Local へアクセスして、ブラウザのタブをふたつ以上開いて、双方向で配信ができていれば成功です。

CodeSandbox で動作を確認する。