Merge branch 'release/2020.2'

OpenAyame · Apr 3, 2020 · 8333e61 · 8333e61
2 parents b8e4b31 + 892884d
commit 8333e61
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 168 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -11,9 +11,29 @@
 
 ## develop
 
+## 2020.2
+
+**DataChannel 関連で下位互換性がなくなっていますので注意してください**
+
+- [CHANGE] addDataChannel, sendData を削除する
+    - @Hexa
+- [CHANGE] on('data') コールバックを削除する
+    - @Hexa
+- [ADD] createDataChannel を追加する
+    - @Hexa
+- [ADD] on('datachannel') コールバックを追加する
+    - @Hexa
+- [FIX] offer 側の場合のみ RTCDataChannel オブジェクトを作成するように修正する
+    - @Hexa
+- [CHANGE] Ayame が isExistUser を送ってくる場合のみ接続できるようにする
+    - @Hexa
+- [FIX] bye を受信した場合にも on('disconnect') コールバックが発火するように修正する
+    - @Hexa
+
 ## 2020.1.2
 
 - [FIX] 依存ライブラリを最新にする
+    - @voluntas
 
 ## 2020.1.1
 

diff --git a/README.md b/README.md
@@ -30,21 +30,21 @@ https://openayame.github.io/ayame-web-sdk/index.html
 以下のURL を
 
 ```
-<script src="https://unpkg.com/@open-ayame/ayame-web-sdk@2020.1.1/dist/ayame.min.js"></script>
+<script src="https://unpkg.com/@open-ayame/ayame-web-sdk@2020.1.2/dist/ayame.min.js"></script>
 ```
 
 のように指定すると、npm などを経由せず簡単に Ayame を利用することができます。
 
 ### unpkg
 
 ```
-https://unpkg.com/@open-ayame/ayame-web-sdk@2020.1.1/dist/ayame.min.js
+https://unpkg.com/@open-ayame/ayame-web-sdk@2020.1.2/dist/ayame.min.js
 ```
 
 ### jsdelivr
 
 ```
-https://cdn.jsdelivr.net/npm/@open-ayame/ayame-web-sdk@2020.1.1/dist/ayame.min.js
+https://cdn.jsdelivr.net/npm/@open-ayame/ayame-web-sdk@2020.1.2/dist/ayame.min.js
 ```
 
 ### 双方向送受信接続する
