Skip to content

Commit

Permalink
コード整理
Browse files Browse the repository at this point in the history
  • Loading branch information
@voluntas
voluntas committed Jan 11, 2025
1 parent 7cadc09 commit e4eb9ef
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 161 deletions.
28 changes: 20 additions & 8 deletions recvonly/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,33 @@
<head>
<meta charset="utf-8">
<link rel="icon" href="data:,">
<title>Recvonly サンプル</title>
<title>受信のみサンプル</title>
</head>

<body>
<div class="container">
<h1>Recvonly サンプル</h1>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
<button id="get-stats">getStats</button><br />
<div id="connection-id"></div>
<h2>受信のみサンプル</h2>
<p>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
</p>
<p>
<span>channel_id:</span>
<span id="channel-id"></span>
<br />
<span>session_id:</span>
<span id="session-id"></span>
<br />
<span>connection_id:</span>
<span id="connection-id"></span>
</p>
<div style="display: flex;">
<div id="remote-videos"></div>
</div>
<div id="stats-report" style="white-space: pre-wrap; font-family: monospace;"></div>
<div id="stats-report-json"></div>
<p>
<button id="get-stats">getStats</button>
<pre id="stats-report-json"></pre>
</p>
</div>

<script type="module" src="./main.ts"></script>
Expand Down
86 changes: 39 additions & 47 deletions recvonly/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,24 @@ import Sora, {
type SoraConnection,
type SignalingNotifyMessage,
type ConnectionSubscriber,
type ConnectionOptions,
} from "sora-js-sdk";
import { generateJwt } from "../src/misc";

