Add button to test TURN settings.

This implements #679.

Signed-off-by: Joachim Bauch <[email protected]>

css/settings-admin.scss

@@ -5,6 +5,7 @@
 
 	.icon-delete,
 	.icon-checkmark-color,
+	.icon-category-monitoring,
 	div.stun-server:last-child .icon-add,
 	div.signaling-server:last-child .icon-add,
 	div.turn-server:last-child .icon-add {

js/admin/turn-server.js

@@ -17,6 +17,7 @@
 		'		<option value="tcp">' + t('spreed', 'TCP only') + '</option>' +
 		'	{{/select}}' +
 		'	</select>' +
+		'	<a class="icon icon-category-monitoring" title="' + t('spreed', 'Test server') + '"></a>' +
 		'	<a class="icon icon-delete" title="' + t('spreed', 'Delete server') + '"></a>' +
 		'	<a class="icon icon-add" title="' + t('spreed', 'Add new server') + '"></a>' +
 		'	<span class="icon icon-checkmark-color hidden" title="' + t('spreed', 'Saved') + '"></span>' +
@@ -72,6 +73,118 @@
 			}
 		},
 
+		notifyTurnResult: function($candidates, $timeout) {
+			console.log("Received candidates", $candidates);
+			const $types = $candidates.map(function($cand) {
+				return $cand.type;
+			});
+			var $result;
+			if ($types.indexOf('relay') === -1) {
+				$result = t('spreed', 'TURN candidate generation failed, please check the settings.');
+			} else {
+				$result = t('spreed', 'The TURN server settings are valid.');
+			}
+			OC.Notification.showTemporary($result);
+			clearTimeout($timeout);
+		},
+
+		// Parse a candidate:foo string into an object, for easier use by other methods.
+		parseCandidate: function($text) {
+			const $candidateStr = 'candidate:';
+			const $pos = $text.indexOf($candidateStr) + $candidateStr.length;
+			var [$foundation, $component, $protocol, $priority, $address, $port, , $type] =
+			$text.substr($pos).split(' ');
+			return {
+				'component': $component,
+				'type': $type,
+				'foundation': $foundation,
+				'protocol': $protocol,
+				'address': $address,
+				'port': $port,
+				'priority': $priority
+			};
+		},
+
+		iceCallback: function($pc, $candidates, $timeout, e) {
+			if (e.candidate) {
+				$candidates.push(this.parseCandidate(e.candidate.candidate));
+			} else if (!('onicegatheringstatechange' in RTCPeerConnection.prototype)) {
+				$pc.close();
+				this.notifyTurnResult($candidates, $timeout);
+			}
+		},
+
+		gatheringStateChange: function($pc, $candidates, $timeout) {
+			if ($pc.iceGatheringState !== 'complete') {
+				return;
+			}
+
+			$pc.close();
+			this.notifyTurnResult($candidates, $timeout);
+		},
+
+		testServer: function(e) {
+			e.stopPropagation();
+
+			var $row = $(e.currentTarget).parents('div.turn-server').first();
+			var $server = $row.find('input.server').val();
+			var $secret = $row.find('input.secret').val();
+			var $protocols = $row.find('select.protocols').val().split(',');
+
+			var $urls = [];
+			var i;
+			for (i = 0; i < $protocols.length; i++) {
+				$urls.push('turn:' + $server + '?transport=' + $protocols[i]);
+			}
+
+			var $now = new Date();
+			var $expires = Math.round($now.getTime() / 1000) + (5 * 60);
+			var $username = $expires + ':turn-test-user';
+			var $hmac = new jsSHA("SHA-1", "TEXT");
+			$hmac.setHMACKey($secret, "TEXT");
+			$hmac.update($username);
+			var $password = $hmac.getHMAC("B64");
+			var $iceServer = {
+				'username': $username,
+				'credential': $password,
+				'urls': $urls
+			};
+
+			// Create a PeerConnection with no streams, but force a m=audio line.
+			var $iceTransports = [];
+			const $config = {
+				iceServers: [
+					$iceServer
+				],
+				iceTransportPolicy: 'relay'
+			};
+			const $offerOptions = {
+				offerToReceiveAudio: 1
+			};
+			console.log('Creating PeerConnection with', $config);
+			var $candidates = [];
+			OC.Notification.showTemporary(t('spreed', 'Checking TURN server {server}', {'server': $server}));
+			var $pc = new RTCPeerConnection($config);
+			var $timeout = setTimeout(function() {
+				this.notifyTurnResult($candidates, $timeout);
+				$pc.close();
+			}.bind(this), 10000);
+			$pc.onicecandidate = this.iceCallback.bind(this, $pc, $candidates, $timeout);
+			$pc.onicegatheringstatechange = this.gatheringStateChange.bind(this, $pc, $candidates, $timeout);
+			$pc.createOffer(
+				$offerOptions
+			).then(
+				function(description) {
+					$pc.setLocalDescription(description);
+				},
+				function(error) {
+					console.log("Error creating offer", error);
+					this.notifyTurnResult($candidates, $timeout);
+					$pc.close();
+				}.bind(this)
+			);
+		},
+
 		saveServers: function() {
 			var servers = [],
 				$error = [],
@@ -140,6 +253,7 @@
 
 			$template.find('a.icon-add').on('click', this.addNewTemplate.bind(this));
 			$template.find('a.icon-delete').on('click', this.deleteServer.bind(this));
+			$template.find('a.icon-category-monitoring').on('click', this.testServer.bind(this));
 			$template.find('input').on('change', this.saveServers.bind(this));
 			$template.find('select').on('change', this.saveServers.bind(this));
 

templates/settings/admin/turn-server.php

@@ -2,6 +2,7 @@
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
 script('spreed', ['admin/turn-server']);
+script('spreed', ['admin/sha1']);
 style('spreed', ['settings-admin']);
 ?>