Merge branch 'develop' into feature/check-stereo

CHANGES.md

@@ -11,6 +11,15 @@
 
 ## develop
 
+- [CHANGE] Sora 側からの切断の SoraCloseEvent の title を `SHUTDOWN` に変更する
+  - @voluntas
+- [ADD] DataChannel のみのシグナリングを利用している際、 Sora から切断された場合に送られてくる `"type": "close"` メッセージの処理を追加する
+  - WebSocket シグナリングには Close フレームの Code/Reason があるが、DataChannel シグナリングのみでは判断ができないため
+  - `"type": "close"` は DataChannel シグナリング経由でのみ送られてくる
+  - @voluntas
+- [CHANGE] ブラウザでは非推奨となっている `addstream` と `removestream` コールバックを削除する
+  - 廃止宣言から 4 年位経過した
+  - @voluntas
 - [CHANGE] メッセージングを送信する `sendMessage` が `void` ではなく `Promise<void>` を返すようになりました
   - DataChannel の切断部分のロジックを大幅に書き換えた
   - 複数回 Disconnect を呼んだときの挙動に懸念あり
@@ -26,6 +35,11 @@
 
 ### misc
 
+- [FIX] RTCPeerConnection.close は Promise ではないので await しないようにする
+  - @voluntas
+- [CHANGE] ビルドシステムを Vite に変更する
+  - Rollup 関連を削除
+  - @voluntas
 - [ADD] サンプルに getStats を追加する
   - sendrecv / sendonly / recvonly / messaging / simulcast
   - dataset に getStats の結果を入れて E2E テストで利用しやすくする

TYPEDOC.md

@@ -16,7 +16,7 @@ Please read <https://github.com/shiguredo/oss> before use.
 
 Apache License 2.0
 
-```
+```text
 Copyright 2017-2024, Shiguredo Inc.
 Copyright 2017-2022, Yuki Ito (Original Author)
 

biome.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
   "organizeImports": {
     "enabled": true
   },

docs/DEV.md

@@ -13,7 +13,7 @@
 ## 開発準備
 
 - `pnpm install` を実行
-- `pnpm run start` でローカルサーバを起動する
+- `pnpm run dev` でローカルサーバを起動する
 
 ## 開発
 

examples/messaging/index.html

@@ -14,8 +14,12 @@ <h1>DataChannel messaging test</h1>
       <input type="text" name="message" />
       <button id="send-message" disabled>sendMessage</button><br />
     </div>
-    <button id="start">start</button>
-    <button id="stop" disabled>stop</button>
+    <div>
+      <input type="checkbox" id="check-compress" checked />
+      <label for="check-compress">Compress</label>
+    </div>
+    <button id="connect">connect</button>
+    <button id="disconnect" disabled>disconnect</button>
     <button id="get-stats">getStats</button><br />
     <div>
       <h3>messaging</h3>

examples/messaging/main.mts

