コード整理

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

Hide file tree

Showing 20 changed files with 272 additions and 62 deletions.
diff --git a/.env.template b/.env.template
@@ -1,3 +1,4 @@
-VITE_SORA_SIGNALING_URL=wss://sora.example.com/signaling
-VITE_SORA_CHANNEL_ID=channel_id
-VITE_ACCESS_TOKEN=access_token
+# 設定については README.md を参照してください
+VITE_SORA_SIGNALING_URL=
+VITE_SORA_CHANNEL_ID_PREFIX=
+VITE_SECRET_KEY=
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
@@ -0,0 +1,20 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-24.04
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v4
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v4
diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml
@@ -0,0 +1,75 @@
+name: e2e-test
+
+on:
+  push:
+    branches:
+      - main
+      - feature/*
+    paths-ignore:
+      - "**.md"
+      - "LICENSE"
+      - "NOTICE"
+  schedule:
+    # UTC 時間で毎日 2:00 (JST で 11:00) に実行、月曜日から金曜日
+    - cron: "0 2 * * 1-5"
+
+jobs:
+  e2e-test:
+    timeout-minutes: 20
+    runs-on: ubuntu-24.04
+    strategy:
+      matrix:
+        node: ["20", "22", "23"]
+        # browser: ["chromium", "firefox", "webkit"]
+        browser: ["chromium"]
+    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 }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        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 }}
+        env:
+          VITE_TEST_CHANNEL_ID_SUFFIX: _${{ matrix.node }}
+      # - uses: actions/upload-artifact@v4
+      #   if: always()
+      #   with:
+      #     name: playwright-report
+      #     path: playwright-report/
+      #     retention-days: 30
+
+  # slack_notify_succeeded:
+  #   needs: [e2e-test]
+  #   runs-on: ubuntu-24.04
+  #   if: success()
+  #   steps:
+  #     - name: Slack Notification
+  #       if: success()
+  #       uses: rtCamp/action-slack-notify@v2
+  #       env:
+  #         SLACK_CHANNEL: sora-js-sdk
+  #         SLACK_COLOR: good
+  #         SLACK_TITLE: Succeeded
+  #         SLACK_ICON_EMOJI: ":star-struck:"
+  #         SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
+  slack_notify_failed:
+    needs: [e2e-test]
+    runs-on: ubuntu-24.04
+    if: failure()
+    steps:
+      - name: Slack Notification
+        if: failure()
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_CHANNEL: sora-js-sdk
+          SLACK_COLOR: danger
+          SLACK_TITLE: Failed
+          SLACK_ICON_EMOJI: ":japanese_ogre:"
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
diff --git a/README.md b/README.md
@@ -11,4 +11,38 @@ $ pnpm install
 $ pnpm dev
 ```
 
+### Sora Labo を利用する場合の .env.local の設定
+
+```bash
+# Sora Labo の Signaling URL を指定してください
+VITE_SORA_SIGNALING_URL=wss://sora.sora-labo.shiguredo.app/signaling
+# Sora Labo にログインした GitHub ログイン名と GitHub ID を指定してください
+# {GitHubLoginName}_{GitHubID}_ の用に指定してください
+VITE_SORA_CHANNEL_ID_PREFIX={GitHubLoginName}_{GitHubId}_
+# Sora Labo の Secret Key を指定してください
+VITE_SECRET_KEY=SecretKey
+```
+
+### Sora Cloud を利用する場合の .env.local の設定
+
+```bash
+# Sora Cloud の Signaling URL を指定してください
+VITE_SORA_SIGNALING_URL=wss://sora.sora-cloud.shiguredo.app/signaling
+# Sora Cloud のプロジェクト ID + @ を指定してください
+VITE_SORA_CHANNEL_ID_PREFIX={ProjectId}@
+# Sora Cloud の API Key を指定してください
+VITE_SECRET_KEY=SecretKey
+```
+
+### Sora を利用する場合の .env.local の設定
+
+```bash
+# Sora の Signaling URL を指定してください
+VITE_SORA_SIGNALING_URL=wss://sora.example.com/signaling
+# 好きな文字列を指定してください
+VITE_SORA_CHANNEL_ID_PREFIX=example
+# 設定不要です
+VITE_SECRET_KEY=
+```
+
 ## ライセンス
diff --git a/check_stereo/index.html b/check_stereo/index.html
@@ -48,7 +48,7 @@ <h3>Waveform</h3>
     <audio id="recvonly-audio" controls autoplay muted></audio>
   </div>
 
-  <script type="module" src="./main.mts"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/check_stereo/main.mts → check_stereo/main.ts b/check_stereo/main.mts → check_stereo/main.ts
diff --git a/check_stereo_multi/index.html b/check_stereo_multi/index.html
@@ -59,7 +59,7 @@ <h2>Recvonly</h2>
     <div id="remote-audios"></div>
   </div>
 
-  <script type="module" src="./main.mts"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/check_stereo_multi/main.mts → check_stereo_multi/main.ts b/check_stereo_multi/main.mts → check_stereo_multi/main.ts
diff --git a/messaging/index.html b/messaging/index.html
@@ -42,7 +42,7 @@ <h3>messages</h3>
     <div id="stats-report-json"></div>
   </div>
 
-  <script type="module" src="./main.mts"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/messaging/main.mts → messaging/main.ts b/messaging/main.mts → messaging/main.ts
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   },
   "homepage": "https://github.com/shiguredo/sora-js-sdk-examples#readme",
   "dependencies": {
+    "jose": "5.9.6",
     "sora-js-sdk": "2024.2.2"
   },
   "devDependencies": {

diff --git a/playwright.config.mjs b/playwright.config.mjs
@@ -0,0 +1,45 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// pnpm exec playwright test --ui
+
+export default defineConfig({
+  testDir: "e2e-tests/tests",
+  // fullyParallel: true,
+  reporter: "html",
+  use: {
+    launchOptions: {
+      args: [
+        // CORS 無効
+        "--disable-web-security",
+        "--disable-features=IsolateOrigins,site-per-process",
+
+        "--use-fake-ui-for-media-stream",
+        "--use-fake-device-for-media-stream",
+        // "--use-file-for-fake-video-capture=/app/sample.mjpeg",
+      ],
+    },
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+  webServer: {
+    command: "pnpm run dev --port 9000",
+    url: "http://localhost:9000/",
+    reuseExistingServer: !process.env.CI,
+    stdout: "pipe",
+    stderr: "pipe",
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/recvonly/index.html b/recvonly/index.html
@@ -8,7 +8,6 @@
 <body>
   <div class="container">
     <h1>Recvonly サンプル</h1>
-    <h3 id="sdk-version"></h3>
     <button id="connect">connect</button>
     <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />
@@ -20,7 +19,7 @@ <h3 id="sdk-version"></h3>
     <div id="stats-report-json"></div>
   </div>
 
-  <script type="module" src="./main.mts"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/recvonly/main.mts → recvonly/main.ts b/recvonly/main.mts → recvonly/main.ts
@@ -13,12 +13,6 @@ document.addEventListener("DOMContentLoaded", () => {
   // Sora クライアントの初期化
   const client = new SoraClient(signalingUrl, channelId, accessToken);
 
-  // SDK バージョンの表示
-  const sdkVersionElement = document.querySelector("#sdk-version");
-  if (sdkVersionElement) {
-    sdkVersionElement.textContent = `${Sora.version()}`;
-  }
-
   document.querySelector("#connect")?.addEventListener("click", async () => {
     await client.connect();
   });

diff --git a/sendonly/index.html b/sendonly/index.html
@@ -8,7 +8,6 @@
 <body>
   <div class="container">
     <h1>Sendonly サンプル</h1>
-    <h3 id="sdk-version"></h3>
     <button id="connect">connect</button>
     <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />
@@ -19,7 +18,7 @@ <h3 id="sdk-version"></h3>
     <div id="stats-report-json"></div>
   </div>
 
-  <script type="module" src="./main.mts"></script>
+  <script type="module" src="./main.ts"></script>
 </body>
 
 </html>
diff --git a/sendonly/main.mts → sendonly/main.ts b/sendonly/main.mts → sendonly/main.ts
@@ -12,12 +12,6 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   const client = new SoraClient(signalingUrl, channelId, accessToken);
 
-  // SDK バージョンの表示
-  const sdkVersionElement = document.querySelector("#sdk-version");
-  if (sdkVersionElement) {
-    sdkVersionElement.textContent = `${Sora.version()}`;
-  }
-
   document.querySelector("#connect")?.addEventListener("click", async () => {
     const stream = await navigator.mediaDevices.getUserMedia({
       video: true,

diff --git a/sendrecv/index.html b/sendrecv/index.html
@@ -8,17 +8,14 @@
 <body>
   <div class="container">
     <h1>Sendrecv サンプル</h1>
-    <h3 id="sdk-version"></h3>
     <label for="video-codec-type">ビデオコーデックを選択:</label>
     <select id="video-codec-type">
       <option value="" selected>未指定</option>
       <option value="VP8">VP8</option>
       <option value="VP9">VP9</option>
       <option value="AV1">AV1</option>
-      <!--
       <option value="H264">H264</option>
       <option value="H265">H265</option>
-      -->
     </select><br>
     <button id="connect">connect</button>
     <button id="disconnect">disconnect</button>