From 7174abc2e19b79380fd12aeda5fcb49264529a45 Mon Sep 17 00:00:00 2001 From: voluntas Date: Wed, 25 Dec 2024 17:33:43 +0900 Subject: [PATCH] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGES.md | 3 ++ examples/check_stereo/main.mts | 19 +++++---- examples/check_stereo_multi/main.mts | 22 +++++------ examples/messaging/main.mts | 35 +++-------------- examples/recvonly/main.mts | 27 ++++--------- examples/replace_track/main.mts | 31 +++------------ examples/sendonly/index.html | 4 +- examples/sendonly/main.mts | 29 ++++++-------- examples/sendrecv/index.html | 2 - examples/sendrecv/main.mts | 32 +++------------ examples/simulcast/main.mts | 59 +++++++--------------------- examples/spotlight_sendrecv/main.mts | 36 ++++------------- examples/vite-env.d.ts | 6 +-- 13 files changed, 85 insertions(+), 220 deletions(-) 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/examples/check_stereo/main.mts b/examples/check_stereo/main.mts index 4f096b88..57a2c1c7 100644 --- a/examples/check_stereo/main.mts +++ b/examples/check_stereo/main.mts @@ -7,14 +7,13 @@ import Sora, { document.addEventListener('DOMContentLoaded', async () => { // 環境変数の読み込み - const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL + const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL const uuid = crypto.randomUUID() // Sora クライアントの初期化 - const sendonly = new SendonlyClient(SORA_SIGNALING_URL, uuid) - - const recvonly = new RecvonlyClient(SORA_SIGNALING_URL, uuid) + const sendonly = new SendonlyClient(signalingUrl, uuid) + const recvonly = new RecvonlyClient(signalingUrl, uuid) // デバイスリストの取得と設定 await updateDeviceLists() @@ -76,10 +75,10 @@ class SendonlyClient { private channelCheckInterval: number | undefined - constructor(signaling_url: string, channel_id: string) { - this.sora = Sora.connection(signaling_url, this.debug) + constructor(signalingUrl: string, channelId: string) { + this.sora = Sora.connection(signalingUrl, this.debug) - this.channelId = channel_id + this.channelId = channelId this.connection = this.sora.sendonly(this.channelId, undefined, this.options) @@ -273,10 +272,10 @@ class RecvonlyClient { private canvas: HTMLCanvasElement | null = null private canvasCtx: CanvasRenderingContext2D | null = null - constructor(signaling_url: string, channel_id: string) { - this.channelId = channel_id + constructor(signalingUrl: string, channelId: string) { + this.channelId = channelId - this.sora = Sora.connection(signaling_url, this.debug) + this.sora = Sora.connection(signalingUrl, this.debug) this.connection = this.sora.recvonly(this.channelId, undefined, this.options) diff --git a/examples/check_stereo_multi/main.mts b/examples/check_stereo_multi/main.mts index 53274a6f..40b82b88 100644 --- a/examples/check_stereo_multi/main.mts +++ b/examples/check_stereo_multi/main.mts @@ -7,15 +7,15 @@ import Sora, { document.addEventListener('DOMContentLoaded', async () => { // 環境変数の読み込み - const SORA_SIGNALING_URL = import.meta.env.VITE_SORA_SIGNALING_URL + const signalingUrl = import.meta.env.VITE_SORA_SIGNALING_URL const uuid = crypto.randomUUID() // Sora クライアントの初期化 - const sendonly1 = new SendonlyClient(SORA_SIGNALING_URL, uuid, 1) - const sendonly2 = new SendonlyClient(SORA_SIGNALING_URL, uuid, 2) + const sendonly1 = new SendonlyClient(signalingUrl, uuid, 1) + const sendonly2 = new SendonlyClient(signalingUrl, uuid, 2) - const recvonly = new RecvonlyClient(SORA_SIGNALING_URL, uuid) + const recvonly = new RecvonlyClient(signalingUrl, uuid) // デバイスリストの取得と設定 await updateDeviceLists() @@ -101,12 +101,12 @@ class SendonlyClient { private sendonlyClientId: number - constructor(signaling_url: string, channel_id: string, sendonly_client_id: number) { - this.sora = Sora.connection(signaling_url, this.debug) + constructor(signalingUrl: string, channelId: string, sendonlyClientId: number) { + this.sora = Sora.connection(signalingUrl, this.debug) - this.channelId = channel_id + this.channelId = channelId - this.sendonlyClientId = sendonly_client_id + this.sendonlyClientId = sendonlyClientId this.connection = this.sora.sendonly(this.channelId, undefined, this.options) @@ -312,10 +312,10 @@ class RecvonlyClient { private canvases = new Map() private canvasCtxs = new Map() - constructor(signaling_url: string, channel_id: string) { - this.channelId = channel_id + constructor(signalingUrl: string, channelId: string) { + this.channelId = channelId - this.sora = Sora.connection(signaling_url, this.debug) + this.sora = Sora.connection(signalingUrl, this.debug) this.connection = this.sora.recvonly(this.channelId, undefined, this.options) diff --git a/examples/messaging/main.mts b/examples/messaging/main.mts index 411418ca..526ebbf2 100644 --- a/examples/messaging/main.mts +++ b/examples/messaging/main.mts @@ -6,20 +6,10 @@ import Sora, { type DataChannelEvent, } from 'sora-js-sdk' -const getChannelName = (): string => { - const channelNameElement = document.querySelector('#channel-name') - const channelName = channelNameElement?.value - if (channelName === '' || channelName === undefined) { - throw new Error('channelName is empty') - } - return channelName -} - 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_SORA_SIGNALING_URL + const channelId = import.meta.env.VITE_SORA_CHANNEL_ID || '' + const accessToken = import.meta.env.VITE_ACCESS_TOKEN || '' const soraJsSdkVersion = Sora.version() const soraJsSdkVersionElement = document.getElementById('sora-js-sdk-version') @@ -30,14 +20,7 @@ document.addEventListener('DOMContentLoaded', async () => { let client: SoraClient 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, channelId, accessToken) const checkCompress = document.getElementById('check-compress') as HTMLInputElement const compress = checkCompress.checked const checkHeader = document.getElementById('check-header') as HTMLInputElement @@ -90,15 +73,9 @@ class SoraClient { private sora: SoraConnection private connection: ConnectionMessaging - constructor( - signalingUrl: string, - channelIdPrefix: string, - channelIdSuffix: string, - accessToken: string, - channelName: string, - ) { + constructor(signalingUrl: string, channelId: string, accessToken: string) { this.sora = Sora.connection(signalingUrl, this.debug) - this.channelId = `${channelIdPrefix}${channelName}${channelIdSuffix}` + this.channelId = channelId this.metadata = { access_token: accessToken } this.options = { diff --git a/examples/recvonly/main.mts b/examples/recvonly/main.mts index 5193a186..1afa8584 100644 --- a/examples/recvonly/main.mts +++ b/examples/recvonly/main.mts @@ -6,18 +6,12 @@ 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_SORA_SIGNALING_URL + const channelId = import.meta.env.VITE_SORA_CHANNEL_ID + const accessToken = import.meta.env.VITE_ACCESS_TOKEN || '' // Sora クライアントの初期化 - const client = new SoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, - ) + const client = new SoraClient(signalingUrl, channelId, accessToken) // SDK バージョンの表示 const sdkVersionElement = document.querySelector('#sdk-version') @@ -68,18 +62,13 @@ class SoraClient { private sora: SoraConnection private connection: ConnectionSubscriber - constructor( - signaling_url: string, - channel_id_prefix: string, - channel_id_suffix: string, - access_token: string, - ) { - this.sora = Sora.connection(signaling_url, this.debug) + constructor(signalingUrl: string, channelId: string, accessToken: string) { + this.sora = Sora.connection(signalingUrl, this.debug) // channel_id の生成 - this.channelId = `${channel_id_prefix}sendonly_recvonly${channel_id_suffix}` + this.channelId = channelId // access_token を指定する metadata の生成 - this.metadata = { access_token: access_token } + this.metadata = { access_token: accessToken } this.connection = this.sora.recvonly(this.channelId, this.metadata, this.options) this.connection.on('notify', this.onnotify.bind(this)) diff --git a/examples/replace_track/main.mts b/examples/replace_track/main.mts index 25f374fa..4f2fb363 100644 --- a/examples/replace_track/main.mts +++ b/examples/replace_track/main.mts @@ -6,14 +6,6 @@ import Sora, { type ConnectionOptions, } from 'sora-js-sdk' -const getChannelName = (): string => { - const channelNameElement = document.querySelector('#channel-name') - const channelName = channelNameElement?.value - if (channelName === '' || channelName === undefined) { - throw new Error('channelName is empty') - } - return channelName -} const getVideoCodecType = (): VideoCodecType | undefined => { const videoCodecTypeElement = document.querySelector('#video-codec-type') @@ -25,25 +17,16 @@ 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_SORA_SIGNALING_URL + const channelId = import.meta.env.VITE_SORA_CHANNEL_ID || '' + const accessToken = import.meta.env.VITE_ACCESS_TOKEN || '' let client: SoraClient document.querySelector('#connect')?.addEventListener('click', async () => { - const channelName = getChannelName() const videoCodecType = getVideoCodecType() - client = new SoraClient( - SORA_SIGNALING_URL, - SORA_CHANNEL_ID_PREFIX, - SORA_CHANNEL_ID_SUFFIX, - ACCESS_TOKEN, - channelName, - videoCodecType, - ) + client = new SoraClient(signalingUrl, channelId, accessToken, videoCodecType) await client.connect() }) @@ -98,14 +81,12 @@ class SoraClient { constructor( signalingUrl: string, - channelIdPrefix: string, - channelIdSuffix: string, + channelId: string, accessToken: string, - channelName: string, videoCodecType: VideoCodecType | undefined, ) { this.sora = Sora.connection(signalingUrl, this.debug) - this.channelId = `${channelIdPrefix}${channelName}${channelIdSuffix}` + this.channelId = channelId this.metadata = { access_token: accessToken } this.options = {} diff --git a/examples/sendonly/index.html b/examples/sendonly/index.html index 883b7018..add07d52 100644 --- a/examples/sendonly/index.html +++ b/examples/sendonly/index.html @@ -2,12 +2,12 @@ - Sendonly test + Sendonly サンプル
-

Sendonly test

+

Sendonly サンプル

diff --git a/examples/sendonly/main.mts b/examples/sendonly/main.mts index a4ca9a4e..5838ebcc 100644 --- a/examples/sendonly/main.mts +++ b/examples/sendonly/main.mts @@ -6,17 +6,11 @@ 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_SORA_SIGNALING_URL + const channelId = import.meta.env.VITE_SORA_CHANNEL_ID || '' + const accessToken = import.meta.env.VITE_ACCESS_TOKEN || '' + + const client = new SoraClient(signalingUrl, channelId, accessToken) // SDK バージョンの表示 const sdkVersionElement = document.querySelector('#sdk-version') @@ -69,17 +63,16 @@ class SoraClient { private connection: ConnectionPublisher constructor( - signaling_url: string, - channel_id_prefix: string, - channel_id_suffix: string, - access_token: string, + signalingUrl: string, + channelId: string, + accessToken: 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 = channelId // access_token を指定する metadata の生成 - this.metadata = { access_token: access_token } + this.metadata = { access_token: accessToken } this.connection = this.sora.sendonly(this.channelId, this.metadata, this.options) this.connection.on('notify', this.onNotify.bind(this)) diff --git a/examples/sendrecv/index.html b/examples/sendrecv/index.html index ad144a5a..8e80475f 100644 --- a/examples/sendrecv/index.html +++ b/examples/sendrecv/index.html @@ -9,8 +9,6 @@

Sendrecv test

- -