-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'ChromeCast-receiver-dash' of https://github.com/Orange-…
…OpenSource/dash.js into Orange-OpenSource-ChromeCast-receiver-dash � Conflicts: � samples/dash-if-reference-player/index.html
- Loading branch information
Showing
16 changed files
with
1,284 additions
and
693 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
<!DOCTYPE html> | ||
<html ng-app="DashCastReceiverApp" lang="en"> | ||
<head> | ||
<meta charset="utf-8"/> | ||
<title>Baseline Dash JavaScript Player</title> | ||
<meta name="description" content="" /> | ||
<link rel="icon" type="image/png" href="http://dashpg.com/w/2012/09/dashif.ico" /> | ||
|
||
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css"> | ||
<link rel="stylesheet" href="css/style.css"> | ||
|
||
<script src="http://code.jquery.com/jquery.js"></script> | ||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script> | ||
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> | ||
|
||
<!-- Chromecast --> | ||
<script src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script> | ||
|
||
<!-- Unminified Dash --> | ||
<!--script src="../../../dist/dash.all.debug.js"></script--> | ||
<!--dash.all.min.js should be used in production over dash.all.debug.js | ||
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js--> | ||
<script src="../../../dist/dash.all.min.js"></script> | ||
|
||
<script src="js/DashPlayerService.js"></script> | ||
<script src="js/CastReceiverController.js"></script> | ||
<script src="js/app.js"></script> | ||
|
||
<style> | ||
html, body { | ||
background: #000000; | ||
height: 100%; | ||
width: 100%; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body ng-controller="CastReceiverController"> | ||
<div class="dash-video-player"> | ||
<div id="loading_spinner" class="loading_spinner" ng-show="showSpinner"></div> | ||
|
||
<video id="media" ng-show="showVideo"></video> | ||
<div id="video-caption"></div> | ||
</div> | ||
|
||
<div class="stats-holder" ng-show="showStats"> | ||
<div class="panel panel-info panel-stats"> | ||
<div class="panel-heading"> | ||
<h3 class="panel-title">Video</h3> | ||
</div> | ||
<div class="panel-body"> | ||
<span>{{videoBitrate}} kbps</span> | ||
<span>Rep Index: {{videoIndex}}{{videoPendingIndex}}/{{videoMaxIndex}}</span> | ||
<span>Buffer Length: {{videoBufferLength}}</span> | ||
<span>Dropped Frames: {{videoDroppedFrames}}</span> | ||
</div> | ||
</div> | ||
<div class="panel panel-success panel-stats"> | ||
<div class="panel-heading"> | ||
<h3 class="panel-title">Audio</h3> | ||
</div> | ||
<div class="panel-body"> | ||
<span>{{audioBitrate}} kbps</span> | ||
<span>Rep Index: {{audioIndex}}{{audioPendingIndex}}/{{audioMaxIndex}}</span> | ||
<span>Buffer Length: {{audioBufferLength}}</span> | ||
<span>Dropped Frames: {{audioDroppedFrames}}</span> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div id="scrubber" class="progress scrubber"> | ||
<div id="scrubber-content" class="progress-bar progress-bar-success" role="progressbar"></div> | ||
</div> | ||
</body> | ||
</html> |
173 changes: 173 additions & 0 deletions
173
samples/chromecast/receiver/js/CastReceiverController.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,173 @@ | ||
var app = angular.module('DashCastReceiverApp.controllers',[]); | ||
|
||
app.controller('CastReceiverController', ['$scope', 'dashPlayer', function($scope, dashPlayer) { | ||
// Set up namespace. | ||
const NAMESPACE = "urn:x-cast:org.dashif.dashjs"; | ||
|
||
$scope.showSpinner = true; | ||
$scope.showVideo = false; | ||
$scope.showStats = false; | ||
|
||
$scope.videoBitrate = 0; | ||
$scope.videoIndex = 0; | ||
$scope.videoPendingIndex = ""; | ||
$scope.videoMaxIndex = 0; | ||
$scope.videoBufferLength = 0; | ||
$scope.videoDroppedFrames = 0; | ||
|
||
$scope.audioBitrate = 0; | ||
$scope.audioIndex = 0; | ||
$scope.audioPendingIndex = ""; | ||
$scope.audioMaxIndex = 0; | ||
$scope.audioBufferLength = 0; | ||
$scope.audioDroppedFrames = 0; | ||
|
||
var castPlayer, | ||
video, | ||
caption, | ||
graphUpdateInterval = 999, | ||
|
||
update = function () { | ||
var metrics; | ||
|
||
metrics = dashPlayer.getMetricsFor("video"); | ||
if (metrics) { | ||
$scope.videoBitrate = metrics.bandwidthValue; | ||
$scope.videoIndex = metrics.bitrateIndexValue; | ||
$scope.videoPendingIndex = metrics.pendingIndex; | ||
$scope.videoMaxIndex = metrics.numBitratesValue; | ||
$scope.videoBufferLength = metrics.bufferLengthValue; | ||
$scope.videoDroppedFrames = metrics.droppedFramesValue; | ||
} | ||
|
||
metrics = dashPlayer.getMetricsFor("audio"); | ||
if (metrics) { | ||
$scope.audioBitrate = metrics.bandwidthValue; | ||
$scope.audioIndex = metrics.bitrateIndexValue; | ||
$scope.audioPendingIndex = metrics.pendingIndex; | ||
$scope.audioMaxIndex = metrics.numBitratesValue; | ||
$scope.audioBufferLength = metrics.bufferLengthValue; | ||
$scope.audioDroppedFrames = metrics.droppedFramesValue; | ||
} | ||
|
||
$scope.$apply(); | ||
|
||
setTimeout(update, graphUpdateInterval); | ||
}; | ||
|
||
this.$onInit = function() { | ||
var castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); | ||
if (dashPlayer) { | ||
video = document.querySelector(".dash-video-player video"); | ||
caption = document.getElementById('video-caption'); | ||
dashPlayer.initialize(this, video, caption); | ||
castPlayer = new cast.receiver.MediaManager(dashPlayer); | ||
// override onLoad to manage protection data sent as mediaInfo.customData | ||
castPlayer.onLoad = this.onLoad.bind(this); | ||
// implements customizedStatusCallback in order to manage tracks | ||
castPlayer.customizedStatusCallback = this.customizedStatusCallback.bind(this); | ||
} | ||
var customMessageBus = castReceiverManager.getCastMessageBus(NAMESPACE); | ||
customMessageBus.onMessage = this.onDashMessage; | ||
castReceiverManager.start(); | ||
} | ||
|
||
this.onLoad = function (event) { | ||
let data = event.data; //cast.receiver.MediaManager.LoadRequestData; | ||
let media = data.media; | ||
|
||
if (!media || !castPlayer) { | ||
return; | ||
} | ||
|
||
let protData = media.customData && media.customData.protData; | ||
dashPlayer.loadMedia(media.contentId, protData); | ||
} | ||
|
||
this.customizedStatusCallback = function (mediaStatus) { | ||
if (dashPlayer) { | ||
mediaStatus.activeTrackIds = dashPlayer.getActiveTrackIds(); | ||
} | ||
return mediaStatus; | ||
} | ||
|
||
// ----------------------------------- | ||
// CastReceiver Delegate Methods | ||
// ----------------------------------- | ||
|
||
this.startVideo = function (url, isLive) { | ||
console.log("Loading video: " + url, " | is live: " + isLive); | ||
|
||
$scope.showSpinner = false; | ||
$scope.showVideo = true; | ||
$scope.showStats = false; | ||
|
||
setTimeout(update, graphUpdateInterval); | ||
|
||
$scope.$apply(); | ||
}; | ||
|
||
this.endVideo = function () { | ||
castPlayer.broadcastStatus(); | ||
$scope.showSpinner = true; | ||
$scope.showVideo = false; | ||
$scope.showStats = false; | ||
$scope.$apply(); | ||
}; | ||
|
||
this.onLoadedMetadata = function (e) { | ||
if (e.currentTarget) { | ||
let mediaInfo = castPlayer.getMediaInformation(); | ||
mediaInfo.duration = e.currentTarget.duration; | ||
mediaInfo.tracks = dashPlayer.getTracks(); | ||
castPlayer.setMediaInformation(mediaInfo); | ||
} | ||
}; | ||
|
||
this.onVideoTime = function (e) { | ||
|
||
var p = (video.currentTime / video.duration) * 100; | ||
$("#scrubber-content").width(p + "%"); | ||
console.log("Set current progress: " + video.currentTime + " / " + video.duration + "(" + p + "%)"); | ||
|
||
console.log("Dispatching time updated: " + video.currentTime); | ||
|
||
// TODO : Dash.JS doesn't properly dispatch an end event, so fake it. | ||
var t = video.currentTime, | ||
d = video.duration; | ||
if (t === d) { | ||
this.onVideoEnded(); | ||
} | ||
}; | ||
|
||
this.onVideoDuration = function (e) { | ||
console.log("Dispatching duration changed: " + video.duration); | ||
}; | ||
|
||
this.onVideoEnded = function (e) { | ||
this.endVideo(); | ||
console.log("Dispatching video ended."); | ||
}; | ||
|
||
this.getCurrentTime = function () { | ||
return video.currentTime; | ||
} | ||
|
||
this.onDashMessage = function (e) { | ||
var message = e.data && JSON.parse(e.data); | ||
|
||
console.debug('Message received', message); | ||
|
||
if (message) { | ||
|
||
switch (message.type) { | ||
case "TOGGLE_STATS": | ||
$scope.showStats = !$scope.showStats; | ||
$scope.$apply(); | ||
break; | ||
// here we can implement some other custom messages | ||
} | ||
} | ||
}; | ||
|
||
}]); |
Oops, something went wrong.