Skip to content

Commit

Permalink
Fix/cmcd (#3745)
Browse files Browse the repository at this point in the history 
* Remove last comma in the CMCD string

* Remove quotes from CMCD token fields

* Only show values in CMCD demo page that have been reported
  • Loading branch information
@dsilhavy
dsilhavy authored Aug 27, 2021
1 parent 4ff8a25 commit e431e8b
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 39 deletions.
83 changes: 51 additions & 32 deletions samples/advanced/cmcd.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}

#trace {
height:500px;
height: 500px;
margin-top: 20px;
font-size: 10px;
}
Expand All @@ -27,17 +27,17 @@
var CMCD_DATA_GENERATED = dashjs.MetricsReporting.events.CMCD_DATA_GENERATED;

/* possible modes of attach cmcd data */
var CMCD_MODE_QUERY = "query"; /* as query parameters */
var CMCD_MODE_HEADER = "header"; /* as HTTP headers */
var CMCD_MODE_QUERY = 'query'; /* as query parameters */
var CMCD_MODE_HEADER = 'header'; /* as HTTP headers */
var player;

function init() {
var video,
player,
url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
version;

player = dashjs.MediaPlayer().create();
video = document.querySelector("video");
video = document.querySelector('video');
player.initialize();
version = player.getVersion();

Expand All @@ -56,48 +56,65 @@
player.setAutoPlay(false);
player.attachView(video);
player.attachSource(url);

var TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
player.attachTTMLRenderingDiv(TTMLRenderingDiv);
}

function handleCmcdDataGeneratedEvent(event) {
log("type: " + event.mediaType);
log("file: " + event.url.split("/").pop())
var keys = Object.keys(event.cmcdData);
log('type: ' + event.mediaType);
log('file: ' + event.url.split('/').pop())
var mode = player.getSettings().streaming.cmcd.mode;
var data = mode === CMCD_MODE_HEADER ? getKeysForHeaderMode(event) : getKeysForQueryMode(event);
var keys = Object.keys(data);
keys = keys.sort();
for (var key of keys) {
log(key.padEnd(4) + ": " + event.cmcdData[key]);
log(key.padEnd(4) + ': ' + event.cmcdData[key]);
}
log("");
log('');
}

