add relay selection javascript for adaptive player

1 files changed, 37 insertions, 3 deletions

diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index 54f685c..3ad61fd 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -11,9 +11,34 @@
  interference with the new dash-player.
 -->
 <script type="text/javascript">
-	var hasWebM = document.createElement('video').canPlayType('video/webm') != "";
-	var player = new Clappr.Player({
-			source: hasWebM ? '<?=h($room->getDashManifestUrl())?>' : '<?=h($room->getHLSPlaylistUrl())?>',
+(function(){
+	// Select relay from cdn url, retry indefinitely
+	var selectRelay = function(url, cb) {
+		$.ajax({
+			url: url,
+			cache: false,
+			dataType: "text",
+			timeout: 3000,
+			success: function(result, state, xhr) {
+				var relay = xhr.getResponseHeader("X-Host");
+				if (!relay)
+					setTimeout(selectRelay.bind(null, url, cb), 2000);
+
+				console.log("selected relay", relay);
+				var proto = url.match(/^https?:\/\//),
+					path = "/" + url.split("/").slice(3).join("/");
+				cb(proto + relay + path)
+			},
+			error: function(err) {
+				console.error("Error while selecting relay: ", err.status, err.statusText)
+				setTimeout(selectRelay.bind(null, url, cb), 2000);
+			}
+		});
+	}
+
+	var createPlayer = function(url) {
+		var player = new Clappr.Player({
+			source: url,
 			width: "100%",
 			plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
 			shakaConfiguration: {
@@ -47,6 +72,15 @@
 			autoPlay: true,
 			parentId: '#player'
 		});
+	}
+
+	// Detect WebM capability, Select relay, Create player
+	var hasWebM = document.createElement('video').canPlayType('video/webm') != "";
+	var cdnUrl = hasWebM ? '<?=h($room->getDashManifestUrl())?>' : '<?=h($room->getHLSPlaylistUrl())?>';
+	selectRelay(cdnUrl, function(relayUrl) {
+		createPlayer(relayUrl);
+	});
+}());
 </script>