Skip to content

Commit

Permalink
Merge branch 'ChromeCast-receiver-dash' of https://github.com/Orange-…
Browse files Browse the repository at this point in the history
…OpenSource/dash.js into Orange-OpenSource-ChromeCast-receiver-dash

� Conflicts:
�	samples/dash-if-reference-player/index.html
  • Loading branch information
dsilhavy committed Dec 4, 2020
2 parents 3aa1932 + e796cd6 commit c4781dd
Show file tree
Hide file tree
Showing 16 changed files with 1,284 additions and 693 deletions.
158 changes: 88 additions & 70 deletions contrib/akamai/controlbar/ControlBar.js

Large diffs are not rendered by default.

63 changes: 0 additions & 63 deletions samples/chromecast/index.html

This file was deleted.

75 changes: 75 additions & 0 deletions samples/chromecast/receiver/index.html
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 samples/chromecast/receiver/js/CastReceiverController.js
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
}
}
};

}]);
Loading

0 comments on commit c4781dd

Please sign in to comment.