Feature/new examples

.env.template

@@ -1,14 +1,16 @@
-# サンプルやテストに利用する Sora の Signaling URL を指定してください
+# サンプルに利用する Sora の Signaling URL を指定してください
 VITE_SORA_SIGNALING_URL=wss://sora.example.com/signaling
-# サンプルやテストに利用する Sora の ChannelID を指定してください
+# サンプルに利用する Sora の ChannelID を指定してください
 VITE_SORA_CHANNEL_ID=sora-js-sdk
-# サンプルやテストに利用するアクセストークンを指定してください、不要であれば空欄で大丈夫です
+# サンプルに利用するアクセストークンを指定してください、不要であれば空欄で大丈夫です
 VITE_ACCESS_TOKEN=access_token
 
 
-# サンプルやテストに利用する Sora の API URL を指定ください、不要であれば空欄で大丈夫です
-VITE_SORA_API_URL=https://sora.example.com/api
-# サンプルやテストに利用する Sora の WHIP のエンドポイント URL を指定してください、不要であれば空欄で大丈夫です
-VITE_SORA_WHIP_ENDPOINT_URL=https://sora.example.com/whip
-# サンプルやテストに利用する Sora の WHEP のエンドポイント URL を指定してください、不要であれば空欄で大丈夫です
-VITE_SORA_WHEP_ENDPOINT_URL=https://sora.example.com/whep
+# テストに利用する Sora の設定
+VITE_TEST_SIGNALING_URL=
+VITE_TEST_CHANNEL_ID_PREFIX=
+VITE_TEST_CHANNEL_ID_SUFFIX=
+VITE_TEST_API_URL=
+VITE_TEST_WHIP_ENDPOINT_URL=
+VITE_TEST_WHEP_ENDPOINT_URL=
+VITE_TEST_SECRET_KEY=

.github/workflows/e2e-test.yml

@@ -23,12 +23,12 @@ jobs:
         # browser: ["chromium", "firefox", "webkit"]
         browser: ["chromium"]
     env:
-      VITE_SORA_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
-      VITE_SORA_WHIP_ENDPOINT_URL: ${{ secrets.TEST_WHIP_ENDPOINT_URL }}
-      VITE_SORA_WHEP_ENDPOINT_URL: ${{ secrets.TEST_WHEP_ENDPOINT_URL }}
-      VITE_SORA_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
-      VITE_SORA_API_URL: ${{ secrets.TEST_API_URL }}
-      VITE_ACCESS_TOKEN: ${{ secrets.TEST_SECRET_KEY }}
+      VITE_TEST_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
+      VITE_TEST_WHIP_ENDPOINT_URL: ${{ secrets.TEST_WHIP_ENDPOINT_URL }}
+      VITE_TEST_WHEP_ENDPOINT_URL: ${{ secrets.TEST_WHEP_ENDPOINT_URL }}
+      VITE_TEST_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
+      VITE_TEST_API_URL: ${{ secrets.TEST_API_URL }}
+      VITE_TEST_SECRET_KEY: ${{ secrets.TEST_SECRET_KEY }}
     steps:
       - uses: actions/checkout@v4
       - uses: tailscale/github-action@v2
@@ -46,7 +46,7 @@ jobs:
       - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps
       - run: pnpm exec playwright test --project=${{ matrix.browser }}
         env:
-          VITE_SORA_CHANNEL_ID_SUFFIX: _${{ matrix.node }}
+          VITE_TEST_CHANNEL_ID_SUFFIX: _${{ matrix.node }}
       # - uses: actions/upload-artifact@v4
       #   if: always()
       #   with:

.github/workflows/npm-pkg-e2e-test.yml

@@ -35,12 +35,12 @@ jobs:
         # browser: ["chromium", "firefox", "webkit"]
         browser: ["chromium"]
     env:
-      VITE_SORA_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
-      VITE_SORA_WHIP_ENDPOINT_URL: ${{ secrets.TEST_WHIP_ENDPOINT_URL }}
-      VITE_SORA_WHEP_ENDPOINT_URL: ${{ secrets.TEST_WHEP_ENDPOINT_URL }}
-      VITE_SORA_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
-      VITE_SORA_API_URL: ${{ secrets.TEST_API_URL }}
-      VITE_ACCESS_TOKEN: ${{ secrets.TEST_SECRET_KEY }}
+      VITE_TEST_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
+      VITE_TEST_WHIP_ENDPOINT_URL: ${{ secrets.TEST_WHIP_ENDPOINT_URL }}
+      VITE_TEST_WHEP_ENDPOINT_URL: ${{ secrets.TEST_WHEP_ENDPOINT_URL }}
+      VITE_TEST_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
+      VITE_TEST_API_URL: ${{ secrets.TEST_API_URL }}
+      VITE_TEST_SECRET_KEY: ${{ secrets.TEST_SECRET_KEY }}
       NPM_PKG_E2E_TEST: true
     steps:
       - uses: actions/checkout@v4
