Skip to content

Commit e431e8b

Browse files
dsilhavydsilhavy
authored
Fix/cmcd (#3745)
* Remove last comma in the CMCD string * Remove quotes from CMCD token fields * Only show values in CMCD demo page that have been reported
1 parent 4ff8a25 commit e431e8b

File tree

2 files changed

+62
-39
lines changed

2 files changed

+62
-39
lines changed

‎samples/advanced/cmcd.html‎

Lines changed: 51 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
}
1818

1919
#trace {
20-
height:500px;
20+
height: 500px;
2121
margin-top: 20px;
2222
font-size: 10px;
2323
}
@@ -27,17 +27,17 @@
2727
var CMCD_DATA_GENERATED = dashjs.MetricsReporting.events.CMCD_DATA_GENERATED;
2828

2929
/* possible modes of attach cmcd data */
30-
var CMCD_MODE_QUERY = "query"; /* as query parameters */
31-
var CMCD_MODE_HEADER = "header"; /* as HTTP headers */
30+
var CMCD_MODE_QUERY = 'query'; /* as query parameters */
31+
var CMCD_MODE_HEADER = 'header'; /* as HTTP headers */
32+
var player;
3233

3334
function init() {
3435
var video,
35-
player,
36-
url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
36+
url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
3737
version;
3838

3939
player = dashjs.MediaPlayer().create();
40-
video = document.querySelector("video");
40+
video = document.querySelector('video');
4141
player.initialize();
4242
version = player.getVersion();
4343

@@ -56,48 +56,65 @@
5656
player.setAutoPlay(false);
5757
player.attachView(video);
5858
player.attachSource(url);
59-
60-
var TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
61-
player.attachTTMLRenderingDiv(TTMLRenderingDiv);
6259
}
6360

6461
function handleCmcdDataGeneratedEvent(event) {
65-
log("type: " + event.mediaType);
66-
log("file: " + event.url.split("/").pop())
67-
var keys = Object.keys(event.cmcdData);
62+
log('type: ' + event.mediaType);
63+
log('file: ' + event.url.split('/').pop())
64+
var mode = player.getSettings().streaming.cmcd.mode;
65+
var data = mode === CMCD_MODE_HEADER ? getKeysForHeaderMode(event) : getKeysForQueryMode(event);
66+
var keys = Object.keys(data);
6867
keys = keys.sort();
6968
for (var key of keys) {
70-
log(key.padEnd(4) + ": " + event.cmcdData[key]);
69+
log(key.padEnd(4) + ': ' + event.cmcdData[key]);
7170
}
72-
log("");
71+
log('');
7372
}
7473

