チュートリアル¶
本章では 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 へアクセスして、ブラウザのタブをふたつ以上開いて、双方向で配信ができていれば成功です。