diff --git a/check_stereo/main.ts b/check_stereo/main.ts index 78786f4..b771e35 100644 --- a/check_stereo/main.ts +++ b/check_stereo/main.ts @@ -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(); @@ -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; @@ -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); diff --git a/check_stereo_multi/main.ts b/check_stereo_multi/main.ts index adcddce..bf80154 100644 --- a/check_stereo_multi/main.ts +++ b/check_stereo_multi/main.ts @@ -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(); @@ -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; @@ -375,13 +362,8 @@ class RecvonlyClient { private canvases = new Map(); private canvasCtxs = new Map(); - 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 = {}; diff --git a/messaging/main.ts b/messaging/main.ts index bc53dff..7f0035e 100644 --- a/messaging/main.ts +++ b/messaging/main.ts @@ -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( @@ -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 () => { @@ -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[] = []; - for (const report of statsReport.values()) { - statsHtml += `

Type: ${report.type}

    `; - const reportJson: Record = { - id: report.id, - type: report.type, - }; - for (const [key, value] of Object.entries(report)) { - if (key !== "type" && key !== "id") { - statsHtml += `
  • ${key}: ${value}
    • `; - reportJson[key] = value; - } - } - statsHtml += "
"; - statsReportJson.push(reportJson); - } - statsDiv.innerHTML = statsHtml; - // データ属性としても保存（オプション） - statsDiv.dataset.statsReportJson = JSON.stringify(statsReportJson); + const statsReportJson: Record[] = []; + for (const report of statsReport.values()) { + statsReportJson.push(report); + } + const statsReportJsonElement = + document.querySelector("#stats-report-json"); + if (statsReportJsonElement) { + statsReportJsonElement.textContent = JSON.stringify( + statsReportJson, + null, + 2, + ); } }); }); @@ -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 = { @@ -121,12 +107,6 @@ class SoraClient { }; } - // connect ボタンを無効にする - const connectButton = document.querySelector("#connect"); - if (connectButton) { - connectButton.disabled = true; - } - // dataChannels の compress の設定を上書きする this.connection.options.dataChannels = [ { @@ -138,31 +118,11 @@ class SoraClient { }, ]; await this.connection.connect(); - - // disconnect ボタンを有効にする - const disconnectButton = - document.querySelector("#disconnect"); - if (disconnectButton) { - disconnectButton.disabled = false; - } } async disconnect() { await this.connection.disconnect(); - // connect ボタンを有効にする - const connectButton = document.querySelector("#connect"); - if (connectButton) { - connectButton.disabled = false; - } - - // disconnect ボタンを無効にする - const disconnectButton = - document.querySelector("#disconnect"); - if (disconnectButton) { - disconnectButton.disabled = true; - } - const receivedMessagesElement = document.querySelector("#received-messages"); if (receivedMessagesElement) { @@ -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; } // 送信ボタンを有効にする diff --git a/recvonly/main.ts b/recvonly/main.ts index 97b203e..d3a2ef4 100644 --- a/recvonly/main.ts +++ b/recvonly/main.ts @@ -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 () => { diff --git a/replace_track/index.html b/replace_track/index.html index 3303f44..472b211 100644 --- a/replace_track/index.html +++ b/replace_track/index.html @@ -14,7 +14,16 @@

replaceTrack サンプル

-
+

+ channel_id: + +
+ session_id: + +
+ connection_id: + +

@@ -24,7 +33,6 @@

replaceTrack サンプル


     

-    

   

 
   
diff --git a/replace_track/main.ts b/replace_track/main.ts
index 2b77a31..515047b 100644
--- a/replace_track/main.ts
+++ b/replace_track/main.ts
@@ -7,35 +7,20 @@ import Sora, {
 } from "sora-js-sdk";
 import { generateJwt } from "../src/misc";
 
-const getVideoCodecType = (): VideoCodecType | undefined => {
-  const videoCodecTypeElement =
-    document.querySelector("#video-codec-type");
-  const videoCodecType = videoCodecTypeElement?.value;
-  if (videoCodecType === "") {
-    return undefined;
-  }
-  return videoCodecType as VideoCodecType;
-};
-
 document.addEventListener("DOMContentLoaded", async () => {
   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 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}`;
 
-  document.querySelector("#connect")?.addEventListener("click", async () => {
-    const videoCodecType = getVideoCodecType();
-    if (videoCodecType !== undefined) {
-      client.setOptions({ videoCodecType: videoCodecType });
-    }
+  const client = new SoraClient(signalingUrl, channelId, secretKey);
 
+  document.querySelector("#connect")?.addEventListener("click", async () => {
     await client.connect();
   });
 
@@ -56,29 +41,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[] = [];
-      for (const report of statsReport.values()) {
-        statsHtml += `
Type: ${report.type}
    `;
-        const reportJson: Record = {
-          id: report.id,
-          type: report.type,
-        };
-        for (const [key, value] of Object.entries(report)) {
-          if (key !== "type" && key !== "id") {
-            statsHtml += `
  • ${key}: ${value}
    • `;
-            reportJson[key] = value;
-          }
-        }
-        statsHtml += "
";
-        statsReportJson.push(reportJson);
-      }
-      statsDiv.innerHTML = statsHtml;
-      // データ属性としても保存（オプション）
-      statsDiv.dataset.statsReportJson = JSON.stringify(statsReportJson);
+    const statsReportJson: Record[] = [];
+    for (const report of statsReport.values()) {
+      statsReportJson.push(report);
+    }
+    const statsReportJsonElement =
+      document.querySelector("#stats-report-json");
+    if (statsReportJsonElement) {
+      statsReportJsonElement.textContent = JSON.stringify(
+        statsReportJson,
+        null,
+        2,
+      );
     }
   });
 });
@@ -98,12 +72,11 @@ class SoraClient {
 
   constructor(
     signalingUrl: string,
-    channelIdPrefix: string,
-    channelIdSuffix: string,
+    channelId: string,
     secretKey: string,
     options: ConnectionOptions = {},
   ) {
-    this.channelId = `${channelIdPrefix}:replace_track:${channelIdSuffix}`;
+    this.channelId = channelId;
     this.secretKey = secretKey;
     this.options = options;
 
@@ -173,18 +146,22 @@ class SoraClient {
     return this.connection.pc.getStats();
   }
 
-  setOptions(options: ConnectionOptions) {
-    this.connection.options = { ...this.connection.options, ...options };
-  }
-
   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;
       }
     }
   }