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 e4eb9ef commit 06b37a9
Show file tree
Hide file tree
Showing 9 changed files with 120 additions and 82 deletions.
16 changes: 10 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,20 @@

<body>
<div class="container">
<h2>基本</h2>
<ul>
<li><a href="/sendrecv/">送受信サンプル</a></li>
<li><a href="/sendonly/">送信サンプル</a></li>
<li><a href="/recvonly/">受信サンプル</a></li>
<li><a href="/spotlight_sendrecv/">スポットライト送受信サンプル</a></li>
<li><a href="/simulcast/">サイマルキャストサンプル</a></li>
<li><a href="/messaging/">メッセージングサンプル</a></li>
</ul>
<h2>その他</h2>
<ul>
<li><a href="/sendrecv/">配信視聴サンプル</a></li>
<li><a href="/sendonly/">配信サンプル</a></li>
<li><a href="/recvonly/">視聴サンプル</a></li>
<li><a href="/check_stereo/">ステレオチェックシンプルサンプル</a></li>
<li><a href="/check_stereo_multi/">ステレオチェックマルチサンプル</a></li>
<li><a href="/replace_track/">track 入れ替えサンプル</a></li>
<li><a href="/spotlight_sendrecv/">スポットライト配信視聴サンプル</a></li>
<li><a href="/simulcast/">サイマルキャスト配信/視聴サンプル</a></li>
<li><a href="/messaging/">メッセージングサンプル</a></li>
</ul>
</div>
</body>
Expand Down
28 changes: 19 additions & 9 deletions messaging/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,21 @@
<div class="container">
<h1>リアルタイムメッセージングサンプル</h1>
<p>複数のブラウザで開いて sendMessage することで動作確認できます</p>
<h2>sora-js-sdk version: <span id="sora-js-sdk-version"></span></h2>
<label for="channel-name">チャンネル名:</label>
<input type="text" id="channel-name" name="channel-name" value="messaging"><br>
<div id="connection-id"></div>
<p>
<button id="connect">connect</button>
<button id="disconnect" disabled>disconnect</button>
<button id="get-stats">getStats</button><br />
</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;">
<input type="text" name="message" />
<button id="send-message" disabled>sendMessage</button><br />
Expand All @@ -26,9 +37,6 @@ <h2>sora-js-sdk version: <span id="sora-js-sdk-version"></span></h2>
<input type="checkbox" id="check-header" />
<label for="check-header">Header</label>
</div>
<button id="connect">connect</button>
<button id="disconnect" disabled>disconnect</button>
<button id="get-stats">getStats</button><br />
<div>
<h3>messaging</h3>
<ul id="messaging">
Expand All @@ -39,8 +47,10 @@ <h3>messages</h3>
<ul id="received-messages">
</ul>
</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
10 changes: 6 additions & 4 deletions replace_track/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ <h1>replaceTrack サンプル</h1>
<button id="disconnect">disconnect</button>
<button id="get-stats">getStats</button><br />
<div id="connection-id"></div>
<video id="local-video" autoplay="" playsinline="" controls="" muted=""
style="width: 320px; height: 240px; border: 1px solid black;"></video>
<video id="local-video" muted autoplay playsinline controls
style="border: 1px solid blue; transform: scaleX(-1);"></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
9 changes: 6 additions & 3 deletions sendonly/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,17 @@ <h2>送信のみサンプル</h2>
<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" data-testid="session-id"></span>
<span id="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>
<video id="local-video" muted autoplay playsinline controls
style="border: 1px solid blue; transform: scaleX(-1);"></video>
<p>
<button id="get-stats">getStats</button>
<pre id="stats-report-json"></pre>
Expand Down
9 changes: 6 additions & 3 deletions sendrecv/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,17 @@ <h2>送受信サンプル</h2>
<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" data-testid="session-id"></span>
<span id="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>
<video id="local-video" muted autoplay playsinline controls
style="border: 1px solid blue; transform: scaleX(-1);"></video>
<div style="display: flex;">
<div id="remote-videos"></div>
</div>
Expand Down
4 changes: 0 additions & 4 deletions sendrecv/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,6 @@ class SoraClient {
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;
Expand Down
38 changes: 26 additions & 12 deletions simulcast/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,48 @@

<body>
<div class="container">
<h1>サイマルキャストサンプル</h1>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
<button id="get-stats">getStats</button><br />
<h2>サイマルキャストサンプル</h2>
<p>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
<button id="get-stats">getStats</button><br />
</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>
<h2>sendonly</h2>
<h3>送信のみ</h3>
<div id="connection-id"></div>
<video id="local-video" autoplay="" playsinline="" controls=""
style="width: 320px; height: 180px; border: 1px solid blue;"></video>
<video id="local-video" muted autoplay playsinline controls
style="border: 1px solid blue; transform: scaleX(-1);"></video>
</div>
<div>
<h2>recvonly r0</h2>
<h3>受信のみ: r0</h3>
<div id="remote-video-connection-id-r0"></div>
<video id="remote-video-r0" autoplay="" playsinline="" controls="" style="border: 1px solid red;"></video>
</div>
<div>
<h2>recvonly r1</h2>
<h3>受信のみ: r1</h3>
<div id="remote-video-connection-id-r1"></div>
<video id="remote-video-r1" autoplay="" playsinline="" controls="" style="border: 1px solid red;"></video>
</div>
<div>
<h2>recvonly r2</h2>
<h3>受信のみ: r2</h3>
<div id="remote-video-connection-id-r2"></div>
<video id="remote-video-r2" autoplay="" playsinline="" controls="" style="border: 1px solid red;"></video>
</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
51 changes: 23 additions & 28 deletions simulcast/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,29 +88,18 @@ document.addEventListener("DOMContentLoaded", () => {

document.querySelector("#get-stats")?.addEventListener("click", async () => {
const statsReport = await sendonly.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 @@ -251,11 +240,17 @@ class SimulcastRecvonlySoraClient {
event.event_type === "connection.created" &&
event.connection_id === this.connection?.connectionId
) {
const localVideoConnectionId = document.querySelector(
`#remote-video-connection-id-${this.options.simulcastRid}`,
);
if (localVideoConnectionId) {
localVideoConnectionId.textContent = `${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 = this.connection.connectionId;
}
}
}
Expand Down
37 changes: 24 additions & 13 deletions spotlight_sendrecv/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,34 @@
<head>
<meta charset="utf-8">
<link rel="icon" href="data:,">
<title>Spotlight Sendrecv サンプル</title>
<title>スポットライト送受信サンプル</title>
</head>

<body>
<div class="container">
<h1>Spotlight Sendrecv サンプル</h1>
<div style="display: flex;">
<div>
<h2>sendrecv</h2>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button><br />
<div id="connection-id"></div>
<video id="local-video" autoplay="" playsinline="" controls=""
style="width: 320px; height: 240px; border: 1px solid black;"></video>
<div id="remote-videos"></div>
</div>
</div>
<h2>スポットライト送受信サンプル</h2>
<p>
<button id="connect">connect</button>
<button id="disconnect">disconnect</button>
<button id="get-stats">getStats</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>
<video id="local-video" muted autoplay playsinline controls
style="border: 1px solid blue; transform: scaleX(-1);"></video>
<div id="remote-videos"></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

0 comments on commit 06b37a9

Please sign in to comment.