@@ -19,10 +19,13 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
-    await client.connect()
+  document.querySelector('#connect')?.addEventListener('click', async () => {
+    const checkCompress = document.getElementById('check-compress') as HTMLInputElement
+    const compress = checkCompress.checked
+
+    await client.connect(compress)
   })
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
   document.querySelector('#send-message')?.addEventListener('click', async () => {
@@ -96,35 +99,43 @@ class SoraClient {
     this.connection.on('message', this.onmessage.bind(this))
   }
 
-  async connect() {
-    // start ボタンを無効にする
-    const startButton = document.querySelector<HTMLButtonElement>('#start')
-    if (startButton) {
-      startButton.disabled = true
+  async connect(compress: boolean) {
+    // connect ボタンを無効にする
+    const connectButton = document.querySelector<HTMLButtonElement>('#connect')
+    if (connectButton) {
+      connectButton.disabled = true
     }
 
+    // dataChannels の compress の設定を上書きする
+    this.connection.options.dataChannels = [
+      {
+        label: '#example',
+        direction: 'sendrecv',
+        compress: compress,
+      },
+    ]
     await this.connection.connect()
 
-    // stop ボタンを有効にする
-    const stopButton = document.querySelector<HTMLButtonElement>('#stop')
-    if (stopButton) {
-      stopButton.disabled = false
+    // disconnect ボタンを有効にする
+    const disconnectButton = document.querySelector<HTMLButtonElement>('#disconnect')
+    if (disconnectButton) {
+      disconnectButton.disabled = false
     }
   }
 
   async disconnect() {
     await this.connection.disconnect()
 
-    // start ボタンを有効にする
-    const startButton = document.querySelector<HTMLButtonElement>('#start')
-    if (startButton) {
-      startButton.disabled = false
+    // connect ボタンを有効にする
+    const connectButton = document.querySelector<HTMLButtonElement>('#connect')
+    if (connectButton) {
+      connectButton.disabled = false
     }
 
-    // stop ボタンを無効にする
-    const stopButton = document.querySelector<HTMLButtonElement>('#stop')
-    if (stopButton) {
-      stopButton.disabled = true
+    // disconnect ボタンを無効にする
+    const disconnectButton = document.querySelector<HTMLButtonElement>('#disconnect')
+    if (disconnectButton) {
+      disconnectButton.disabled = true
     }
 
     const receivedMessagesElement = document.querySelector('#received-messages')

examples/recvonly/index.html

@@ -8,8 +8,8 @@
 <body>
   <div class="container">
     <h1>Recvonly test</h1>
-    <button id="start">start</button>
-    <button id="stop">stop</button>
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />
     <div id="connection-id"></div>
     <div style="display: flex;">

examples/recvonly/main.mts

@@ -19,11 +19,11 @@ document.addEventListener('DOMContentLoaded', () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     await client.connect()
   })
 
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
 

examples/sendonly/index.html

@@ -8,8 +8,8 @@
 <body>
   <div class="container">
     <h1>Sendonly test</h1>
-    <button id="start">start</button>
-    <button id="stop">stop</button>
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />
     <div id="connection-id"></div>
     <video id="local-video" autoplay="" playsinline="" controls="" muted=""

examples/sendonly/main.mts

@@ -17,12 +17,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
     await client.connect(stream)
   })
 
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
 

examples/sendonly_audio/index.html

@@ -25,8 +25,8 @@ <h1>Sendonly Audio Test</h1>
       <option value="384">384 kbps</option>
     </select>
     <br />
-    <button id="start">start</button>
-    <button id="stop">stop</button>
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button>
     <br />
     <div id="connection-id"></div>

examples/sendonly_audio/main.mts

@@ -17,7 +17,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true })
 
     // 音声コーデックの選択を取得
@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     await client.connect(stream, selectedCodecType, selectedBitRate)
   })
 
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
 

examples/sendrecv/index.html

@@ -8,8 +8,8 @@
 <body>
   <div class="container">
     <h1>Sendrecv test</h1>
-    <button id="start">start</button>
-    <button id="stop">stop</button>
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />
     <div id="connection-id"></div>
     <video id="local-video" autoplay="" playsinline="" controls="" muted=""

examples/sendrecv/main.mts

@@ -17,11 +17,11 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
     await client.connect(stream)
   })
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
 

examples/simulcast/index.html

@@ -8,8 +8,8 @@
 <body>
   <div class="container">
     <h1>Simulcast test</h1>
-    <button id="start">start</button>
-    <button id="stop">stop</button>
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button>
     <button id="get-stats">getStats</button><br />
     <div>
       <h2>sendonly</h2>

examples/simulcast/main.mts