@@ -62,7 +62,7 @@ jobs:
       - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps
       - run: pnpm exec playwright test --project=${{ matrix.browser }}
         env:
-          VITE_SORA_CHANNEL_ID_SUFFIX: _${{ matrix.node }}_${{ matrix.sdk_version }}
+          VITE_TEST_CHANNEL_ID_SUFFIX: _${{ matrix.node }}_${{ matrix.sdk_version }}
       # - uses: actions/upload-artifact@v4
       #   if: always()
       #   with:

CHANGES.md

@@ -25,7 +25,10 @@
   - @voluntas
 - [ADD] .markdownlint.yaml ファイルを追加する
   - @voluntas
+- [ADD] 新しい examples を追加する
+  - @voluntas
 - [CHANGE] examples を e2e-tests に変更する
+  - 環境変数の Prefix を TEST_ に切り替える
   - @voluntas
 - [CHANGE] tsconfig.json の moduleResolution を Bundler に変更する
   - @voluntas

README.md

@@ -46,6 +46,18 @@ pnpm add sora-js-sdk
 > - Firefox 113 以降
 > - Safari 16.4 以降
 
+## サンプル
+
+サンプルを Vite にて起動できます。
+
+```bash
+# .env.local を作成して適切な値を設定してください
+$ cp .env.template .env.local
+$ pnpm install
+$ pnpm run build
+$ pnpm run dev
+```
+
 ## E2E (End to End) テスト
 
 Playwright を利用した E2E テストを実行できます。
