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 ae61994 commit fd2ea8e
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 177 deletions.
33 changes: 10 additions & 23 deletions check_stereo/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,13 @@ document.addEventListener("DOMContentLoaded", async () => {
const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX;
const secretKey = import.meta.env.VITE_SECRET_KEY;

// Sora クライアントの初期化
const sendonly = new SendonlyClient(
signalingUrl,
channelIdPrefix,
channelIdSuffix,
secretKey,
);
// URL から channelName パラメータを取得
const urlParams = new URLSearchParams(window.location.search);
const channelName = urlParams.get("channelName") || "";
const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;

const recvonly = new RecvonlyClient(
signalingUrl,
channelIdPrefix,
channelIdSuffix,
secretKey,
);
const sendonly = new SendonlyClient(signalingUrl, channelId, secretKey);
const recvonly = new RecvonlyClient(signalingUrl, channelId, secretKey);

// デバイスリストの取得と設定
await updateDeviceLists();
Expand Down Expand Up @@ -106,12 +99,11 @@ class SendonlyClient {

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

Expand Down Expand Up @@ -338,13 +330,8 @@ class RecvonlyClient {
private canvas: HTMLCanvasElement | null = null;
private canvasCtx: CanvasRenderingContext2D | null = null;

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

this.sora = Sora.connection(signalingUrl, this.debug);
Expand Down
54 changes: 18 additions & 36 deletions check_stereo_multi/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,20 @@ document.addEventListener("DOMContentLoaded", async () => {
const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX;
const secretKey = import.meta.env.VITE_SECRET_KEY;

// Sora クライアントの初期化
const sendonly1 = new SendonlyClient(
signalingUrl,
channelIdPrefix,
channelIdSuffix,
secretKey,
{
clientId: "1",
},
);
const sendonly2 = new SendonlyClient(
signalingUrl,
channelIdPrefix,
channelIdSuffix,
secretKey,
{
clientId: "2",
},
);

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

const sendonly1 = new SendonlyClient(signalingUrl, channelId, secretKey, {
clientId: "1",
});

const sendonly2 = new SendonlyClient(signalingUrl, channelId, secretKey, {
clientId: "2",
});

const recvonly = new RecvonlyClient(signalingUrl, channelId, secretKey);

// デバイスリストの取得と設定
await updateDeviceLists();
Expand Down Expand Up @@ -143,12 +131,11 @@ class SendonlyClient {

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

Expand Down Expand Up @@ -375,13 +362,8 @@ class RecvonlyClient {
private canvases = new Map<string, HTMLCanvasElement>();
private canvasCtxs = new Map<string, CanvasRenderingContext2D | null>();

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

this.options = {};
Expand Down
94 changes: 31 additions & 63 deletions messaging/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 checkCompress = document.getElementById(
Expand All @@ -32,9 +32,11 @@ document.addEventListener("DOMContentLoaded", async () => {

await client.connect(compress, header);
});

document.querySelector("#disconnect")?.addEventListener("click", async () => {
await client.disconnect();
});

document
.querySelector("#send-message")
?.addEventListener("click", async () => {
Expand All @@ -48,29 +50,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 @@ -86,13 +77,8 @@ class SoraClient {
private sora: SoraConnection;
private connection: ConnectionMessaging;

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

this.options = {
Expand Down Expand Up @@ -121,12 +107,6 @@ class SoraClient {
};
}

// connect ボタンを無効にする
const connectButton = document.querySelector<HTMLButtonElement>("#connect");
if (connectButton) {
connectButton.disabled = true;
}

// dataChannels の compress の設定を上書きする
this.connection.options.dataChannels = [
{
Expand All @@ -138,31 +118,11 @@ class SoraClient {
},
];
await this.connection.connect();

// disconnect ボタンを有効にする
const disconnectButton =
document.querySelector<HTMLButtonElement>("#disconnect");
if (disconnectButton) {
disconnectButton.disabled = false;
}
}

async disconnect() {
await this.connection.disconnect();

// connect ボタンを有効にする
const connectButton = document.querySelector<HTMLButtonElement>("#connect");
if (connectButton) {
connectButton.disabled = false;
}

// disconnect ボタンを無効にする
const disconnectButton =
document.querySelector<HTMLButtonElement>("#disconnect");
if (disconnectButton) {
disconnectButton.disabled = true;
}

const receivedMessagesElement =
document.querySelector("#received-messages");
if (receivedMessagesElement) {
Expand Down Expand Up @@ -191,9 +151,17 @@ 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;
}
const connectionIdElement = document.querySelector("#connection-id");
if (connectionIdElement) {
connectionIdElement.textContent = event.connection_id;
connectionIdElement.textContent = this.connection.connectionId;
}

// 送信ボタンを有効にする
Expand Down
1 change: 0 additions & 1 deletion recvonly/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ document.addEventListener("DOMContentLoaded", () => {
const channelName = urlParams.get("channelName") || "";
const channelId = `${channelIdPrefix}:${channelName}:${channelIdSuffix}`;

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

document.querySelector("#connect")?.addEventListener("click", async () => {
Expand Down
12 changes: 10 additions & 2 deletions replace_track/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,16 @@ <h2>replaceTrack サンプル</h2>
<button id="replace-stream">replace stream</button>
<button id="disconnect">disconnect</button>
</p>
<div id="connection-id"></div>
<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 style="display: flex;">
Expand All @@ -24,7 +33,6 @@ <h2>replaceTrack サンプル</h2>
<button id="get-stats">getStats</button>
<pre id="stats-report-json"></pre>
</p>
<button id="get-stats">getStats</button><br />
</div>

<script type="module" src="./main.ts"></script>
Expand Down
Loading

0 comments on commit fd2ea8e

Please sign in to comment.