Add TURN connectivity test to troubleshoot page (#127)

dist/package.sh

@@ -75,6 +75,7 @@ targets=(
     angular-translate/dist/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat.min.js
     angular-inview/angular-inview.js
     angular-messages/angular-messages.min.js
+    sdp/sdp.js
 )
 
 for target in "${targets[@]}"; do
@@ -82,7 +83,7 @@ for target in "${targets[@]}"; do
 done
 
 echo "+ Update version number..."
-sed -i "s/\[\[VERSION\]\]/${VERSION}/g" $DIR/index.html $DIR/dist/app.js
+sed -i "s/\[\[VERSION\]\]/${VERSION}/g" $DIR/index.html troubleshoot/index.html $DIR/dist/app.js
 
 echo "+ Update permissions..."
 find $DIR/ -type f -exec chmod 644 {} \;

troubleshoot/index.html

@@ -100,16 +100,22 @@
 
     <!-- JS -->
     <script src="../node_modules/webrtc-adapter/out/adapter.js?v=[[VERSION]]"></script>
+    <script src="../node_modules/sdp/sdp.js?v=[[VERSION]]"></script>
     <script>
         function switchTo(type, newStatus) {
             var unknown = document.querySelector('#status-' + type + ' .status-unknown');
             if (unknown) {
                 unknown.classList.add('hidden');
             }
+            var test = document.querySelector('#status-' + type + ' .status-test')
+            if (test) {
+                test.classList.add('hidden');
+            }
             document.querySelector('#status-' + type + ' .status-no').classList.add('hidden');
             document.querySelector('#status-' + type + ' .status-yes').classList.add('hidden');
             document.querySelector('#status-' + type + ' .status-' + newStatus).classList.remove('hidden');
         }
+
         function doChecks() {
             // Check for JS
             switchTo('js', 'yes');
@@ -124,8 +130,10 @@
             // Check for RTCDataChannel
             if (window.RTCPeerConnection && (new RTCPeerConnection()).createDataChannel) {
                 switchTo('dc', 'yes');
+                switchTo('turn', 'test');
             } else {
                 switchTo('dc', 'no');
+                switchTo('turn', 'no');
             }
 
             // Check for LocalStorage
@@ -144,6 +152,62 @@
             } else {
                 switchTo('ls', 'no');
             }
+
+            // Check for TURN connectivity
+            var timeout = null;
+            function turnSuccess() {
+                switchTo('turn', 'yes');
+                clearTimeout(timeout);
+            }
+            function turnFail() {
+                switchTo('turn', 'no');
+                document.querySelector('#status-turn .results').classList.add('hidden');
+                document.querySelector('#status-turn .status-no .small').classList.remove('hidden');
+            }
+            var button = document.querySelector('#status-turn button');
+            button.addEventListener('click', function(e) {
+                button.outerHTML = '<img src="loading.gif" alt="Loading...">';
+                timeout = setTimeout(function() {
+                    turnFail();
+                }, 10000);
+                var noop = function() {};
+                var pc = new RTCPeerConnection({iceServers: [{
+                    urls: [
+                        'turn:turn.threema.ch:443?transport=udp',
+                        'turn:turn.threema.ch:443?transport=tcp',
+                        'turns:turn.threema.ch:443',
+                    ],
+                    username: 'threema-angular-test',
+                    credential: 'VaoVnhxKGt2wD20F9bTOgiew6yHQmj4P7y7SE4lrahAjTQC0dpnG32FR4fnrlpKa',
+                }]});
+                document.querySelector('#status-turn .results').classList.remove('hidden');
+                var resultData = document.querySelector('#status-turn .result-data');
+                pc.createDataChannel('test');
+                console.info('Creating offer...');
+                pc.createOffer(function(sdp) { pc.setLocalDescription(sdp, noop, noop) }, noop);
+                pc.onicecandidate = function(ice) {
+                    if (ice.candidate === null) {
+                        console.info('Done collecting candidates.');
+                    } else if (ice.candidate.candidate) {
+                        var candidate = SDPUtils.parseCandidate(ice.candidate.candidate);
+                        console.debug(candidate);
+                        if (candidate.type === 'relay') {
+                            var info = '[' + candidate.type + '] ' + candidate.ip + ':' + candidate.port + ' (' + candidate.protocol + ')';
+                            if (candidate.relatedAddress.indexOf(':') !== -1) {
+                                info += ' (ipv6)';
+                            } else if (candidate.relatedAddress.indexOf('.') !== -1) {
+                                info += ' (ipv4)';
+                            } else {
+                                info += ' (?)';
+                            }
+                            resultData.innerHTML += info + '<br>';
+                            turnSuccess();
+                        }
+                    } else {
+                        console.warn('Invalid candidate:', ice.candidate.candidate);
+                    }
+                }
+            });
         }
 
         if (document.readyState != 'loading') {
@@ -220,6 +284,29 @@
                 <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
             </div>
         </div>
+
+        <h2>Does TURN work?</h2>
+        <div id="status-turn">
+            <div class="status status-unknown">
+                <i class="material-icons md-36">help</i> <span class="text">Unknown</span>
+            </div>
+            <div class="status status-no hidden">
+                <i class="material-icons md-36">error</i> <span class="text">No</span>
+                <p class="small hidden">It looks like TURN traffic is being blocked by your firewall.<br>
+                Without TURN, connections can only be established if your computer<br>
+                and your phone are in the same network.</p>
+            </div>
+            <div class="status status-yes hidden">
+                <i class="material-icons md-36">check_circle</i> <span class="text">Yes</span>
+            </div>
+            <div class="status status-test hidden">
+                <button>Click to test</button>
+            </div>
+            <div class="results hidden">
+                <p>Results:</p>
+                <p class="result-data"></p>
+            </div>
+        </div>
     </div>
     <footer>
         &copy; 2017 Threema GmbH