function log(msg) {
msg = msg.length > 200 ? msg.substring(0, 200) + "..." : msg; /* to avoid repeated wrapping with large objects */
var tracePanel = document.getElementById("trace");
tracePanel.innerHTML += msg + "\n";
tracePanel.scrollTop = tracePanel.scrollHeight;
console.log(msg);
function getKeysForQueryMode(event) {
var cmcdData = {};
var cmcdString = event.cmcdString;

extractKeyValuePairs(cmcdString, cmcdData);

return cmcdData;
}

function handleCmcdDataGeneratedEvent(event) {
log("type: " + event.mediaType);
log("file: " + event.url.split("/").pop())
var keys = Object.keys(event.cmcdData);
keys = keys.sort();
function getKeysForHeaderMode(event) {
var cmcdData = {};
var keys = Object.keys(event.headers);

for (var key of keys) {
log(key.padEnd(4) + ": " + event.cmcdData[key]);
extractKeyValuePairs(event.headers[key], cmcdData)
}

return cmcdData
}

function extractKeyValuePairs(cmcdString, cmcdData) {
if (cmcdString === '') {
return;
}
log("");
var keyValuePairs = cmcdString.split(',');

keyValuePairs.forEach(function (keyValuePair) {
var data = keyValuePair.split('=');
var key = data[0];
var value = data[1];

cmcdData[key] = value;
})

}

function log(msg) {
msg = msg.length > 200 ? msg.substring(0, 200) + "..." : msg; /* to avoid repeated wrapping with large objects */
var tracePanel = document.getElementById("trace");
tracePanel.innerHTML += msg + "\n";
msg = msg.length > 200 ? msg.substring(0, 200) + '...' : msg; /* to avoid repeated wrapping with large objects */
var tracePanel = document.getElementById('trace');
tracePanel.innerHTML += msg + '\n';
tracePanel.scrollTop = tracePanel.scrollHeight;
console.log(msg);
}

</script>
</head>
<body>
Expand All @@ -113,7 +130,8 @@
<div class="col-md-12">
<div class="h-100 p-5 bg-light border rounded-3">
<h3>CMCD Reporting</h3>
<p>This sample shows how to use dash.js in order to enhance requests to the CDN with Common Media Client Data (CMCD - CTA 5004).</p>
<p>This sample shows how to use dash.js in order to enhance requests to the CDN with Common Media
Client Data (CMCD - CTA 5004).</p>
</div>
</div>
</div>
Expand All @@ -123,7 +141,8 @@ <h3>CMCD Reporting</h3>
</div>
<div class="col-md-6">
<div class="form-floating">
<textarea class="form-control" placeholder="Sent CMCD data will be displayed here" id="trace"></textarea>
<textarea class="form-control" placeholder="Sent CMCD data will be displayed here"
id="trace"></textarea>
<label for="trace">CMCD Data</label>
</div>
</div>
Expand Down
18 changes: 11 additions & 7 deletions src/streaming/models/CmcdModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,8 @@ function CmcdModel() {
eventBus.trigger(MetricsReportingEvents.CMCD_DATA_GENERATED, {
url: request.url,
mediaType: request.mediaType,
cmcdData
cmcdData,
headers
});
return headers;
}
Expand Down Expand Up @@ -233,7 +234,7 @@ function CmcdModel() {
function _getCmcdDataForMpd() {
const data = _getGenericCmcdData();

data.ot = `${OBJECT_TYPES.MANIFEST}`;
data.ot = OBJECT_TYPES.MANIFEST;

return data;
}
Expand Down Expand Up @@ -340,7 +341,7 @@ function CmcdModel() {
function _getCmcdDataForInitSegment() {
const data = _getGenericCmcdData();

data.ot = `${OBJECT_TYPES.INIT}`;
data.ot = OBJECT_TYPES.INIT;
data.su = true;

return data;
Expand All @@ -349,7 +350,7 @@ function CmcdModel() {
function _getCmcdDataForOther() {
const data = _getGenericCmcdData();

data.ot = `${OBJECT_TYPES.OTHER}`;
data.ot = OBJECT_TYPES.OTHER;

return data;
}
Expand Down Expand Up @@ -460,8 +461,8 @@ function CmcdModel() {
function _onManifestLoaded(data) {
try {
const isDynamic = dashManifestModel.getIsDynamic(data.data);
const st = isDynamic ? `${STREAM_TYPES.LIVE}` : `${STREAM_TYPES.VOD}`;
const sf = data.protocol && data.protocol === 'MSS' ? `${STREAMING_FORMATS.MSS}` : `${STREAMING_FORMATS.DASH}`;
const st = isDynamic ? STREAM_TYPES.LIVE : STREAM_TYPES.VOD;
const sf = data.protocol && data.protocol === 'MSS' ? STREAMING_FORMATS.MSS : STREAMING_FORMATS.DASH;

internalData.st = `${st}`;
internalData.sf = `${sf}`;
Expand Down Expand Up @@ -511,7 +512,7 @@ function CmcdModel() {

let cmcdString = keys.reduce((acc, key, index) => {
if (key === 'v' && cmcdData[key] === 1) return acc; // Version key should only be reported if it is != 1
if (typeof cmcdData[key] === 'string' && (key !== 'ot' || key !== 'sf' || key !== 'st')) {
if (typeof cmcdData[key] === 'string' && key !== 'ot' && key !== 'sf' && key !== 'st') {
let string = cmcdData[key].replace(/"/g, '\"');
acc += `${key}="${string}"`;
} else {
Expand All @@ -526,6 +527,9 @@ function CmcdModel() {

cmcdString = cmcdString.replace(/=true/g, '');

// Remove last comma at the end
cmcdString = cmcdString.replace(/,\s*$/, '');

return cmcdString;
} catch (e) {
return null;
Expand Down

0 comments on commit e431e8b

Please sign in to comment.