examples の spotlight sendonly / recvonly を class 化

shiguredo · Feb 29, 2024 · b3572af · b3572af
1 parent 421820d
commit b3572af
Show file tree

Hide file tree

Showing 9 changed files with 250 additions and 125 deletions.
diff --git a/examples/sendonly/index.html b/examples/sendonly/index.html
@@ -16,7 +16,6 @@ <h1>Sendonly test</h1>
   </div>
 
   <script type="module" src="./main.mts"></script>
-  </script>
 </body>
 
 </html>
diff --git a/examples/sendonly/main.mts b/examples/sendonly/main.mts
@@ -19,19 +19,11 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   document.querySelector('#start')?.addEventListener('click', async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-    const videoElement = document.querySelector<HTMLVideoElement>('#local-video')
-    if (videoElement !== null) {
-      videoElement.srcObject = stream
-    }
     await client.connect(stream)
   })
 
   document.querySelector('#stop')?.addEventListener('click', async () => {
     await client.disconnect()
-    const videoElement = document.querySelector<HTMLVideoElement>('#local-video')
-    if (videoElement !== null) {
-      videoElement.srcObject = null
-    }
   })
 })
 
@@ -63,10 +55,20 @@ class SoraClient {
 
   async connect(stream: MediaStream): Promise<void> {
     await this.connection.connect(stream)
+
+    const videoElement = document.querySelector<HTMLVideoElement>('#local-video')
+    if (videoElement !== null) {
+      videoElement.srcObject = stream
+    }
   }
 
   async disconnect(): Promise<void> {
     await this.connection.disconnect()
+
+    const videoElement = document.querySelector<HTMLVideoElement>('#local-video')
+    if (videoElement !== null) {
+      videoElement.srcObject = null
+    }
   }
 
   private onnotify(event: SignalingNotifyMessage): void {

diff --git a/examples/spotlight_recvonly/index.html b/examples/spotlight_recvonly/index.html
@@ -8,15 +8,15 @@
 <body>
   <div class="container">
     <h1>Spotlight Recvonly test</h1>
-    <button id="start-recvonly">start</button>
-    <button id="stop-recvonly">stop</button><br />
-    <div id="recvonly-connection-id"></div>
+    <button id="start">start</button>
+    <button id="stop">stop</button><br />
+    <div id="connection-id"></div>
     <div style="display: flex;">
       <div id="remote-videos"></div>
     </div>
   </div>
 
-  <script type="module" src="./main.mjs"></script>
+  <script type="module" src="./main.mts"></script>
 </body>
 
 </html>
diff --git a/examples/spotlight_recvonly/main.mjs b/examples/spotlight_recvonly/main.mjs
diff --git a/examples/spotlight_recvonly/main.mts b/examples/spotlight_recvonly/main.mts
@@ -0,0 +1,120 @@
+import Sora, {
+  type SoraConnection,
+  type SignalingNotifyMessage,
+  type ConnectionSubscriber,
+} from '../../dist/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 || ''
+
+  // Sora クライアントの初期化
+  const client = new SoraClient(
+    SORA_SIGNALING_URL,
+    SORA_CHANNEL_ID_PREFIX,
+    SORA_CHANNEL_ID_SUFFIX,
+    ACCESS_TOKEN,
+  )
+
+  document.querySelector('#start')?.addEventListener('click', async () => {
+    await client.connect()
+  })
+
+  document.querySelector('#stop')?.addEventListener('click', async () => {
+    await client.disconnect()
+  })
+})
+
+class SoraClient {
+  private debug = false
+  private channelId: string
+  private metadata: { access_token: string }
+  private options: object = {}
+
+  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)
+
+    this.options = {
+      multistream: true,
+      simulcast: true,
+      spotlight: true,
+    }
+
+    // channel_id の生成
+    this.channelId = `${channel_id_prefix}spotlight_sendonly_recvonly${channel_id_suffix}`
+    // access_token を指定する metadata の生成
+    this.metadata = { access_token: access_token }
+
+    this.connection = this.sora.recvonly(this.channelId, this.metadata, this.options)
+    this.connection.on('notify', this.onnotify.bind(this))
+    this.connection.on('track', this.ontrack.bind(this))
+    this.connection.on('removetrack', this.onremovetrack.bind(this))
+  }
+
+  async connect(): Promise<void> {
+    await this.connection.connect()
+  }
+
+  async disconnect(): Promise<void> {
+    await this.connection.disconnect()
+    const remoteVideos = document.querySelector('#remote-videos')
+    if (remoteVideos) {
+      remoteVideos.innerHTML = ''
+    }
+
+    const connectionIdElement = document.querySelector<HTMLDivElement>('#connection-id')
+    if (connectionIdElement) {
+      connectionIdElement.textContent = null
+    }
+  }
+
+  private onnotify(event: SignalingNotifyMessage) {
+    // 自分の connection_id を取得する
+    if (
+      event.event_type === 'connection.created' &&
+      this.connection.connectionId === event.connection_id
+    ) {
+      const connectionIdElement = document.querySelector<HTMLDivElement>('#connection-id')
+      if (connectionIdElement) {
+        connectionIdElement.textContent = event.connection_id
+      }
+    }
+  }
+
+  private ontrack(event: RTCTrackEvent) {
+    // Sora の場合、event.streams には MediaStream が 1 つだけ含まれる
+    const stream = event.streams[0]
+    const remoteVideoId = `remotevideo-${stream.id}`
+    const remoteVideos = document.querySelector<HTMLDivElement>('#remote-videos')
+    if (remoteVideos && !remoteVideos.querySelector(`#${remoteVideoId}`)) {
+      const remoteVideo = document.createElement('video')
+      remoteVideo.id = remoteVideoId
+      remoteVideo.style.border = '1px solid red'
+      remoteVideo.autoplay = true
+      remoteVideo.playsInline = true
+      remoteVideo.controls = true
+      remoteVideo.srcObject = stream
+      remoteVideos.appendChild(remoteVideo)
+    }
+  }
+
+  private onremovetrack(event: MediaStreamTrackEvent) {
+    // このトラックが属している MediaStream の id を取得する
+    const stream = event.target as MediaStream
+    const remoteVideo = document.querySelector(`#remotevideo-${stream.id}`)
+    if (remoteVideo) {
+      document.querySelector('#remote-videos')?.removeChild(remoteVideo)
+    }
+  }
+}
diff --git a/examples/spotlight_sendonly/index.html b/examples/spotlight_sendonly/index.html
@@ -8,14 +8,15 @@
 <body>
   <div class="container">
     <h1>Spotlight Sendonly test</h1>
-    <button id="start-sendonly">start</button>
-    <button id="stop-sendonly">stop</button><br />
-    <video id="sendonly-local-video" autoplay="" playsinline="" controls=""
+    <button id="start">start</button>
+    <button id="stop">stop</button><br />
+    <div id="connection-id"></div>
+    <video id="local-video" autoplay="" playsinline="" controls=""
       style="width: 320px; height: 240px; border: 1px solid black;"></video>
-    <div id="sendonly-connection-id"></div>
   </div>
 
-  <script type="module" src="./main.mjs"></script>
+  <script type="module" src="./main.mts"></script>
+  </script>
 </body>
 
 </html>
diff --git a/examples/spotlight_sendonly/main.mjs b/examples/spotlight_sendonly/main.mjs
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,6 @@ <h1>Sendonly test</h1> @@
       </div>
       <script type="module" src="./main.mts"></script>
-      </script>
     </body>
     </html>