document.addEventListener("DOMContentLoaded", () => {
// 環境変数の読み込み
const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX;
const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX;
const secretKey = import.meta.env.VITE_SECRET_KEY;
const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || "";
const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
const secretKey = import.meta.env.VITE_SECRET_KEY || "";

// パラメータから channelName を取得
const urlParams = new URLSearchParams(window.location.search);
const channelName = urlParams.get("channelName") || "";
const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;

// Sora クライアントの初期化
const client = new SoraClient(
signalingUrl,
channelIdPrefix,
channelIdSuffix,
secretKey,
);
const client = new SoraClient(signalingUrl, channelId, secretKey);

document.querySelector("#connect")?.addEventListener("click", async () => {
await client.connect();
Expand All @@ -30,29 +31,18 @@ document.addEventListener("DOMContentLoaded", () => {

document.querySelector("#get-stats")?.addEventListener("click", async () => {
const statsReport = await client.getStats();
const statsDiv = document.querySelector("#stats-report") as HTMLElement;
const statsReportJsonDiv = document.querySelector("#stats-report-json");
if (statsDiv && statsReportJsonDiv) {
let statsHtml = "";
const statsReportJson: Record<string, unknown>[] = [];
for (const report of statsReport.values()) {
statsHtml += `<h3>Type: ${report.type}</h3><ul>`;
const reportJson: Record<string, unknown> = {
id: report.id,
type: report.type,
};
for (const [key, value] of Object.entries(report)) {
if (key !== "type" && key !== "id") {
statsHtml += `<li><strong>${key}:</strong> ${value}</li>`;
reportJson[key] = value;
}
}
statsHtml += "</ul>";
statsReportJson.push(reportJson);
}
statsDiv.innerHTML = statsHtml;
// データ属性としても保存（オプション）
statsDiv.dataset.statsReportJson = JSON.stringify(statsReportJson);
const statsReportJson: Record<string, unknown>[] = [];
for (const report of statsReport.values()) {
statsReportJson.push(report);
}
const statsReportJsonElement =
document.querySelector<HTMLPreElement>("#stats-report-json");
if (statsReportJsonElement) {
statsReportJsonElement.textContent = JSON.stringify(
statsReportJson,
null,
2,
);
}
});
});
Expand All @@ -61,24 +51,19 @@ class SoraClient {
private debug = false;

private channelId: string;
private options: object = {};
private options: ConnectionOptions;

private secretKey: string;

private sora: SoraConnection;
private connection: ConnectionSubscriber;

constructor(
signalingUrl: string,
channelIdPrefix: string,
channelIdSuffix: string,
secretKey: string,
) {
this.sora = Sora.connection(signalingUrl, this.debug);

this.channelId = `${channelIdPrefix}:recvonly:${channelIdSuffix}`;
constructor(signalingUrl: string, channelId: string, secretKey: string) {
this.channelId = channelId;
this.secretKey = secretKey;
this.options = {};

this.sora = Sora.connection(signalingUrl, this.debug);
this.connection = this.sora.recvonly(this.channelId, null, this.options);
this.connection.on("notify", this.onnotify.bind(this));
this.connection.on("track", this.ontrack.bind(this));
Expand All @@ -104,9 +89,9 @@ class SoraClient {
}
}

getStats(): Promise<RTCStatsReport> {
async getStats(): Promise<RTCStatsReport> {
if (this.connection.pc === null) {
return Promise.reject(new Error("PeerConnection is not ready"));
throw new Error("PeerConnection is not ready");
}
return this.connection.pc.getStats();
}
Expand All @@ -117,10 +102,17 @@ class SoraClient {
event.event_type === "connection.created" &&
this.connection.connectionId === event.connection_id
) {
const connectionIdElement =
document.querySelector<HTMLDivElement>("#connection-id");
const channelIdElement = document.querySelector("#channel-id");
if (channelIdElement) {
channelIdElement.textContent = this.channelId;
}
const sessionIdElement = document.querySelector("#session-id");
if (sessionIdElement) {
sessionIdElement.textContent = this.connection.sessionId;
}
const connectionIdElement = document.querySelector("#connection-id");
if (connectionIdElement) {
connectionIdElement.textContent = event.connection_id;
connectionIdElement.textContent = this.connection.connectionId;
}
}
}
Expand Down
25 changes: 17 additions & 8 deletions sendonly/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@
<head>
<meta charset="utf-8">
<link rel="icon" href="data:,">
<title>Sendonly サンプル</title>
<title>送信のみサンプル</title>
</head>

<body>
<div class="container">
<h1>Sendonly サンプル</h1>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
<button id="get-stats">getStats</button><br />
<div id="connection-id"></div>
<h2>送信のみサンプル</h2>
<p>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
</p>
<p>
<span>session_id:</span>
<span id="session-id" data-testid="session-id"></span>
<br />
<span>connection_id:</span>
<span id="connection-id"></span>
</p>
<video id="local-video" autoplay="" playsinline="" controls="" muted=""
style="width: 320px; height: 240px; border: 1px solid black;"></video>
<div id="stats-report" style="white-space: pre-wrap; font-family: monospace;"></div>
<div id="stats-report-json"></div>
<p>
<button id="get-stats">getStats</button>
<pre id="stats-report-json"></pre>
</p>
</div>

<script type="module" src="./main.ts"></script>
Expand Down
84 changes: 35 additions & 49 deletions sendonly/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ document.addEventListener("DOMContentLoaded", async () => {
const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || "";
const secretKey = import.meta.env.VITE_SECRET_KEY || "";

const client = new SoraClient(
signalingUrl,
channelIdPrefix,
channelIdSuffix,
secretKey,
);
// URL から channelName パラメータを取得
const urlParams = new URLSearchParams(window.location.search);
const channelName = urlParams.get("channelName") || "";
const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;

const client = new SoraClient(signalingUrl, channelId, secretKey);

document.querySelector("#connect")?.addEventListener("click", async () => {
const stream = await navigator.mediaDevices.getUserMedia({
Expand All @@ -34,29 +34,18 @@ document.addEventListener("DOMContentLoaded", async () => {

document.querySelector("#get-stats")?.addEventListener("click", async () => {
const statsReport = await client.getStats();
const statsDiv = document.querySelector("#stats-report") as HTMLElement;
const statsReportJsonDiv = document.querySelector("#stats-report-json");
if (statsDiv && statsReportJsonDiv) {
let statsHtml = "";
const statsReportJson: Record<string, unknown>[] = [];
for (const report of statsReport.values()) {
statsHtml += `<h3>Type: ${report.type}</h3><ul>`;
const reportJson: Record<string, unknown> = {
id: report.id,
type: report.type,
};
for (const [key, value] of Object.entries(report)) {
if (key !== "type" && key !== "id") {
statsHtml += `<li><strong>${key}:</strong> ${value}</li>`;
reportJson[key] = value;
}
}
statsHtml += "</ul>";
statsReportJson.push(reportJson);
}
statsDiv.innerHTML = statsHtml;
// データ属性としても保存（オプション）
statsDiv.dataset.statsReportJson = JSON.stringify(statsReportJson);
const statsReportJson: Record<string, unknown>[] = [];
for (const report of statsReport.values()) {
statsReportJson.push(report);
}
const statsReportJsonElement =
document.querySelector<HTMLPreElement>("#stats-report-json");
if (statsReportJsonElement) {
statsReportJsonElement.textContent = JSON.stringify(
statsReportJson,
null,
2,
);
}
});
});
Expand All @@ -74,21 +63,17 @@ class SoraClient {

constructor(
signalingUrl: string,
channelIdPrefix: string,
channelIdSuffix: string,
channelId: string,
secretKey: string,
options: ConnectionOptions = {},
) {
this.channelId = `${channelIdPrefix}:sendonly:${channelIdSuffix}`;
this.channelId = channelId;
this.secretKey = secretKey;
this.options = options;

this.sora = Sora.connection(signalingUrl, this.debug);
this.connection = this.sora.sendonly(this.channelId, null, this.options);
this.connection.on("notify", this.onNotify.bind(this));

// E2E テスト用のコード
this.connection.on("signaling", this.onSignaling.bind(this));
this.connection.on("notify", this.onnotify.bind(this));
}

async connect(stream: MediaStream): Promise<void> {
Expand All @@ -103,7 +88,7 @@ class SoraClient {

const videoElement =
document.querySelector<HTMLVideoElement>("#local-video");
if (videoElement !== null) {
if (videoElement) {
videoElement.srcObject = stream;
}
}
Expand All @@ -113,34 +98,35 @@ class SoraClient {

const videoElement =
document.querySelector<HTMLVideoElement>("#local-video");
if (videoElement !== null) {
if (videoElement) {
videoElement.srcObject = null;
}
}

getStats(): Promise<RTCStatsReport> {
async getStats(): Promise<RTCStatsReport> {
if (this.connection.pc === null) {
return Promise.reject(new Error("PeerConnection is not ready"));
throw new Error("PeerConnection is not ready");
}
return this.connection.pc.getStats();
}

private onNotify(event: SignalingNotifyMessage): void {
private onnotify(event: SignalingNotifyMessage): void {
if (
event.event_type === "connection.created" &&
this.connection.connectionId === event.connection_id
) {
const channelIdElement = document.querySelector("#channel-id");
if (channelIdElement) {
channelIdElement.textContent = this.channelId;
}
const sessionIdElement = document.querySelector("#session-id");
if (sessionIdElement) {
sessionIdElement.textContent = this.connection.sessionId;
}
const connectionIdElement = document.querySelector("#connection-id");
if (connectionIdElement) {
connectionIdElement.textContent = event.connection_id;
connectionIdElement.textContent = this.connection.connectionId;
}
}
}

// E2E テスト用のコード
private onSignaling(event: SignalingEvent): void {
if (event.type === "onmessage-switched") {
console.log("[signaling]", event.type, event.transportType);
}
}
}
Loading

0 comments on commit e4eb9ef

Please sign in to comment.