diff --git a/.env.template b/.env.template index 772ed632..649cdfc0 100644 --- a/.env.template +++ b/.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 \ No newline at end of file +# テストに利用する 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= \ No newline at end of file diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml index 6770a991..73fd39d8 100644 --- a/.github/workflows/e2e-test.yml +++ b/.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: diff --git a/.github/workflows/npm-pkg-e2e-test.yml b/.github/workflows/npm-pkg-e2e-test.yml index 37564990..473202c6 100644 --- a/.github/workflows/npm-pkg-e2e-test.yml +++ b/.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: diff --git a/CHANGES.md b/CHANGES.md index 1cc372d1..a9263200 100644 --- a/CHANGES.md +++ b/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 diff --git a/README.md b/README.md index aefd3206..c9d69466 100644 --- a/README.md +++ b/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 音声トラック、 diff --git a/biome.jsonc b/biome.jsonc index 144a0739..198592e1 100644 --- a/biome.jsonc +++ b/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, diff --git a/e2e-tests/data_channel_signaling_only/index.html b/e2e-tests/data_channel_signaling_only/index.html index c44ec923..eb2965d0 100644 --- a/e2e-tests/data_channel_signaling_only/index.html +++ b/e2e-tests/data_channel_signaling_only/index.html @@ -2,12 +2,12 @@ - Sendonly test + DataChannelSignalingOnly test
-

Sendonly test

+

DataChannelSignalingOnly test