75-
function log(msg) {
76-
msg = msg.length > 200 ? msg.substring(0, 200) + "..." : msg; /* to avoid repeated wrapping with large objects */
77-
var tracePanel = document.getElementById("trace");
78-
tracePanel.innerHTML += msg + "\n";
79-
tracePanel.scrollTop = tracePanel.scrollHeight;
80-
console.log(msg);
74+
function getKeysForQueryMode(event) {
75+
var cmcdData = {};
76+
var cmcdString = event.cmcdString;
77+
78+
extractKeyValuePairs(cmcdString, cmcdData);
79+
80+
return cmcdData;
8181
}
8282

83-
function handleCmcdDataGeneratedEvent(event) {
84-
log("type: " + event.mediaType);
85-
log("file: " + event.url.split("/").pop())
86-
var keys = Object.keys(event.cmcdData);
87-
keys = keys.sort();
83+
function getKeysForHeaderMode(event) {
84+
var cmcdData = {};
85+
var keys = Object.keys(event.headers);
86+
8887
for (var key of keys) {
89-
log(key.padEnd(4) + ": " + event.cmcdData[key]);
88+
extractKeyValuePairs(event.headers[key], cmcdData)
89+
}
90+
91+
return cmcdData
92+
}
93+
94+
function extractKeyValuePairs(cmcdString, cmcdData) {
95+
if (cmcdString === '') {
96+
return;
9097
}
91-
log("");
98+
var keyValuePairs = cmcdString.split(',');
99+
100+
keyValuePairs.forEach(function (keyValuePair) {
101+
var data = keyValuePair.split('=');
102+
var key = data[0];
103+
var value = data[1];
104+
105+
cmcdData[key] = value;
106+
})
107+
92108
}
93109

94110
function log(msg) {
95-
msg = msg.length > 200 ? msg.substring(0, 200) + "..." : msg; /* to avoid repeated wrapping with large objects */
96-
var tracePanel = document.getElementById("trace");
97-
tracePanel.innerHTML += msg + "\n";
111+
msg = msg.length > 200 ? msg.substring(0, 200) + '...' : msg; /* to avoid repeated wrapping with large objects */
112+
var tracePanel = document.getElementById('trace');
113+
tracePanel.innerHTML += msg + '\n';
98114
tracePanel.scrollTop = tracePanel.scrollHeight;
99115
console.log(msg);
100116
}
117+
101118
</script>
102119
</head>
103120
<body>
@@ -113,7 +130,8 @@
113130
<div class="col-md-12">
114131
<div class="h-100 p-5 bg-light border rounded-3">
115132
<h3>CMCD Reporting</h3>
116-
<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>
133+
<p>This sample shows how to use dash.js in order to enhance requests to the CDN with Common Media
134+
Client Data (CMCD - CTA 5004).</p>
117135
</div>
118136
</div>
119137
</div>
@@ -123,7 +141,8 @@ <h3>CMCD Reporting</h3>
123141
</div>
124142
<div class="col-md-6">
125143
<div class="form-floating">
126-
<textarea class="form-control" placeholder="Sent CMCD data will be displayed here" id="trace"></textarea>
144+
<textarea class="form-control" placeholder="Sent CMCD data will be displayed here"
145+
id="trace"></textarea>
127146
<label for="trace">CMCD Data</label>
128147
</div>
129148
</div>

‎src/streaming/models/CmcdModel.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,8 @@ function CmcdModel() {
188188
eventBus.trigger(MetricsReportingEvents.CMCD_DATA_GENERATED, {
189189
url: request.url,
190190
mediaType: request.mediaType,
191-
cmcdData
191+
cmcdData,
192+
headers
192193
});
193194
return headers;
194195
}
@@ -233,7 +234,7 @@ function CmcdModel() {
233234
function _getCmcdDataForMpd() {
234235
const data = _getGenericCmcdData();
235236

236-
data.ot = `${OBJECT_TYPES.MANIFEST}`;
237+
data.ot = OBJECT_TYPES.MANIFEST;
237238

238239
return data;
239240
}
@@ -340,7 +341,7 @@ function CmcdModel() {
340341
function _getCmcdDataForInitSegment() {
341342
const data = _getGenericCmcdData();
342343

343-
data.ot = `${OBJECT_TYPES.INIT}`;
344+
data.ot = OBJECT_TYPES.INIT;
344345
data.su = true;
345346

346347
return data;
@@ -349,7 +350,7 @@ function CmcdModel() {
349350
function _getCmcdDataForOther() {
350351
const data = _getGenericCmcdData();
351352

352-
data.ot = `${OBJECT_TYPES.OTHER}`;
353+
data.ot = OBJECT_TYPES.OTHER;
353354

354355
return data;
355356
}
@@ -460,8 +461,8 @@ function CmcdModel() {
460461
function _onManifestLoaded(data) {
461462
try {
462463
const isDynamic = dashManifestModel.getIsDynamic(data.data);
463-
const st = isDynamic ? `${STREAM_TYPES.LIVE}` : `${STREAM_TYPES.VOD}`;
464-
const sf = data.protocol && data.protocol === 'MSS' ? `${STREAMING_FORMATS.MSS}` : `${STREAMING_FORMATS.DASH}`;
464+
const st = isDynamic ? STREAM_TYPES.LIVE : STREAM_TYPES.VOD;
465+
const sf = data.protocol && data.protocol === 'MSS' ? STREAMING_FORMATS.MSS : STREAMING_FORMATS.DASH;
465466

466467
internalData.st = `${st}`;
467468
internalData.sf = `${sf}`;
@@ -511,7 +512,7 @@ function CmcdModel() {
511512

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

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

530+
// Remove last comma at the end
531+
cmcdString = cmcdString.replace(/,\s*$/, '');
532+
529533
return cmcdString;
530534
} catch (e) {
531535
return null;

0 commit comments

Comments
 (0)