diff options
Diffstat (limited to 'template/assemblies')
| -rw-r--r-- | template/assemblies/feedback.phtml | 4 | ||||
| -rw-r--r-- | template/assemblies/player/dash.phtml | 104 | ||||
| -rw-r--r-- | template/assemblies/switcher/dash.phtml | 4 |
3 files changed, 94 insertions, 18 deletions
diff --git a/template/assemblies/feedback.phtml b/template/assemblies/feedback.phtml index 6df80cc..d50daf4 100644 --- a/template/assemblies/feedback.phtml +++ b/template/assemblies/feedback.phtml @@ -12,8 +12,8 @@ <option>DSL >6000</option> <option>VDSL</option> <option>Public Hotspot</option> - <option>WiFi inside the CCH</option> - <option>Ethernet inside the CCH</option> + <option>WiFi on site</option> + <option>Ethernet on site</option> <option>Something else</option> </select> </div> diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml index 7048006..24a3df6 100644 --- a/template/assemblies/player/dash.phtml +++ b/template/assemblies/player/dash.phtml @@ -1,4 +1,4 @@ -<script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.js"></script> +<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> @@ -11,19 +11,102 @@ interference with the new dash-player. --> <script type="text/javascript"> - var nativeHLS = document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != ""; - var player = new Clappr.Player({ - source: nativeHLS ? '<?=h($room->getHLSPlaylistUrl())?>' : '<?=h($room->getDashManifestUrl())?>', +(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%", plugins: [DashShakaPlayback, LevelSelector, AudioSelector], shakaConfiguration: { - abr: { - defaultBandwidthEstimate: 600000 - }, + abr: { + defaultBandwidthEstimate: 1000000 + }, + streaming: { + rebufferingGoal: 12, + jumpLargeGaps: true, + + // Todo: handle streaming failure + // failureCallback: function() { + // console.log("streaming failure callback", arguments) + // } + } + }, + levelSelectorConfig: { + labels: { + // HLS + 0: 'Slides', + 1: 'SD', + 2: 'HD', + + // DASH + 7: 'HD', + 8: 'SD', + 9: 'Slides', + 10: 'HD', + 11: 'SD', + 12: 'Slides', + 13: 'HD', + 14: 'SD', + 15: 'Slides', + } }, 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> @@ -35,11 +118,4 @@ body.room .player-wrap.tab-content { padding: 0; } -.level_selector[data-level-selector] { - margin-top: 7px; -} -.level_selector[data-level-selector] button, -.level_selector[data-level-selector] li { - font-size: 12px; -} </style> diff --git a/template/assemblies/switcher/dash.phtml b/template/assemblies/switcher/dash.phtml index 63b8381..70c6405 100644 --- a/template/assemblies/switcher/dash.phtml +++ b/template/assemblies/switcher/dash.phtml @@ -1,10 +1,10 @@ <div class="container-fluid"> <div class="notes well"> - <h3 class="beta">WARNING! BETA!</h3> + <h3 class="beta">WebM DASH</h3> <p><a href="https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">DASH</a> is an adaptive-bitrate HTTP-based streaming solution, that is (unlike existing proprietary solutions such as HLS) internationally standardized.</p> <p>Support for DASH in open source software such as ffmpeg is still pretty rough, so consider this a technology-preview, it's not yet a stable solution.</p> - <p>Please report your experience to <a href="https://twitter.com/c3streaming">@c3streaming</a>, but please don't expect full support.</p> + <p>Please report your experience to <a href="https://twitter.com/c3streaming">@c3streaming</a>.</p> </div> |