diff --git a/e2e-tests/data_channel_signaling_only/main.mts b/e2e-tests/data_channel_signaling_only/main.mts index 95c0da32..26f4c907 100644 --- a/e2e-tests/data_channel_signaling_only/main.mts +++ b/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 { - 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', diff --git a/e2e-tests/index.html b/e2e-tests/index.html index 6062d99e..653e4f3b 100644 --- a/e2e-tests/index.html +++ b/e2e-tests/index.html @@ -8,20 +8,18 @@
diff --git a/e2e-tests/messaging/main.mts b/e2e-tests/messaging/main.mts index 411418ca..81a8ef17 100644 --- a/e2e-tests/messaging/main.mts +++ b/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, diff --git a/e2e-tests/package.json b/e2e-tests/package.json index 97f6e2a5..d027db46 100644 --- a/e2e-tests/package.json +++ b/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 .", diff --git a/e2e-tests/recvonly/main.mts b/e2e-tests/recvonly/main.mts index 5193a186..c19bfd25 100644 --- a/e2e-tests/recvonly/main.mts +++ b/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') diff --git a/e2e-tests/sendonly/main.mts b/e2e-tests/sendonly/main.mts index a4ca9a4e..c8732509 100644 --- a/e2e-tests/sendonly/main.mts +++ b/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)) diff --git a/e2e-tests/sendonly_audio/main.mts b/e2e-tests/sendonly_audio/main.mts index 9305e06b..dd8305e8 100644 --- a/e2e-tests/sendonly_audio/main.mts +++ b/e2e-tests/sendonly_audio/main.mts @@ -5,17 +5,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) document.querySelector('#connect')?.addEventListener('click', async () => { const stream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true }) @@ -73,17 +68,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_audio_codec${channel_id_suffix}` + this.channelId = `${channelIdPrefix}sendonly_audio_codec${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)) diff --git a/e2e-tests/sendrecv/main.mts b/e2e-tests/sendrecv/main.mts index ca7f2c6d..9cef7cb8 100644 --- a/e2e-tests/sendrecv/main.mts +++ b/e2e-tests/sendrecv/main.mts @@ -25,10 +25,10 @@ const getVideoCodecType = (): VideoCodecType | undefined => { } 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 let client: SoraClient @@ -37,10 +37,10 @@ document.addEventListener('DOMContentLoaded', async () => { const videoCodecType = getVideoCodecType() client = new SoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, channelName, videoCodecType, ) @@ -92,7 +92,7 @@ class SoraClient { signalingUrl: string, channelIdPrefix: string, channelIdSuffix: string, - accessToken: string, + secretKey: string, channelName: string, videoCodecType: VideoCodecType | undefined, ) { @@ -100,7 +100,7 @@ class SoraClient { this.channelId = `${channelIdPrefix}${channelName}${channelIdSuffix}` - this.metadata = { access_token: accessToken } + this.metadata = { access_token: secretKey } this.options = {} if (videoCodecType !== undefined) { diff --git a/e2e-tests/simulcast/main.mts b/e2e-tests/simulcast/main.mts index b34ed3ea..d195cfb3 100644 --- a/e2e-tests/simulcast/main.mts +++ b/e2e-tests/simulcast/main.mts @@ -7,39 +7,39 @@ import Sora, { } from 'sora-js-sdk' 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 const sendonly = new SimulcastSendonlySoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, ) const recvonlyR0 = new SimulcastRecvonlySoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, 'r0', ) const recvonlyR1 = new SimulcastRecvonlySoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, 'r1', ) const recvonlyR2 = new SimulcastRecvonlySoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, 'r2', ) @@ -104,17 +104,17 @@ class SimulcastSendonlySoraClient { 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.channelId = `${channel_id_prefix}simulcast${channel_id_suffix}` + this.channelId = `${channelIdPrefix}simulcast${channelIdSuffix}` - this.sora = Sora.connection(signaling_url, this.debug) + this.sora = Sora.connection(signalingUrl, this.debug) this.connection = this.sora.sendonly( this.channelId, - { access_token }, + { access_token: secretKey }, { audio: false, video: true, videoCodecType: 'VP8', videoBitRate: 2500, simulcast: true }, ) @@ -167,19 +167,19 @@ class SimulcastRecvonlySoraClient { private connection: ConnectionSubscriber constructor( - signaling_url: string, - channel_id_prefix: string, - channel_id_suffix: string, - access_token: string, + signalingUrl: string, + channelIdPrefix: string, + channelIdSuffix: string, + secretKey: string, rid: SimulcastRid, ) { - this.channelId = `${channel_id_prefix}simulcast${channel_id_suffix}` + this.channelId = `${channelIdPrefix}simulcast${channelIdSuffix}` this.rid = rid - this.sora = Sora.connection(signaling_url, this.debug) + this.sora = Sora.connection(signalingUrl, this.debug) this.connection = this.sora.recvonly( this.channelId, - { access_token }, + { access_token: secretKey }, { simulcastRid: this.rid, simulcast: true }, ) diff --git a/e2e-tests/spotlight_recvonly/main.mts b/e2e-tests/spotlight_recvonly/main.mts index 7e00cf48..d3f343c3 100644 --- a/e2e-tests/spotlight_recvonly/main.mts +++ b/e2e-tests/spotlight_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) document.querySelector('#connect')?.addEventListener('click', async () => { await client.connect() @@ -38,12 +33,12 @@ class SoraClient { private connection: ConnectionSubscriber 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) this.options = { multistream: true, @@ -52,9 +47,9 @@ class SoraClient { } // channel_id の生成 - this.channelId = `${channel_id_prefix}spotlight_sendonly_recvonly${channel_id_suffix}` + this.channelId = `${channelIdPrefix}spotlight_recvonly${channelIdSuffix}` // access_token を指定する metadata の生成 - this.metadata = { access_token: access_token } + this.metadata = { access_token: secretKey } this.connection = this.sora.recvonly(this.channelId, this.metadata, this.options) this.connection.on('notify', this.onnotify.bind(this)) diff --git a/e2e-tests/spotlight_sendonly/main.mts b/e2e-tests/spotlight_sendonly/main.mts index bc80563c..d93272e0 100644 --- a/e2e-tests/spotlight_sendonly/main.mts +++ b/e2e-tests/spotlight_sendonly/main.mts @@ -5,17 +5,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) document.querySelector('#connect')?.addEventListener('click', async () => { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) @@ -37,12 +32,12 @@ 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) this.options = { multistream: true, @@ -51,9 +46,9 @@ class SoraClient { } // channel_id の生成 - this.channelId = `${channel_id_prefix}spotlight_sendonly_recvonly${channel_id_suffix}` + this.channelId = `${channelIdPrefix}spotlight_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)) diff --git a/e2e-tests/spotlight_sendrecv/main.mts b/e2e-tests/spotlight_sendrecv/main.mts index e9ee49ca..10d6fef0 100644 --- a/e2e-tests/spotlight_sendrecv/main.mts +++ b/e2e-tests/spotlight_sendrecv/main.mts @@ -5,25 +5,25 @@ 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 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 sendrecv1 = new SoraClient( 'sendrecv1', - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, ) const sendrecv2 = new SoraClient( 'sendrecv2', - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, + signalingUrl, + channelIdPrefix, + channelIdSuffix, + secretKey, ) document.querySelector('#sendrecv1-connect')?.addEventListener('click', async () => { @@ -63,13 +63,13 @@ class SoraClient { signalingUrl: string, channelIdPrefix: string, channelIdSuffix: string, - accessToken: string, + secretKey: string, ) { this.label = label this.sora = Sora.connection(signalingUrl, this.debug) this.channelId = `${channelIdPrefix}spotlight_sendrecv${channelIdSuffix}` - this.metadata = { access_token: accessToken } + this.metadata = { access_token: secretKey } this.options = { audio: true, video: true, diff --git a/e2e-tests/vite-env.d.ts b/e2e-tests/vite-env.d.ts index e71a892a..c6e893f9 100644 --- a/e2e-tests/vite-env.d.ts +++ b/e2e-tests/vite-env.d.ts @@ -1,14 +1,14 @@ /// interface ImportMetaEnv { - VITE_SORA_SIGNALING_URL: string - VITE_SORA_API_URL: string - VITE_SORA_CHANNEL_ID_PREFIX: string - VITE_SORA_CHANNEL_ID_SUFFIX: string - VITE_ACCESS_TOKEN: string + VITE_TEST_SIGNALING_URL: string + VITE_TEST_API_URL: string + VITE_TEST_CHANNEL_ID_PREFIX: string + VITE_TEST_CHANNEL_ID_SUFFIX: string + VITE_TEST_SECRET_KEY: string - VITE_SORA_WHIP_ENDPOINT_URL: string - VITE_SORA_WHEP_ENDPOINT_URL: string + VITE_TEST_WHIP_ENDPOINT_URL: string + VITE_TEST_WHEP_ENDPOINT_URL: string } interface ImportMeta { diff --git a/e2e-tests/whep/main.mts b/e2e-tests/whep/main.mts index 4f08e240..2b59fa69 100644 --- a/e2e-tests/whep/main.mts +++ b/e2e-tests/whep/main.mts @@ -1,8 +1,8 @@ document.addEventListener('DOMContentLoaded', async () => { - const endpointUrl = import.meta.env.VITE_SORA_WHEP_ENDPOINT_URL - const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || '' - const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || '' - const accessToken = import.meta.env.VITE_ACCESS_TOKEN + const endpointUrl = import.meta.env.VITE_TEST_WHEP_ENDPOINT_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 let whepClient: WhepClient | undefined @@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded', async () => { throw new Error('Video codec type select element not found') } - whepClient = new WhepClient(endpointUrl, channelId, videoCodecTypeElement.value, accessToken) + whepClient = new WhepClient(endpointUrl, channelId, videoCodecTypeElement.value, secretKey) await whepClient.connect() }) @@ -38,14 +38,14 @@ class WhepClient { private channelId: string private videoCodecType: string - private accessToken: string + private secretKey: string private pc: RTCPeerConnection | undefined - constructor(endpointUrl: string, channelId: string, videoCodecType: string, accessToken: string) { + constructor(endpointUrl: string, channelId: string, videoCodecType: string, secretKey: string) { this.endpointUrl = endpointUrl this.channelId = channelId this.videoCodecType = videoCodecType - this.accessToken = accessToken + this.secretKey = secretKey } async connect(): Promise { @@ -112,7 +112,7 @@ class WhepClient { const response = await fetch(whepEndpointUrl, { method: 'POST', headers: { - Authorization: `Bearer ${this.accessToken}`, + Authorization: `Bearer ${this.secretKey}`, 'Content-Type': 'application/sdp', }, body: offer.sdp, @@ -165,7 +165,7 @@ class WhepClient { const response = await fetch(this.resourceUrl, { method: 'DELETE', headers: { - Authorization: `Bearer ${this.accessToken}`, + Authorization: `Bearer ${this.secretKey}`, }, }) diff --git a/e2e-tests/whip/main.mts b/e2e-tests/whip/main.mts index bc174d2c..06bec2a5 100644 --- a/e2e-tests/whip/main.mts +++ b/e2e-tests/whip/main.mts @@ -1,8 +1,8 @@ document.addEventListener('DOMContentLoaded', async () => { - const endpointUrl = import.meta.env.VITE_SORA_WHIP_ENDPOINT_URL - const channelIdPrefix = import.meta.env.VITE_SORA_CHANNEL_ID_PREFIX || '' - const channelIdSuffix = import.meta.env.VITE_SORA_CHANNEL_ID_SUFFIX || '' - const accessToken = import.meta.env.VITE_ACCESS_TOKEN + const endpointUrl = import.meta.env.VITE_TEST_WHIP_ENDPOINT_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 let whipClient: WhipClient | undefined @@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded', async () => { throw new Error('Video codec type select element not found') } - whipClient = new WhipClient(endpointUrl, channelId, videoCodecTypeElement.value, accessToken) + whipClient = new WhipClient(endpointUrl, channelId, videoCodecTypeElement.value, secretKey) const stream = await navigator.mediaDevices.getUserMedia({ video: true, @@ -58,16 +58,16 @@ class WhipClient { private videoCodecType: string - private accessToken: string + private secretKey: string private pc: RTCPeerConnection | undefined private stream: MediaStream | undefined - constructor(endpointUrl: string, channelId: string, videoCodecType: string, accessToken: string) { + constructor(endpointUrl: string, channelId: string, videoCodecType: string, secretKey: string) { this.endpointUrl = endpointUrl this.channelId = channelId this.videoCodecType = videoCodecType - this.accessToken = accessToken + this.secretKey = secretKey } async connect(stream: MediaStream, channelId: string): Promise { @@ -137,7 +137,7 @@ class WhipClient { method: 'POST', headers: { // 認証は Bearer Token を利用する - Authorization: `Bearer ${this.accessToken}`, + Authorization: `Bearer ${this.secretKey}`, // application/sdp を指定する 'Content-Type': 'application/sdp', }, @@ -196,7 +196,7 @@ class WhipClient { const response = await fetch(this.resourceUrl, { method: 'DELETE', headers: { - Authorization: `Bearer ${this.accessToken}`, + Authorization: `Bearer ${this.secretKey}`, }, }) diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 00000000..14732d02 --- /dev/null +++ b/examples/README.md @@ -0,0 +1,13 @@ +# Sora JavaScript SDK サンプル + +## 使い方 + +```bash +$ git clone git@github.com:shiguredo/sora-js-sdk.git +$ cd sora-js-sdk +# .env.local を作成して適切な値を設定してください +$ cp .env.template .env.local +$ pnpm install +$ pnpm build +$ pnpm dev +``` diff --git a/e2e-tests/check_stereo/index.html b/examples/check_stereo/index.html similarity index 93% rename from e2e-tests/check_stereo/index.html rename to examples/check_stereo/index.html index 6a1d52e8..590b4bfc 100644 --- a/e2e-tests/check_stereo/index.html +++ b/examples/check_stereo/index.html @@ -2,7 +2,7 @@ - Stereo Check + Stereo Check シンプルサンプル