Updates example and readme

gabrielmicko · Sep 25, 2018 · 93b93a0 · 93b93a0
1 parent 89d2c09
commit 93b93a0
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -41,8 +41,8 @@ renderWebRTCAnalyzer({
 }, '#wa-app') //Select where the component gets rendered to
 ```
 
-##### CodeSandbox example
-[![Edit o516lvy699](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/o516lvy699)
+##### Example page
+[Example](https://analyzer.webrtc.rocks)
 
 ##### Show & Hide
 
@@ -62,7 +62,7 @@ yarn run build
 
 ### Version
 
-3.0.6
+3.1.0
 
 ### Contact
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webrtc-analyzer",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "description": "WebRTC Connection Analyzer",
   "module": "./src/App.js",
   "main": "./build/webrtc-analyzer.js",

diff --git a/src/template.html b/src/template.html
@@ -4,7 +4,15 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<body>
+<body> 
+    <h1>Functionality:</h1>
+    <ul>
+        <li><strong>CTRL + H</strong> to toggle</li>
+        <li><strong>CTRL + W</strong> to toggle position</li>
+        <li><strong>Refresh button</strong> to refresh data</li>
+        <li><strong>Hide WebRTC Analyzer</strong> to hide</li>
+        <li>For switching between PeerConnections find <strong>"Select a PeerConnection"</strong> section</li>
+    </ul>
     <div id="wa-app"></div>
 </body>
 </html>
diff --git a/test/test.js b/test/test.js
@@ -7,16 +7,23 @@ function renderWebRTCAnalyzer(options, appendTo = 'body') {
   root = render(<Analyzer {...options} />, document.querySelector(appendTo), root);
 }
 
-var pc1 = new RTCPeerConnection();
-var pc2 = new RTCPeerConnection();
+var pc1 = new RTCPeerConnection({
+  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+});
+
+var pc2 = new RTCPeerConnection({
+  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+});
 
 pc1.addEventListener('icecandidate', c => {
+  console.log('[pc1] Candidate created.', c);
   if (c.candidate) {
     pc2.addIceCandidate(c.candidate);
   }
 });
 
 pc2.addEventListener('icecandidate', c => {
+  console.log('[pc2] Candidate created.', c);
   if (c.candidate) {
     pc1.addIceCandidate(c.candidate);
   }
@@ -28,27 +35,45 @@ navigator.mediaDevices
     video: true
   })
   .then(mediaStream => {
-    if (mediaStream && mediaStream.getTracks) {
-      let tracks = mediaStream.getTracks();
+    try {
+      console.log('[local] Got media stream.');
+      if (mediaStream && mediaStream.getTracks) {
+        let tracks = mediaStream.getTracks();
 
-      if (tracks && tracks.length > 0) {
-        tracks.forEach(function(track) {
-          pc1.addTrack(track);
-        });
+        if (tracks && tracks.length > 0) {
+          tracks.forEach(function(track) {
+            console.log('[pc1] Track added.', track);
+            pc1.addTrack(track, mediaStream);
+          });
+        } else {
+          console.log('[pc1] No tracks found.');
+        }
+      } else {
+        console.log('[local] Not found getTracks function.');
       }
+      console.log('[pc1] Ready 4 action.');
+      pc1.createOffer().then(offer => {
+        console.log('[pc1] Offer created.', offer);
+        pc1.setLocalDescription(offer).then(() => {
+          console.log('[pc1] Offer set as local description.');
+          pc2.setRemoteDescription(offer).then(() => {
+            console.log('[pc2] Offer set as remote description.');
+            pc2.createAnswer().then(answer => {
+              console.log('[pc2] Answer created.', answer);
+              pc2.setLocalDescription(answer).then(() => {
+                console.log('[pc2] Answer set as local description.');
+                pc1.setRemoteDescription(answer).then(() => {
+                  console.log('[pc1] Answer set as remote description.');
+                }, console.error);
+              }, console.error);
+            }, console.error);
+          }, console.error);
+        }, console.error);
+      }, console.error);
+    } catch (e) {
+      console.log(e);
     }
-    pc1.createOffer().then(offer => {
-      pc1.setLocalDescription(offer).then(() => {
-        pc2.setRemoteDescription(offer).then(() => {
-          pc2.createAnswer().then(answer => {
-            pc2.setLocalDescription(answer).then(() => {
-              pc1.setRemoteDescription(answer).then(() => {});
-            });
-          });
-        });
-      });
-    });
-  });
+  }, console.error);
 
 renderWebRTCAnalyzer({
   peerConnections: [pc1, pc2]