@@ -60,7 +60,7 @@ const startConn = async () => {
     conn.on('addstream', (e) => {
         document.querySelector('#remote-video').srcObject = e.stream;
     });
-    document.querySelector('#local-video').srcObject = stream;
+    document.querySelector('#local-video').srcObject = mediaStream;
 };
 startConn();
 ```
@@ -157,6 +157,6 @@ Ayame Web SDK はオープンソースソフトウェアですが、開発につ
 
 ## Discord
 
-ベストエフォートで運用しています。
+アドバイスはしますが、サポートはしません。
 
 https://discord.gg/mDesh2E
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@open-ayame/ayame-web-sdk",
-  "version": "2020.1.2",
+  "version": "2020.2",
   "description": "Web SDK for WebRTC Signaling Server Ayame",
   "main": "dist/ayame.min.js",
   "scripts": {

diff --git a/src/connection/base.ts b/src/connection/base.ts
@@ -88,7 +88,7 @@ class ConnectionBase {
       addstream: () => {},
       removestream: () => {},
       bye: () => {},
-      data: () => {}
+      datachannel: () => {}
     };
   }
 
@@ -147,26 +147,18 @@ class ConnectionBase {
                 this._sendWs({ type: 'pong' });
               } else if (message.type === 'bye') {
                 this._callbacks.bye(event);
-                await this._disconnect();
                 return resolve();
               } else if (message.type === 'accept') {
                 this.authzMetadata = message.authzMetadata;
                 if (Array.isArray(message.iceServers) && message.iceServers.length > 0) {
                   this._traceLog('iceServers=>', message.iceServers);
                   this._pcConfig.iceServers = message.iceServers;
                 }
-                if (message.isExistUser === undefined) {
-                  if (!this._pc) {
-                    this._createPeerConnection();
-                  }
+                this._traceLog('isExistUser=>', message.isExistUser);
+                this._isExistUser = message.isExistUser;
+                this._createPeerConnection();
+                if (this._isExistUser === true) {
                   await this._sendOffer();
-                } else {
-                  this._traceLog('isExistUser=>', message.isExistUser);
-                  this._isExistUser = message.isExistUser;
-                  this._createPeerConnection();
-                  if (this._isExistUser === true) {
-                    await this._sendOffer();
-                  }
                 }
                 return resolve();
               } else if (message.type === 'reject') {
@@ -294,33 +286,35 @@ class ConnectionBase {
     }
   }
 
-  async _addDataChannel(label: string, options: RTCDataChannelInit | undefined): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
+  async _createDataChannel(label: string, options: RTCDataChannelInit | undefined): Promise<RTCDataChannel | null> {
+    return new Promise<RTCDataChannel | null>((resolve, reject) => {
       if (!this._pc) return reject('PeerConnection Does Not Ready');
       if (this._isOffer) return reject('PeerConnection Has Local Offer');
       let dataChannel = this._findDataChannel(label);
       if (dataChannel) {
         return reject('DataChannel Already Exists!');
       }
-      dataChannel = this._pc.createDataChannel(label, options);
-      dataChannel.onclose = (event: Record<string, any>) => {
-        this._traceLog('datachannel onclosed=>', event);
-        this._dataChannels = this._dataChannels.filter(dataChannel => dataChannel.label != label);
-      };
-      dataChannel.onerror = (event: Record<string, any>) => {
-        this._traceLog('datachannel onerror=>', event);
-        this._dataChannels = this._dataChannels.filter(dataChannel => dataChannel.label != label);
-      };
-      dataChannel.onmessage = (event: any) => {
-        this._traceLog('datachannel onmessage=>', event.data);
-        event.label = label;
-        this._callbacks.data(event);
-      };
-      dataChannel.onopen = (event: Record<string, any>) => {
-        this._traceLog('datachannel onopen=>', event);
-      };
-      this._dataChannels.push(dataChannel);
-      return resolve();
+      if (this._isExistUser) {
+        dataChannel = this._pc.createDataChannel(label, options);
+        dataChannel.onclose = (event: Record<string, any>) => {
+          this._traceLog('datachannel onclosed=>', event);
+          this._dataChannels = this._dataChannels.filter(dataChannel => dataChannel.label != label);
+        };
+        dataChannel.onerror = (event: Record<string, any>) => {
+          this._traceLog('datachannel onerror=>', event);
+          this._dataChannels = this._dataChannels.filter(dataChannel => dataChannel.label != label);
+        };
+        dataChannel.onmessage = (event: any) => {
+          this._traceLog('datachannel onmessage=>', event.data);
+          event.label = label;
+        };
+        dataChannel.onopen = (event: Record<string, any>) => {
+          this._traceLog('datachannel onopen=>', event);
+        };
+        this._dataChannels.push(dataChannel);
+        return resolve(dataChannel);
+      }
+      return resolve(null);
     });
   }
 
@@ -343,7 +337,6 @@ class ConnectionBase {
     dataChannel.onmessage = (event: any) => {
       this._traceLog('datachannel onmessage=>', event.data);
       event.label = label;
-      this._callbacks.data(event);
     };
     if (!this._findDataChannel(label)) {
       this._dataChannels.push(event.channel);
@@ -356,6 +349,7 @@ class ConnectionBase {
         }
       });
     }
+    this._callbacks.datachannel(dataChannel);
   }
 
   async _sendOffer() {

diff --git a/src/connection/index.ts b/src/connection/index.ts
@@ -47,12 +47,16 @@ class Connection extends ConnectionBase {
   }
 
   /**
-   * @desc Datachannel を追加します。
+   * @desc Datachannel を作成します。
    * @param {string} label - dataChannel の label
    * @param {RTCDataChannelInit|undefined} [options=undefined] - dataChannel の init オプション
+   * @return {RTCDataChannel|null} 生成されたデータチャネル
    */
-  public async addDataChannel(label: string, options: RTCDataChannelInit | undefined = undefined): Promise<void> {
-    await this._addDataChannel(label, options);
+  public async createDataChannel(
+    label: string,
+    options: RTCDataChannelInit | undefined = undefined
+  ): Promise<RTCDataChannel | null> {
+    return await this._createDataChannel(label, options);
   }
 
   /**
@@ -69,21 +73,6 @@ class Connection extends ConnectionBase {
     }
   }
 
-  /**
-   * @desc Datachannel でデータを送信します。
-   * @param {any} params - 送信するデータ
-   * @param {string} [label='dataChannel'] - 指定する dataChannel の label
-   */
-  public sendData(params: any, label = 'dataChannel'): void {
-    this._traceLog('datachannel sendData=>', params);
-    const dataChannel = this._findDataChannel(label);
-    if (dataChannel && dataChannel.readyState === 'open') {
-      dataChannel.send(params);
-    } else {
-      throw new Error('datachannel is not open');
-    }
-  }
-
   /**
    * @desc PeerConnection  接続を切断します。
    */

diff --git a/test/datachannel.html b/test/datachannel.html
@@ -27,24 +27,40 @@
         let conn = null;
         const options = Ayame.defaultOptions;
         options.clientId = clientId ? clientId : options.clientId;
-        const channel = 'dataChannel';
+        const label = 'dataChannel';
+        let dataChannel = null;
         const startConn = async () => {
           conn = Ayame.connection(signalingUrl, roomId, options, true);
-          conn.on('open', (e) => {
-            conn.addDataChannel(channel);
+          conn.on('open', async (e) => {
+            dataChannel = await conn.createDataChannel(label);
+            if (dataChannel) {
+              dataChannel.onmessage = onMessage;
+            }
           });
-          conn.on('data', (e) => {
-            messages = messages ? (messages + '\n' + e.data) : e.data;
-            document.querySelector("#messages").value = messages;
+          conn.on('datachannel', (channel) => {
+            if (!dataChannel) {
+              dataChannel = channel;
+              dataChannel.onmessage = onMessage;
+            }
+          });
+          conn.on('disconnect', () => {
+            dataChannel = null;
           });
           await conn.connect(null);
         };
         const sendData = () => {
           const data = document.querySelector("#sendDataInput").value;
-          conn.sendData(data);
+          if (dataChannel && dataChannel.readyState === 'open') {
+            dataChannel.send(data);
+          }
         };
         document.querySelector("#roomIdInput").value = roomId;
         document.querySelector("#clientIdInput").value = options.clientId;
+
+        function onMessage(e) {
+          messages = messages ? (messages + '\n' + e.data) : e.data;
+          document.querySelector("#messages").value = messages;
+        }
       </script>
   </body>
 </html>
diff --git a/test/multi_datachannel.html b/test/multi_datachannel.html
@@ -39,36 +39,65 @@
         const options = Ayame.defaultOptions;
         let messagesA = null;
         let messagesB = null;
-        const channel = 'dataChannel';
-        const anotherChannel = 'anotherChannel';
+        const label = 'dataChannel';
+        const anotherLabel = 'anotherChannel';
         options.clientId = clientId ? clientId : options.clientId;
         conn = Ayame.connection(signalingUrl, roomId, options, true);
-        conn.on('open', (e) => {
-          conn.addDataChannel(channel);
-          conn.addDataChannel(anotherChannel);
+        let dataChannel = null;
+        let anotherDataChannel = null;
+        conn.on('open', async (e) => {
+          dataChannel = await conn.createDataChannel(label);
+          if (dataChannel) {
+            dataChannel.onmessage = onMessageA;
+          }
+          anotherDataChannel = await conn.createDataChannel(anotherLabel);
+          if (anotherDataChannel) {
+            anotherDataChannel.onmessage = onMessageB;
+          }
         });
-        conn.on('data', (e) => {
-          if (e.label == anotherChannel) {
-            messagesB = messagesB ? (messagesB + '\n' + e.data) : e.data;
-            document.querySelector("#messagesB").value = messagesB;
-          } else {
-            messagesA = messagesA ? (messagesA + '\n' + e.data) : e.data;
-            document.querySelector("#messagesA").value = messagesA;
+        conn.on('datachannel', (channel) => {
+          if (channel.label === label) {
+            if (!dataChannel) {
+              dataChannel = channel;
+              dataChannel.onmessage = onMessageA;
+            }
+          } else if (channel.label === anotherLabel) {
+            if (!anotherDataChannel) {
+              anotherDataChannel = channel;
+              anotherDataChannel.onmessage = onMessageB;
+            }
           }
         });
+        conn.on('disconnect', () => {
+          dataChannel = null;
+          anotherDataChannel = null;
+        });
         const startConn = async () => {
           await conn.connect(null);
         };
         const sendDataA = () => {
-          const data = document.querySelector("#sendDataInputA").value;
-          conn.sendData(data);
+          sendData("#sendDataInputA", dataChannel)
         };
         const sendDataB = () => {
-          const data = document.querySelector("#sendDataInputB").value;
-          conn.sendData(data, anotherChannel);
+          sendData("#sendDataInputB", anotherDataChannel)
         };
         document.querySelector("#roomIdInput").value = roomId;
         document.querySelector("#clientIdInput").value = options.clientId;
+
+        function onMessageA(e) {
+          messagesA = messagesA ? (messagesA + '\n' + e.data) : e.data;
+          document.querySelector("#messagesA").value = messagesA;
+        }
+        function onMessageB(e) {
+          messagesB = messagesB ? (messagesB + '\n' + e.data) : e.data;
+          document.querySelector("#messagesB").value = messagesB;
+        }
+        function sendData(id, channel) {
+          const data = document.querySelector(id).value;
+          if (channel && channel.readyState === 'open') {
+            channel.send(data);
+          }
+        }
       </script>
   </body>
 </html>