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 7d42b07 commit ad5bdce
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 107 deletions.
34 changes: 17 additions & 17 deletions sendrecv/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,32 @@

<head>
<meta charset="utf-8">
<title>Sendrecv サンプル</title>
<title>送受信サンプル</title>
</head>

<body>
<div class="container">
<h1>Sendrecv サンプル</h1>
<label for="video-codec-type">ビデオコーデックを選択:</label>
<select id="video-codec-type">
<option value="" selected>未指定</option>
<option value="VP8">VP8</option>
<option value="VP9">VP9</option>
<option value="AV1">AV1</option>
<option value="H264">H264</option>
<option value="H265">H265</option>
</select><br>
<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 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
45 changes: 19 additions & 26 deletions sendrecv/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,29 +48,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 Down Expand Up @@ -138,9 +127,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 @@ -154,9 +143,13 @@ class SoraClient {
event.event_type === "connection.created" &&
this.connection.connectionId === event.connection_id
) {
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
82 changes: 18 additions & 64 deletions tests/sendrecv.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,23 @@ test("sendrecv x2", async ({ browser }) => {
await sendrecv1.goto("http://localhost:9000/sendrecv/");
await sendrecv2.goto("http://localhost:9000/sendrecv/");

// sendrecv1 のビデオコーデックをランダムに選択
await sendrecv1.evaluate(() => {
const videoCodecTypes = ["VP8", "VP9", "AV1"];
const randomIndex = Math.floor(Math.random() * videoCodecTypes.length);
const videoCodecTypeSelect = document.getElementById(
"video-codec-type",
) as HTMLSelectElement;
videoCodecTypeSelect.value = videoCodecTypes[randomIndex];
});

// sendrecv2 のビデオコーデックをランダムに選択
await sendrecv2.evaluate(() => {
const videoCodecTypes = ["VP8", "VP9", "AV1"];
const randomIndex = Math.floor(Math.random() * videoCodecTypes.length);
const videoCodecTypeSelect = document.getElementById(
"video-codec-type",
) as HTMLSelectElement;
videoCodecTypeSelect.value = videoCodecTypes[randomIndex];
});

// 選択されたコーデックをログに出力
const sendrecv1VideoCodecType = await sendrecv1.$eval(
"#video-codec-type",
(el) => (el as HTMLSelectElement).value,
);
const sendrecv2VideoCodecType = await sendrecv2.$eval(
"#video-codec-type",
(el) => (el as HTMLSelectElement).value,
);
console.log(`sendrecv1 videoCodecType: ${sendrecv1VideoCodecType}`);
console.log(`sendrecv2 videoCodecType: ${sendrecv2VideoCodecType}`);

await sendrecv1.click("#connect");
await sendrecv2.click("#connect");

// #connection-id 要素が存在し、その内容が空でないことを確認するまで待つ
// data-testid="connection-id" 要素が存在し、その内容が空でないことを確認するまで待つ
await sendrecv1.waitForSelector("#connection-id:not(:empty)");

// #connection-id 要素の内容を取得
// data-testid="connection-id" 要素の内容を取得
const sendrecv1ConnectionId = await sendrecv1.$eval(
"#connection-id",
(el) => el.textContent,
);
console.log(`sendrecv1 connectionId=${sendrecv1ConnectionId}`);

// #sendrecv1-connection-id 要素が存在し、その内容が空でないことを確認するまで待つ
// data-testid="connection-id" 要素が存在し、その内容が空でないことを確認するまで待つ
await sendrecv2.waitForSelector("#connection-id:not(:empty)");

// #sendrecv1-connection-id 要素の内容を取得
// data-testid="connection-id" 要素の内容を取得
const sendrecv2ConnectionId = await sendrecv2.$eval(
"#connection-id",
(el) => el.textContent,
Expand All @@ -72,25 +40,18 @@ test("sendrecv x2", async ({ browser }) => {
await sendrecv1.click("#get-stats");

// 統計情報が表示されるまで待機
await sendrecv1.waitForSelector("#stats-report");
// データセットから統計情報を取得
await sendrecv1.waitForSelector("#stats-report-json");
// テキストコンテンツから統計情報を取得
const sendrecv1StatsReportJson: Record<string, unknown>[] =
await sendrecv1.evaluate(() => {
const statsReportDiv = document.querySelector(
"#stats-report",
) as HTMLDivElement;
return statsReportDiv
? JSON.parse(statsReportDiv.dataset.statsReportJson || "[]")
const statsReportElement = document.querySelector(
"#stats-report-json",
) as HTMLPreElement;
return statsReportElement
? JSON.parse(statsReportElement.textContent || "[]")
: [];
});

const sendrecv1VideoCodecStats = sendrecv1StatsReportJson.find(
(stats) =>
stats.type === "codec" &&
stats.mimeType === `video/${sendrecv1VideoCodecType}`,
);
expect(sendrecv1VideoCodecStats).toBeDefined();

const sendrecv1VideoOutboundRtpStats = sendrecv1StatsReportJson.find(
(stats) => stats.type === "outbound-rtp" && stats.kind === "video",
);
Expand All @@ -111,25 +72,18 @@ test("sendrecv x2", async ({ browser }) => {
await sendrecv2.click("#get-stats");

// 統計情報が表示されるまで待機
await sendrecv2.waitForSelector("#stats-report");
// データセットから統計情報を取得
await sendrecv2.waitForSelector("#stats-report-json");
// デキストコンテンツから統計情報を取得
const sendrecv2StatsReportJson: Record<string, unknown>[] =
await sendrecv2.evaluate(() => {
const statsReportDiv = document.querySelector(
"#stats-report",
) as HTMLDivElement;
return statsReportDiv
? JSON.parse(statsReportDiv.dataset.statsReportJson || "[]")
const statsReportElement = document.querySelector(
"#stats-report-json",
) as HTMLPreElement;
return statsReportElement
? JSON.parse(statsReportElement.textContent || "[]")
: [];
});

const sendrecv2VideoCodecStats = sendrecv2StatsReportJson.find(
(stats) =>
stats.type === "codec" &&
stats.mimeType === `video/${sendrecv2VideoCodecType}`,
);
expect(sendrecv2VideoCodecStats).toBeDefined();

const sendrecv2VideoOutboundRtpStats = sendrecv2StatsReportJson.find(
(stats) => stats.type === "outbound-rtp" && stats.kind === "video",
);
Expand Down

0 comments on commit ad5bdce

Please sign in to comment.