Skip to content

Fix/cmcd #3745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 27, 2021
Merged

Fix/cmcd #3745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
708ae13
Remove last comma in the CMCD string
dsilhavy Aug 27, 2021
ce5e787
Remove quotes from CMCD token fields
dsilhavy Aug 27, 2021
1faf966
Only show values in CMCD demo page that have been reported
dsilhavy Aug 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 51 additions & 32 deletions samples/advanced/cmcd.html
View file
Open in desktop
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
Open in desktop
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