Merge branch 'release/2020.1.0'

CHANGES.md

@@ -11,6 +11,19 @@
 
 ## develop
 
+## 2020.1.0
+
+**リリース番号フォーマットを変更しました**
+
+- [FIX] 再度の接続時にオブジェクトを作成しないようにする
+    - @Hexa
+- [FIX] 切断時の他方の切断処理をエラーにならないように修正する
+    - @Hexa
+- [UPDATE] close 待ち間隔を 400ms に変更する
+    - @Hexa
+- [UPDATE] テストの整理
+    - @Hexa
+
 ## 19.12.0
 
 - [UPDATE] authnMetadata, authzMetadata を any にする

dist/ayame.js

@@ -1,4 +1,4 @@
-/* @OpenAyame/ayame-web-sdk@19.12.0 */
+/* @OpenAyame/ayame-web-sdk@2020.1 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -189,8 +189,6 @@
           await this._closePeerConnection();
           await this._closeWebSocketConnection();
           this.authzMetadata = null;
-          this._ws = null;
-          this._pc = null;
           this._removeCodec = false;
           this._isOffer = false;
           this._isExistUser = false;
@@ -574,27 +572,21 @@
           return this._dataChannels.find(channel => channel.label == label);
       }
       async _closeDataChannel(dataChannel) {
-          return new Promise((resolve, reject) => {
-              if (!dataChannel)
-                  return resolve();
+          return new Promise(resolve => {
               if (dataChannel.readyState === 'closed')
                   return resolve();
               dataChannel.onclose = null;
               const timerId = setInterval(() => {
-                  if (!dataChannel) {
-                      clearInterval(timerId);
-                      return reject('DataChannel Closing Error');
-                  }
                   if (dataChannel.readyState === 'closed') {
                       clearInterval(timerId);
                       return resolve();
                   }
-              }, 800);
+              }, 400);
               dataChannel && dataChannel.close();
           });
       }
       async _closePeerConnection() {
-          return new Promise((resolve, reject) => {
+          return new Promise(resolve => {
               if (browser() === 'safari' && this._pc) {
                   this._pc.oniceconnectionstatechange = () => { };
                   this._pc.close();
@@ -604,39 +596,44 @@
               if (!this._pc)
                   return resolve();
               if (this._pc && this._pc.signalingState == 'closed') {
+                  this._pc = null;
                   return resolve();
               }
               this._pc.oniceconnectionstatechange = () => { };
               const timerId = setInterval(() => {
                   if (!this._pc) {
                       clearInterval(timerId);
-                      return reject('PeerConnection Closing Error');
+                      return resolve();
                   }
                   if (this._pc && this._pc.signalingState == 'closed') {
+                      this._pc = null;
                       clearInterval(timerId);
                       return resolve();
                   }
-              }, 800);
+              }, 400);
               this._pc.close();
           });
       }
       async _closeWebSocketConnection() {
-          return new Promise((resolve, reject) => {
+          return new Promise(resolve => {
               if (!this._ws)
                   return resolve();
-              if (this._ws && this._ws.readyState === 3)
+              if (this._ws && this._ws.readyState === 3) {
+                  this._ws = null;
                   return resolve();
+              }
               this._ws.onclose = () => { };
               const timerId = setInterval(() => {
                   if (!this._ws) {
                       clearInterval(timerId);
-                      return reject('WebSocket Closing Error');
+                      return resolve();
                   }
                   if (this._ws.readyState === 3) {
+                      this._ws = null;
                       clearInterval(timerId);
                       return resolve();
                   }
-              }, 800);
+              }, 400);
               this._ws && this._ws.close();
           });
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-ayame/ayame-web-sdk",
-  "version": "19.12.0",
+  "version": "2020.1.0",
   "description": "Web SDK for WebRTC Signaling Server Ayame",
   "main": "dist/ayame.min.js",
   "scripts": {

src/connection/base.ts

@@ -99,8 +99,6 @@ class ConnectionBase {
     await this._closePeerConnection();
     await this._closeWebSocketConnection();
     this.authzMetadata = null;
-    this._ws = null;
-    this._pc = null;
     this._removeCodec = false;
     this._isOffer = false;
     this._isExistUser = false;
@@ -473,26 +471,21 @@ class ConnectionBase {
   }
 
   async _closeDataChannel(dataChannel: RTCDataChannel): Promise<void> {
-    return new Promise((resolve, reject) => {
-      if (!dataChannel) return resolve();
+    return new Promise(resolve => {
       if (dataChannel.readyState === 'closed') return resolve();
       dataChannel.onclose = null;
       const timerId = setInterval(() => {
-        if (!dataChannel) {
-          clearInterval(timerId);
-          return reject('DataChannel Closing Error');
-        }
         if (dataChannel.readyState === 'closed') {
           clearInterval(timerId);
           return resolve();
         }
-      }, 800);
+      }, 400);
       dataChannel && dataChannel.close();
     });
   }
 
   async _closePeerConnection(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
+    return new Promise<void>(resolve => {
       if (browser() === 'safari' && this._pc) {
         this._pc.oniceconnectionstatechange = () => {};
         this._pc.close();
@@ -501,38 +494,44 @@ class ConnectionBase {
       }
       if (!this._pc) return resolve();
       if (this._pc && this._pc.signalingState == 'closed') {
+        this._pc = null;
         return resolve();
       }
       this._pc.oniceconnectionstatechange = () => {};
       const timerId = setInterval(() => {
         if (!this._pc) {
           clearInterval(timerId);
-          return reject('PeerConnection Closing Error');
+          return resolve();
         }
         if (this._pc && this._pc.signalingState == 'closed') {
+          this._pc = null;
           clearInterval(timerId);
           return resolve();
         }
-      }, 800);
+      }, 400);
       this._pc.close();
     });
   }
 
   async _closeWebSocketConnection(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
+    return new Promise<void>(resolve => {
       if (!this._ws) return resolve();
-      if (this._ws && this._ws.readyState === 3) return resolve();
+      if (this._ws && this._ws.readyState === 3) {
+        this._ws = null;
+        return resolve();
+      }
       this._ws.onclose = () => {};
       const timerId = setInterval(() => {
         if (!this._ws) {
           clearInterval(timerId);
-          return reject('WebSocket Closing Error');
+          return resolve();
         }
         if (this._ws.readyState === 3) {
+          this._ws = null;
           clearInterval(timerId);
           return resolve();
         }
-      }, 800);
+      }, 400);
       this._ws && this._ws.close();
     });
   }

test/datachannel.html

@@ -24,7 +24,6 @@
       <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
       <script src="./main.js"></script>
       <script type="text/javascript">
-        const remoteVideo = document.querySelector('#remote-video');
         let conn = null;
         const options = Ayame.defaultOptions;
         options.clientId = clientId ? clientId : options.clientId;

test/multi_datachannel.html

@@ -42,21 +42,21 @@
         const channel = 'dataChannel';
         const anotherChannel = 'anotherChannel';
         options.clientId = clientId ? clientId : options.clientId;
+        conn = Ayame.connection(signalingUrl, roomId, options, true);
+        conn.on('open', (e) => {
+          conn.addDataChannel(channel);
+          conn.addDataChannel(anotherChannel);
+        });
+        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;
+          }
+        });
         const startConn = async () => {
-          conn = Ayame.connection(signalingUrl, roomId, options, true);
-          conn.on('open', (e) => {
-            conn.addDataChannel(channel);
-            conn.addDataChannel(anotherChannel);
-          });
-          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;
-            }
-          });
           await conn.connect(null);
         };
         const sendDataA = () => {

test/qs.html

@@ -23,7 +23,7 @@
       <div style="float:left;">
         <video id="local-video" muted autoplay="" style="width: 400px; height: 300px; border: 1px solid black;"></video>
       </div>
-      <div style="float:right;">
+      <div style="float:left; margin-left: 20px;">
         <video id="remote-video" autoplay style="width: 400px; height: 300px; border: 1px solid black;"></video>
       </div>
       <script src="../dist/ayame.js"></script>
@@ -37,22 +37,17 @@
           options.signalingKey = signalingKey;
         }
         options.clientId = clientId ? clientId : "";
+        options.video.codec = videoCodec;
+        conn = Ayame.connection(signalingUrl, roomId, options, true);
+        conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
+        conn.on('disconnect', (e) => console.log(e));
+        conn.on('addstream', async (e) => {
+          console.log(e.stream);
+          remoteVideo.srcObject = e.stream;
+        });
         const startConn = async () => {
-          options.video.codec = videoCodec;
-          conn = Ayame.connection(signalingUrl, roomId, options, true);
           const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true})
           const authnMetadata = {hoge: "fuga"};
-          conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
-          conn.on('disconnect', (e) => console.log(e));
-          conn.on('addstream', async (e) => {
-            console.log(e.stream);
-            remoteVideo.srcObject = e.stream;
-            try {
-              await remoteVideo.play();
-            } catch(error) {
-              console.log('error auto play:' + error);
-            }
-          });
           await conn.connect(mediaStream, {authnMetadata});
           document.querySelector('#local-video').srcObject = mediaStream;
         };

test/recvonly.html

@@ -18,7 +18,7 @@ <h4>Ayame RecvOnly Sample</h4>
         <button onclick="conn.disconnect();">切断</button>
       </div>
       <div style="float:right;">
-        <video id="remote-video" autoplay="" style="width: 400px; height: 300px; border: 1px solid black;"></video>
+        <video id="remote-video" autoplay controls style="width: 400px; height: 300px; border: 1px solid black;"></video>
       </div>
       <script src="../dist/ayame.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.7.0/qs.min.js"></script>
@@ -29,13 +29,13 @@ <h4>Ayame RecvOnly Sample</h4>
         options.video.direction = 'recvonly';
         options.audio.direction = 'recvonly';
         const conn = Ayame.connection(signalingUrl, roomId, options, true);
+        conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
+        conn.on('disconnect', (e) => console.log(e));
+        conn.on('addstream', (e) => {
+          document.querySelector('#remote-video').srcObject = e.stream;
+        });
         const startConn = async () => {
           await conn.connect(null);
-          conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
-          conn.on('disconnect', (e) => console.log(e));
-          conn.on('addstream', (e) => {
-            document.querySelector('#remote-video').srcObject = e.stream;
-          });
         };
         document.querySelector("#roomIdInput").value = roomId;
         document.querySelector("#clientIdInput").value = options.clientId;

test/sendonly.html

@@ -29,9 +29,9 @@ <h4>Ayame SendOnly Sample</h4>
         options.video.direction = 'sendonly';
         options.audio.direction = 'sendonly';
         const conn = Ayame.connection(signalingUrl, roomId, options, true);
+        conn.on('disconnect', (e) => console.log(e));
         const startConn = async () => {
           const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
-          conn.on('disconnect', (e) => console.log(e));
           await conn.connect(mediaStream);
           document.querySelector('#local-video').srcObject = mediaStream;
         };

test/sendrecv.html

@@ -23,7 +23,7 @@
       <div style="float:left;">
         <video id="local-video" muted autoplay="" style="width: 400px; height: 300px; border: 1px solid black;"></video>
       </div>
-      <div style="float:right;">
+      <div style="float:left; margin-left: 20px;">
         <video id="remote-video" autoplay style="width: 400px; height: 300px; border: 1px solid black;"></video>
       </div>
       <script src="../dist/ayame.js"></script>
@@ -33,22 +33,17 @@
         const remoteVideo = document.querySelector('#remote-video');
         let conn = null;
         const options = Ayame.defaultOptions;
+        options.video.codec = videoCodec;
+        conn = Ayame.connection(signalingUrl, roomId, options, true);
+        conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
+        conn.on('disconnect', (e) => console.log(e));
+        conn.on('addstream', async (e) => {
+          console.log(e.stream);
+          remoteVideo.srcObject = e.stream;
+        });
         const startConn = async () => {
-          options.video.codec = videoCodec;
-          conn = Ayame.connection(signalingUrl, roomId, options, true);
           const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true})
           const authnMetadata = {hoge: "fuga"};
-          conn.on('open', ({authzMetadata}) => console.log(authzMetadata));
-          conn.on('disconnect', (e) => console.log(e));
-          conn.on('addstream', async (e) => {
-            console.log(e.stream);
-            remoteVideo.srcObject = e.stream;
-            try {
-              await remoteVideo.play();
-            } catch(error) {
-              console.log('error auto play:' + error);
-            }
-          });
           await conn.connect(mediaStream, {authnMetadata});
           document.querySelector('#local-video').srcObject = mediaStream;
         };