コード整理

shiguredo · Dec 25, 2024 · 7174abc · 7174abc
1 parent ee96dee
commit 7174abc
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 220 deletions.
diff --git 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
@@ -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
@@ -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<string, HTMLCanvasElement>()
   private canvasCtxs = new Map<string, CanvasRenderingContext2D | 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/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<HTMLInputElement>('#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
@@ -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
@@ -6,14 +6,6 @@ import Sora, {
   type ConnectionOptions,
 } from 'sora-js-sdk'
 
-const getChannelName = (): string => {
-  const channelNameElement = document.querySelector<HTMLInputElement>('#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<HTMLSelectElement>('#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
@@ -2,12 +2,12 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Sendonly test</title>
+  <title>Sendonly サンプル</title>
 </head>
 
 <body>
   <div class="container">
-    <h1>Sendonly test</h1>
+    <h1>Sendonly サンプル</h1>
     <h3 id="sdk-version"></h3>
     <button id="connect">connect</button>
     <button id="disconnect">disconnect</button>

diff --git 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
@@ -9,8 +9,6 @@
   <div class="container">
     <h1>Sendrecv test</h1>
     <h3 id="sdk-version"></h3>
-    <label for="channel-name">チャンネル名:</label>
-    <input type="text" id="channel-name" name="channel-name" value="sendrecv"><br>
     <label for="video-codec-type">ビデオコーデックを選択:</label>
     <select id="video-codec-type">
       <option value="" selected>未指定</option>