コード整理

shiguredo · Jan 10, 2025 · c7133d0 · c7133d0
1 parent b1df772
commit c7133d0
Show file tree

Hide file tree

Showing 18 changed files with 571 additions and 271 deletions.
diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml
@@ -25,7 +25,7 @@ jobs:
     env:
       VITE_SORA_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
       VITE_SORA_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
-      VITE_ACCESS_TOKEN: ${{ secrets.TEST_SECRET_KEY }}
+      VITE_SECRET_KEY: ${{ secrets.TEST_SECRET_KEY }}
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -37,7 +37,7 @@ jobs:
       - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps
       - run: pnpm exec playwright test --project=${{ matrix.browser }}
         env:
-          VITE_TEST_CHANNEL_ID_SUFFIX: _${{ matrix.node }}
+          VITE_SORA_CHANNEL_ID_SUFFIX: _${{ matrix.node }}
       # - uses: actions/upload-artifact@v4
       #   if: always()
       #   with:

diff --git a/check_stereo/main.ts b/check_stereo/main.ts
@@ -3,17 +3,31 @@ import Sora, {
   type SignalingNotifyMessage,
   type ConnectionPublisher,
   type ConnectionSubscriber,
+  type ConnectionOptions,
 } from "sora-js-sdk";
+import { generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
   // 環境変数の読み込み
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-
-  const uuid = crypto.randomUUID();
+  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;
 
   // Sora クライアントの初期化
-  const sendonly = new SendonlyClient(signalingUrl, uuid);
-  const recvonly = new RecvonlyClient(signalingUrl, uuid);
+  const sendonly = new SendonlyClient(
+    signalingUrl,
+    channelIdPrefix,
+    channelIdSuffix,
+    secretKey,
+  );
+
+  const recvonly = new RecvonlyClient(
+    signalingUrl,
+    channelIdPrefix,
+    channelIdSuffix,
+    secretKey,
+  );
 
   // デバイスリストの取得と設定
   await updateDeviceLists();
@@ -76,8 +90,11 @@ async function updateDeviceLists() {
 
 class SendonlyClient {
   private debug = false;
+
   private channelId: string;
-  private options: object = {};
+  private options: ConnectionOptions;
+
+  private secretKey: string;
 
   private sora: SoraConnection;
   private connection: ConnectionPublisher;
@@ -87,23 +104,32 @@ class SendonlyClient {
 
   private channelCheckInterval: number | undefined;
 
-  constructor(signalingUrl: string, channelId: string) {
-    this.sora = Sora.connection(signalingUrl, this.debug);
-
-    this.channelId = channelId;
-
-    this.connection = this.sora.sendonly(
-      this.channelId,
-      undefined,
-      this.options,
-    );
+  constructor(
+    signalingUrl: string,
+    channelIdPrefix: string,
+    channelIdSuffix: string,
+    secretKey: string,
+    options: ConnectionOptions = {},
+  ) {
+    this.channelId = `${channelIdPrefix}:check_stereo:${channelIdSuffix}`;
+    this.secretKey = secretKey;
+    this.options = options;
 
+    this.sora = Sora.connection(signalingUrl, this.debug);
+    this.connection = this.sora.sendonly(this.channelId, null, this.options);
     this.connection.on("notify", this.onnotify.bind(this));
 
     this.initializeCanvas();
   }
 
   async connect(stream: MediaStream): Promise<void> {
+    if (this.secretKey !== "") {
+      const jwt = await generateJwt(this.channelId, this.secretKey);
+      this.connection.metadata = {
+        access_token: jwt,
+      };
+    }
+
     const audioTrack = stream.getAudioTracks()[0];
     if (!audioTrack) {
       throw new Error("Audio track not found");
@@ -297,36 +323,46 @@ class SendonlyClient {
 
 class RecvonlyClient {
   private debug = false;
+
   private channelId: string;
   private options: object = {
     video: false,
     audio: true,
   };
 
+  private secretKey: string;
+
   private sora: SoraConnection;
   private connection: ConnectionSubscriber;
 
   private canvas: HTMLCanvasElement | null = null;
   private canvasCtx: CanvasRenderingContext2D | null = null;
 
-  constructor(signalingUrl: string, channelId: string) {
-    this.channelId = channelId;
+  constructor(
+    signalingUrl: string,
+    channelIdPrefix: string,
+    channelIdSuffix: string,
+    secretKey: string,
+  ) {
+    this.channelId = `${channelIdPrefix}:check_stereo:${channelIdSuffix}`;
+    this.secretKey = secretKey;
 
     this.sora = Sora.connection(signalingUrl, this.debug);
-
     this.connection = this.sora.recvonly(
       this.channelId,
       undefined,
       this.options,
     );
-
     this.connection.on("notify", this.onnotify.bind(this));
     this.connection.on("track", this.ontrack.bind(this));
 
     this.initializeCanvas();
   }
 
   async connect(): Promise<void> {
+    const jwt = await generateJwt(this.channelId, this.secretKey);
+    this.connection.metadata = { access_token: jwt };
+
     const forceStereoOutputElement =
       document.querySelector<HTMLInputElement>("#forceStereoOutput");
     const forceStereoOutput = forceStereoOutputElement

diff --git a/check_stereo_multi/main.ts b/check_stereo_multi/main.ts
@@ -3,19 +3,42 @@ import Sora, {
   type SignalingNotifyMessage,
   type ConnectionPublisher,
   type ConnectionSubscriber,
+  type ConnectionOptions,
 } from "sora-js-sdk";
+import { generateJwt } from "../src/misc";
 
 document.addEventListener("DOMContentLoaded", async () => {
-  // 環境変数の読み込み
   const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL;
-
-  const uuid = crypto.randomUUID();
+  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;
 
   // Sora クライアントの初期化
-  const sendonly1 = new SendonlyClient(signalingUrl, uuid, 1);
-  const sendonly2 = new SendonlyClient(signalingUrl, uuid, 2);
-
-  const recvonly = new RecvonlyClient(signalingUrl, uuid);
+  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,
+  );
 
   // デバイスリストの取得と設定
   await updateDeviceLists();
@@ -104,8 +127,11 @@ async function updateDeviceLists() {
 
 class SendonlyClient {
   private debug = false;
+
   private channelId: string;
-  private options: object = {};
+  private options: ConnectionOptions;
+
+  private secretKey: string;
 
   private sora: SoraConnection;
   private connection: ConnectionPublisher;
@@ -115,31 +141,32 @@ class SendonlyClient {
 
   private channelCheckInterval: number | undefined;
 
-  private sendonlyClientId: number;
-
   constructor(
     signalingUrl: string,
-    channelId: string,
-    sendonlyClientId: number,
+    channelIdPrefix: string,
+    channelIdSuffix: string,
+    secretKey: string,
+    options: ConnectionOptions = {},
   ) {
-    this.sora = Sora.connection(signalingUrl, this.debug);
-
-    this.channelId = channelId;
-
-    this.sendonlyClientId = sendonlyClientId;
-
-    this.connection = this.sora.sendonly(
-      this.channelId,
-      undefined,
-      this.options,
-    );
+    this.channelId = `${channelIdPrefix}:check_stereo_multi:${channelIdSuffix}`;
+    this.secretKey = secretKey;
+    this.options = options;
 
+    this.sora = Sora.connection(signalingUrl, this.debug);
+    this.connection = this.sora.sendonly(this.channelId, null, this.options);
     this.connection.on("notify", this.onnotify.bind(this));
 
     this.initializeCanvas();
   }
 
   async connect(stream: MediaStream): Promise<void> {
+    if (this.secretKey !== "") {
+      const jwt = await generateJwt(this.channelId, this.secretKey);
+      this.connection.metadata = {
+        access_token: jwt,
+      };
+    }
+
     const audioTrack = stream.getAudioTracks()[0];
     if (!audioTrack) {
       throw new Error("Audio track not found");
@@ -167,7 +194,7 @@ class SendonlyClient {
 
   private initializeCanvas() {
     this.canvas = document.querySelector<HTMLCanvasElement>(
-      `#sendonly-waveform-${this.sendonlyClientId}`,
+      `#sendonly-waveform-${this.options.clientId}`,
     );
     if (this.canvas) {
       this.canvasCtx = this.canvas.getContext("2d");
@@ -211,15 +238,15 @@ class SendonlyClient {
 
       // differenceの値を表示する要素を追加
       const differenceElement = document.querySelector<HTMLDivElement>(
-        `#sendonly-difference-value-${this.sendonlyClientId}`,
+        `#sendonly-difference-value-${this.options.clientId}`,
       );
       if (differenceElement) {
         differenceElement.textContent = `Difference: ${difference.toFixed(6)}`;
       }
 
       // sendonly-stereo 要素に結果を反映
       const sendonlyStereoElement = document.querySelector<HTMLDivElement>(
-        `#sendonly-stereo-${this.sendonlyClientId}`,
+        `#sendonly-stereo-${this.options.clientId}`,
       );
       if (sendonlyStereoElement) {
         sendonlyStereoElement.textContent = result;
@@ -310,7 +337,7 @@ class SendonlyClient {
       this.connection.connectionId === event.connection_id
     ) {
       const connectionIdElement = document.querySelector<HTMLDivElement>(
-        `#sendonly-connection-id-${this.sendonlyClientId}`,
+        `#sendonly-connection-id-${this.options.clientId}`,
       );
       if (connectionIdElement) {
         connectionIdElement.textContent = event.connection_id;
@@ -322,7 +349,7 @@ class SendonlyClient {
     this.channelCheckInterval = window.setInterval(async () => {
       const channels = await this.getChannels();
       const channelElement = document.querySelector<HTMLDivElement>(
-        `#sendonly-channels-${this.sendonlyClientId}`,
+        `#sendonly-channels-${this.options.clientId}`,
       );
       if (channelElement) {
         channelElement.textContent =
@@ -337,10 +364,8 @@ class SendonlyClient {
 class RecvonlyClient {
   private debug = false;
   private channelId: string;
-  private options: object = {
-    video: false,
-    audio: true,
-  };
+  private options: ConnectionOptions;
+  private secretKey: string;
 
   private sora: SoraConnection;
   private connection: ConnectionSubscriber;
@@ -350,22 +375,31 @@ class RecvonlyClient {
   private canvases = new Map<string, HTMLCanvasElement>();
   private canvasCtxs = new Map<string, CanvasRenderingContext2D | null>();
 
-  constructor(signalingUrl: string, channelId: string) {
-    this.channelId = channelId;
+  constructor(
+    signalingUrl: string,
+    channelIdPrefix: string,
+    channelIdSuffix: string,
+    secretKey: string,
+  ) {
+    this.channelId = `${channelIdPrefix}:check_stereo_multi:${channelIdSuffix}`;
+    this.secretKey = secretKey;
 
-    this.sora = Sora.connection(signalingUrl, this.debug);
+    this.options = {};
 
+    this.sora = Sora.connection(signalingUrl, this.debug);
     this.connection = this.sora.recvonly(
       this.channelId,
       undefined,
       this.options,
     );
-
     this.connection.on("notify", this.onnotify.bind(this));
     this.connection.on("track", this.ontrack.bind(this));
   }
 
   async connect(): Promise<void> {
+    const jwt = await generateJwt(this.channelId, this.secretKey);
+    this.connection.metadata = { access_token: jwt };
+
     const forceStereoOutputElement =
       document.querySelector<HTMLInputElement>("#forceStereoOutput");
     const forceStereoOutput = forceStereoOutputElement