@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => {
     'r2',
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     // sendonly
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: false,
@@ -59,7 +59,7 @@ document.addEventListener('DOMContentLoaded', () => {
     await recvonlyR2.connect()
   })
 
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await sendonly.disconnect()
 
     // recvonly r0

examples/spotlight_recvonly/index.html

@@ -8,8 +8,8 @@
 <body>
   <div class="container">
     <h1>Spotlight Recvonly test</h1>
-    <button id="start">start</button>
-    <button id="stop">stop</button><br />
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button><br />
     <div id="connection-id"></div>
     <div style="display: flex;">
       <div id="remote-videos"></div>

examples/spotlight_recvonly/main.mts

@@ -19,11 +19,11 @@ document.addEventListener('DOMContentLoaded', () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     await client.connect()
   })
 
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
 })

examples/spotlight_sendonly/index.html

@@ -8,8 +8,8 @@
 <body>
   <div class="container">
     <h1>Spotlight Sendonly test</h1>
-    <button id="start">start</button>
-    <button id="stop">stop</button><br />
+    <button id="connect">connect</button>
+    <button id="disconnect">disconnect</button><br />
     <div id="connection-id"></div>
     <video id="local-video" autoplay="" playsinline="" controls=""
       style="width: 320px; height: 240px; border: 1px solid black;"></video>

examples/spotlight_sendonly/main.mts

@@ -17,12 +17,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#start')?.addEventListener('click', async () => {
+  document.querySelector('#connect')?.addEventListener('click', async () => {
     const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
     await client.connect(stream)
   })
 
-  document.querySelector('#stop')?.addEventListener('click', async () => {
+  document.querySelector('#disconnect')?.addEventListener('click', async () => {
     await client.disconnect()
   })
 })

examples/spotlight_sendrecv/index.html

@@ -11,17 +11,17 @@ <h1>Spotlight Sendrecv test</h1>
     <div style="display: flex;">
       <div>
         <h2>sendrecv1</h2>
-        <button id="sendrecv1-start">start</button>
-        <button id="sendrecv1-stop">stop</button><br />
+        <button id="sendrecv1-connect">connect</button>
+        <button id="sendrecv1-disconnect">disconnect</button><br />
         <video id="sendrecv1-local-video" autoplay="" playsinline="" controls=""
           style="width: 320px; height: 240px; border: 1px solid black;"></video>
         <div id="sendrecv1-connection-id"></div>
         <div id="sendrecv1-remote-videos"></div>
       </div>
       <div>
         <h2>sendrecv2</h2>
-        <button id="sendrecv2-start">start</button>
-        <button id="sendrecv2-stop">stop</button><br />
+        <button id="sendrecv2-connect">connect</button>
+        <button id="sendrecv2-disconnect">disconnect</button><br />
         <video id="sendrecv2-local-video" autoplay="" playsinline="" controls=""
           style="width: 320px; height: 240px; border: 1px solid black;"></video>
         <div id="sendrecv2-connection-id"></div>

examples/spotlight_sendrecv/main.mts

@@ -26,21 +26,21 @@ document.addEventListener('DOMContentLoaded', async () => {
     ACCESS_TOKEN,
   )
 
-  document.querySelector('#sendrecv1-start')?.addEventListener('click', async () => {
+  document.querySelector('#sendrecv1-connect')?.addEventListener('click', async () => {
     // sendrecv1
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
     await sendrecv1.connect(stream)
   })
-  document.querySelector('#sendrecv1-stop')?.addEventListener('click', async () => {
+  document.querySelector('#sendrecv1-disconnect')?.addEventListener('click', async () => {
     await sendrecv1.disconnect()
   })
 
-  document.querySelector('#sendrecv2-start')?.addEventListener('click', async () => {
+  document.querySelector('#sendrecv2-connect')?.addEventListener('click', async () => {
     // sendrecv2
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
     await sendrecv2.connect(stream)
   })
-  document.querySelector('#sendrecv2-stop')?.addEventListener('click', async () => {
+  document.querySelector('#sendrecv2-disconnect')?.addEventListener('click', async () => {
     await sendrecv2.disconnect()
   })
 })