@@ -59,6 +71,14 @@ $ pnpm exec playwright install chromium --with-deps
 $ pnpm run e2e-test
 ```
 
+### E2E テストページ
+
+E2E テストで実行するページを Vite にて起動できます。
+
+```bash
+pnpm run e2e-dev
+```
+
 ## マルチトラックについて
 
 [WebRTC SFU Sora](https://sora.shiguredo.jp) は 1 メディアストリームにつき 1 音声トラック、

biome.jsonc

@@ -4,7 +4,15 @@
     "enabled": true
   },
   "files": {
-    "include": ["src/**", "examples/**", "tests/**", "*.config.mjs", "package.json", "biome.jsonc"]
+    "include": [
+      "src/**",
+      "examples/**",
+      "tests/**",
+      "e2e-tests/**",
+      "*.config.mjs",
+      "package.json",
+      "biome.jsonc"
+    ]
   },
   "linter": {
     "enabled": true,

e2e-tests/data_channel_signaling_only/index.html

@@ -2,12 +2,12 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Sendonly test</title>
+  <title>DataChannelSignalingOnly test</title>
 </head>
 
 <body>
   <div class="container">
-    <h1>Sendonly test</h1>
+    <h1>DataChannelSignalingOnly test</h1>
     <h3 id="sdk-version"></h3>
     <button id="connect">connect</button>
     <button id="disconnect">disconnect</button>

e2e-tests/data_channel_signaling_only/main.mts

@@ -7,17 +7,12 @@ import Sora, {
 } from 'sora-js-sdk'
 
 document.addEventListener('DOMContentLoaded', async () => {
-  const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
-  const SORA_CHANNEL_ID_PREFIX = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || ''
-  const SORA_CHANNEL_ID_SUFFIX = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || ''
-  const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || ''
-
-  const client = new SoraClient(
-    SORA_SIGNALING_URL,
-    SORA_CHANNEL_ID_PREFIX,
-    SORA_CHANNEL_ID_SUFFIX,
-    ACCESS_TOKEN,
-  )
+  const signalingUrl = import.meta.env.VITE_TEST_SIGNALING_URL
+  const channelIdPrefix = import.meta.env.VITE_TEST_CHANNEL_ID_PREFIX || ''
+  const channelIdSuffix = import.meta.env.VITE_TEST_CHANNEL_ID_SUFFIX || ''
+  const secretKey = import.meta.env.VITE_TEST_SECRET_KEY
+
+  const client = new SoraClient(signalingUrl, channelIdPrefix, channelIdSuffix, secretKey)
 
   // SDK バージョンの表示
   const sdkVersionElement = document.querySelector('#sdk-version')
@@ -77,17 +72,17 @@ class SoraClient {
   private connection: ConnectionPublisher
 
   constructor(
-    signaling_url: string,
-    channel_id_prefix: string,
-    channel_id_suffix: string,
-    access_token: string,
+    signalingUrl: string,
+    channelIdPrefix: string,
+    channelIdSuffix: string,
+    secretKey: string,
   ) {
-    this.sora = Sora.connection(signaling_url, this.debug)
+    this.sora = Sora.connection(signalingUrl, this.debug)
 
     // channel_id の生成
-    this.channelId = `${channel_id_prefix}sendonly_recvonly${channel_id_suffix}`
+    this.channelId = `${channelIdPrefix}sendonly_recvonly${channelIdSuffix}`
     // access_token を指定する metadata の生成
-    this.metadata = { access_token: access_token }
+    this.metadata = { access_token: secretKey }
 
     this.connection = this.sora.sendonly(this.channelId, this.metadata, this.options)
     this.connection.on('notify', this.onNotify.bind(this))
@@ -145,9 +140,9 @@ class SoraClient {
 
   // E2E テスト側で実行した方が良い気がする
   async apiDisconnect(): Promise<void> {
-    const apiUrl = import.meta.env.VITE_SORA_API_URL
+    const apiUrl = import.meta.env.VITE_TEST_API_URL
     if (apiUrl === '') {
-      console.error('VITE_SORA_API_URL is not set')
+      console.error('VITE_TEST_API_URL is not set')
     }
     const response = await fetch(apiUrl, {
       method: 'POST',

e2e-tests/index.html

@@ -8,20 +8,18 @@
 <body>
   <div class="container">
     <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="/spotlight_sendonly/">スポットライト配信サンプル</a></li>
-      <li><a href="/spotlight_recvonly/">スポットライト視聴サンプル</a></li>
-      <li><a href="/simulcast/">サイマルキャスト配信/視聴サンプル</a></li>
-      <li><a href="/sendonly_audio/">音声のみ配信サンプル</a></li>
-      <li><a href="/messaging/">メッセージングサンプル</a></li>
-      <li><a href="/whip/">WHIP サンプル</a></li>
-      <li><a href="/whep/">WHEP サンプル</a></li>
+      <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="/spotlight_sendonly/">スポットライト配信テスト</a></li>
+      <li><a href="/spotlight_recvonly/">スポットライト視聴テスト</a></li>
+      <li><a href="/simulcast/">サイマルキャスト配信/視聴テスト</a></li>
+      <li><a href="/sendonly_audio/">音声のみ配信テスト</a></li>
+      <li><a href="/messaging/">メッセージングテスト</a></li>
+      <li><a href="/data_channel_signaling_only/">データチャンネルテスト</a></li>
+      <li><a href="/whip/">WHIP テスト</a></li>
+      <li><a href="/whep/">WHEP テスト</a></li>
     </ul>
   </div>
 </body>

e2e-tests/messaging/main.mts

@@ -16,10 +16,10 @@ const getChannelName = (): string => {
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
-  const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
-  const SORA_CHANNEL_ID_PREFIX = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || ''
-  const SORA_CHANNEL_ID_SUFFIX = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || ''
-  const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || ''
+  const signalingUrl = import.meta.env.VITE_TEST_SIGNALING_URL
+  const channelIdPrefix = import.meta.env.VITE_TEST_CHANNEL_ID_PREFIX || ''
+  const channelIdSuffix = import.meta.env.VITE_TEST_CHANNEL_ID_SUFFIX || ''
+  const secretKey = import.meta.env.VITE_TEST_SECRET_KEY
 
   const soraJsSdkVersion = Sora.version()
   const soraJsSdkVersionElement = document.getElementById('sora-js-sdk-version')
@@ -31,13 +31,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   document.querySelector('#connect')?.addEventListener('click', async () => {
     const channelName = getChannelName()
-    client = new SoraClient(
-      SORA_SIGNALING_URL,
-      SORA_CHANNEL_ID_PREFIX,
-      SORA_CHANNEL_ID_SUFFIX,
-      ACCESS_TOKEN,
-      channelName,
-    )
+    client = new SoraClient(signalingUrl, channelIdPrefix, channelIdSuffix, secretKey, channelName)
     const checkCompress = document.getElementById('check-compress') as HTMLInputElement
     const compress = checkCompress.checked
     const checkHeader = document.getElementById('check-header') as HTMLInputElement
@@ -94,12 +88,12 @@ class SoraClient {
     signalingUrl: string,
     channelIdPrefix: string,
     channelIdSuffix: string,
-    accessToken: string,
+    secretKey: string,
     channelName: string,
   ) {
     this.sora = Sora.connection(signalingUrl, this.debug)
     this.channelId = `${channelIdPrefix}${channelName}${channelIdSuffix}`
-    this.metadata = { access_token: accessToken }
+    this.metadata = { access_token: secretKey }
 
     this.options = {
       dataChannelSignaling: true,

e2e-tests/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "sora-js-sdk-examples",
+  "name": "sora-js-sdk-e2e-tests",
   "scripts": {
     "lint": "biome lint .",
     "fmt": "biome format --write .",

e2e-tests/recvonly/main.mts

@@ -6,18 +6,13 @@ import Sora, {
 
 document.addEventListener('DOMContentLoaded', () => {
   // 環境変数の読み込み
-  const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
-  const SORA_CHANNEL_ID_PREFIX = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || ''
-  const SORA_CHANNEL_ID_SUFFIX = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || ''
-  const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || ''
+  const signalingUrl = import.meta.env.VITE_TEST_SIGNALING_URL
+  const channelIdPrefix = import.meta.env.VITE_TEST_CHANNEL_ID_PREFIX || ''
+  const channelIdSuffix = import.meta.env.VITE_TEST_CHANNEL_ID_SUFFIX || ''
+  const secretKey = import.meta.env.VITE_TEST_SECRET_KEY
 
   // Sora クライアントの初期化
-  const client = new SoraClient(
-    SORA_SIGNALING_URL,
-    SORA_CHANNEL_ID_PREFIX,
-    SORA_CHANNEL_ID_SUFFIX,
-    ACCESS_TOKEN,
-  )
+  const client = new SoraClient(signalingUrl, channelIdPrefix, channelIdSuffix, secretKey)
 
   // SDK バージョンの表示
   const sdkVersionElement = document.querySelector('#sdk-version')

e2e-tests/sendonly/main.mts

@@ -6,17 +6,12 @@ import Sora, {
 } from 'sora-js-sdk'
 
 document.addEventListener('DOMContentLoaded', async () => {
-  const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL
-  const SORA_CHANNEL_ID_PREFIX = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || ''
-  const SORA_CHANNEL_ID_SUFFIX = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || ''
-  const ACCESS_TOKEN = import.meta.env.VITE_ACCESS_TOKEN || ''
-
-  const client = new SoraClient(
-    SORA_SIGNALING_URL,
-    SORA_CHANNEL_ID_PREFIX,
-    SORA_CHANNEL_ID_SUFFIX,
-    ACCESS_TOKEN,
-  )
+  const signalingUrl = import.meta.env.VITE_TEST_SIGNALING_URL
+  const channelIdPrefix = import.meta.env.VITE_TEST_CHANNEL_ID_PREFIX || ''
+  const channelIdSuffix = import.meta.env.VITE_TEST_CHANNEL_ID_SUFFIX || ''
+  const secretKey = import.meta.env.VITE_TEST_SECRET_KEY
+
+  const client = new SoraClient(signalingUrl, channelIdPrefix, channelIdSuffix, secretKey)
 
   // SDK バージョンの表示
   const sdkVersionElement = document.querySelector('#sdk-version')
@@ -69,17 +64,17 @@ class SoraClient {
   private connection: ConnectionPublisher
 
   constructor(
-    signaling_url: string,
-    channel_id_prefix: string,
-    channel_id_suffix: string,
-    access_token: string,
+    signalingUrl: string,
+    channelIdPrefix: string,
+    channelIdSuffix: string,
+    secretKey: string,
   ) {
-    this.sora = Sora.connection(signaling_url, this.debug)
+    this.sora = Sora.connection(signalingUrl, this.debug)
 
     // channel_id の生成
-    this.channelId = `${channel_id_prefix}sendonly_recvonly${channel_id_suffix}`
+    this.channelId = `${channelIdPrefix}sendonly_recvonly${channelIdSuffix}`
     // access_token を指定する metadata の生成
-    this.metadata = { access_token: access_token }
+    this.metadata = { access_token: secretKey }
 
     this.connection = this.sora.sendonly(this.channelId, this.metadata, this.options)
     this.connection.on('notify', this.onNotify.bind(this))