add pc.connectionState to states sample (webrtc#1183)

huningxin · Jun 4, 2019 · 0bcd06f · 0bcd06f
1 parent be2331f
commit 0bcd06f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/content/peerconnection/states/index.html b/src/content/peerconnection/states/index.html
@@ -54,6 +54,10 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
             <div class="label">PC1 ICE state:</div>
             <div id="pc1IceState" class="value"></div>
         </div>
+        <div>
+            <div class="label">PC1 connection state:</div>
+            <div id="pc1ConnState" class="value"></div>
+        </div>
         <div>
             <div class="label">PC2 state:</div>
             <div id="pc2State" class="value"></div>
@@ -62,6 +66,10 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
             <div class="label">PC2 ICE state:</div>
             <div id="pc2IceState" class="value"></div>
         </div>
+        <div>
+            <div class="label">PC2 connection state:</div>
+            <div id="pc2ConnState" class="value"></div>
+        </div>
     </div>
 
     <p>View the console to see logging. The <code>MediaStream</code> object <code>localStream</code>, and the <code>RTCPeerConnection</code>

diff --git a/src/content/peerconnection/states/js/main.js b/src/content/peerconnection/states/js/main.js
@@ -23,8 +23,10 @@ hangupButton.onclick = hangup;
 
 const pc1StateDiv = document.querySelector('div#pc1State');
 const pc1IceStateDiv = document.querySelector('div#pc1IceState');
+const pc1ConnStateDiv = document.querySelector('div#pc1ConnState');
 const pc2StateDiv = document.querySelector('div#pc2State');
 const pc2IceStateDiv = document.querySelector('div#pc2IceState');
+const pc2ConnStateDiv = document.querySelector('div#pc2ConnState');
 
 let localstream;
 let pc1;
@@ -75,6 +77,7 @@ function call() {
 
   pc1IceStateDiv.textContent = pc1.iceConnectionState;
   pc1.oniceconnectionstatechange = iceStateCallback1;
+  pc1.onconnectionstatechange = connStateCallback1;
   pc1.onicecandidate = e => onIceCandidate(pc1, e);
 
   pc2 = new RTCPeerConnection(servers);
@@ -84,6 +87,7 @@ function call() {
 
   pc2IceStateDiv.textContent = pc2.iceConnectionState;
   pc2.oniceconnectionstatechange = iceStateCallback2;
+  pc2.onconnectionstatechange = connStateCallback2;
   pc2.onicecandidate = e => onIceCandidate(pc2, e);
   pc2.ontrack = gotRemoteStream;
   localstream.getTracks().forEach(track => pc1.addTrack(track, localstream));
@@ -165,6 +169,21 @@ function iceStateCallback2() {
   }
 }
 
+function connStateCallback1() {
+  if (pc1) {
+    const {connectionState} = pc1;
+    console.log(`pc1 connection state change callback, state: ${connectionState}`);
+    pc1ConnStateDiv.textContent += ` => ${connectionState}`;
+  }
+}
+
+function connStateCallback2() {
+  if (pc2) {
+    const {connectionState} = pc2;
+    console.log(`pc2 connection state change callback, state: ${connectionState}`);
+    pc2ConnStateDiv.textContent += ` => ${connectionState}`;
+  }
+}
 function getOtherPc(pc) {
   return (pc === pc1) ? pc2 : pc1;
 }