aboutsummaryrefslogtreecommitdiff
path: root/template/assemblies/player/dash.phtml
blob: 7cc1e38dfbfb51926ed6d7feacc5af8a0e4594cb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.min.js"></script>
<script type="text/javascript" src="<?=h($assets)?>clapprio/level-selector.min.js"></script>
<script type="text/javascript" src="<?=h($assets)?>clapprio/audio-selector.min.js"></script>


<div class="dashContainer" style="min-height: 100px" >
	<div id="player"></div>
</div>

<!--
 this is an experimental hack, trying to protect the remaining page from
 interference with the new dash-player.
-->
<script type="text/javascript">
(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);
				cb(relay);
			},
			error: function(err) {
				console.error("Error while selecting relay: ", err.status, err.statusText)
				setTimeout(selectRelay.bind(null, url, cb), 2000);
			}
		});
	}

	var getRelayUrl = function(relay, cdnUrl) {
		var proto = cdnUrl.match(/^https?:\/\//),
			path = "/" + cdnUrl.split("/").slice(3).join("/");
		return proto + relay + path;
	}

	var createPlayer = function(sources) {
		return new Clappr.Player({
			sources: sources,
			width: "100%",
			poster: "<?=h($stream->getPoster())?>",
			plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
			shakaConfiguration: {
				abr: {
					defaultBandwidthEstimate: 1000000
				},
				streaming: {
					rebufferingGoal: 12,
					jumpLargeGaps: true,

					// Todo: handle streaming failure
					// failureCallback: function() {
					// 	console.log("streaming failure callback", arguments)
					// }
				}
			},
			levelSelectorConfig: {
				labelCallback: function(playbackLevel, customLabel) {
					// playbackLevel.videoBandwidth is set for DASH
					// playbackLevel.level.bitrate is set for HLS
					var bw = playbackLevel.videoBandwidth || playbackLevel.level.bitrate;

					if(bw <= 100000) {
						return 'Slides';
					}
					else if(bw <= 800000) {
						return 'SD';
					}
					else {
						return 'HD'
					}
				},
			},
			autoPlay: true,
			parentId: '#player'
		});
	}

	selectRelay("<?=h($room->getDashManifestUrl())?>", function(relay) {
		// WebM fallback
		var sources = [{
			source: "<?=h($stream->getVideoUrl('webm', 'hd'))?>",
		}];

		// HLS playlist
		var hasMSE = "MediaSource" in window;
		if (hasMSE || document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != "") {
			sources.unshift({
				source: "<?=h($room->getHLSPlaylistUrl())?>"
			});
		}

		// VP9 dash player
		if (hasMSE && MediaSource.isTypeSupported('video/webm; codecs="vp9,vorbis"')) {
			sources.unshift({
				source: "<?=h($room->getDashManifestUrl())?>"
			});
		}

		createPlayer(sources);
	});
}());
</script>


<style type="text/css">
#player > [data-player] {
	padding-bottom: 56.25%;
	height: auto !important;
}
body.room .player-wrap.tab-content {
	padding: 0;
}
</style>