コード整理

shiguredo · Jan 11, 2025 · db67569 · db67569
1 parent ad5bdce
commit db67569
Show file tree

Hide file tree

Showing 22 changed files with 395 additions and 454 deletions.
diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml
@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-24.04
     strategy:
       matrix:
-        node: ["20", "22", "23"]
+        node: ["20"]
         # browser: ["chromium", "firefox", "webkit"]
         browser: ["chromium"]
     env:
@@ -32,7 +32,6 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - uses: pnpm/action-setup@v4
-      - run: pnpm --version
       - run: pnpm install
       - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps
       - run: pnpm exec playwright test --project=${{ matrix.browser }}
@@ -51,7 +50,6 @@ jobs:
   #   if: success()
   #   steps:
   #     - name: Slack Notification
-  #       if: success()
   #       uses: rtCamp/action-slack-notify@v2
   #       env:
   #         SLACK_CHANNEL: sora-js-sdk
@@ -65,7 +63,6 @@ jobs:
     if: failure()
     steps:
       - name: Slack Notification
-        if: failure()
         uses: rtCamp/action-slack-notify@v2
         env:
           SLACK_CHANNEL: sora-js-sdk

diff --git a/check_stereo/index.html b/check_stereo/index.html
@@ -2,6 +2,7 @@
 
 <head>
   <meta charset="utf-8">
+  <link rel="icon" href="data:,">
   <title>Stereo Check シンプルサンプル</title>
 
   <style>

diff --git 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/index.html b/check_stereo_multi/index.html
@@ -2,6 +2,7 @@
 
 <head>
   <meta charset="utf-8">
+  <link rel="icon" href="data:,">
   <title>Stereo Check マルチサンプル</title>
 
   <style>

diff --git 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<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 = {};

diff --git a/index.html b/index.html
@@ -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>

diff --git a/messaging/index.html b/messaging/index.html
@@ -2,17 +2,29 @@
 
 <head>
   <meta charset="utf-8">
+  <link rel="icon" href="data:,">
   <title>リアルタイムメッセージングサンプル</title>
 </head>
 
 <body>
   <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 />
@@ -25,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">
@@ -38,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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     <head>
       <meta charset="utf-8">
+      <link rel="icon" href="data:,">
       <title>Stereo Check シンプルサンプル</title>
       <style>
@@ Expand Down @@