qualabs · cotid-qualabs · Aug 15, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/build/webpack.dev.cjs b/build/webpack.dev.cjs
@@ -19,7 +19,7 @@ const umdDevConfig = merge(umdConfig, {
         open: ['samples/index.html'],
         hot: true,
         compress: true,
-        port: 3000
+        port: 3001
     }
 });
 

diff --git a/docs/cmcd-v2/reporting-modes.md b/docs/cmcd-v2/reporting-modes.md
@@ -0,0 +1,17 @@
+## Reporting modes
+
+Here are notes about the challenge of implementing the new reporting modes of CMCD-v2.
+
+### Response Mode
+
+- Modified the `_updateRequestUrlAndHeadersWithCMCD` function to save the cmcdHeaders or `cmcdParams` in `customData` so they can be sent to the remote server in the `_onRequestEnd` function.
+
+- Observations:
+    - The mode that already exists in the configuration for the "transmition mode" might be confusing with the new mode for the "reporting mode".
+
+    - The ‘ts’ key is not entirely accurate since the CMCD parameters are generated before the request starts.
+
+
+### Event Mode
+
+- Should the state be set to rebuffering when the video buffer gets stalled? or also the audio buffer?
diff --git a/samples/advanced/cmcd-alternative-ads.html b/samples/advanced/cmcd-alternative-ads.html
@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Live + AlternativeMPD + ListMPD + CMCD v2</title>
+
+    <script src="../../dist/dash.all.debug.js"></script>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
+    <link href="../lib/main.css" rel="stylesheet">
+
+    <style>
+        video {
+            width: 640px;
+            height: 360px;
+        }
+
+        #trace {
+            height: 500px;
+            margin-top: 20px;
+            font-size: 10px;
+        }
+    </style>
+
+    <script class="code">
+        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 player;
+
+        function init() {
+            var video,
+                url = 'mpds/live-alternative-ads.mpd',
+                version;
+
+            player = dashjs.MediaPlayer().create();
+            video = document.querySelector('video');
+            player.initialize();
+            version = player.getVersion();
+
+            player.on(CMCD_DATA_GENERATED, handleCmcdDataGeneratedEvent);
+
+            player.updateSettings({
+                streaming: {
+                    cmcd: {
+                        enabled: true, /* global enable reporting of cmcd parameters */
+                        version: 2, /* 1 is the default version */
+                        reporting: {
+                            requestMode: {
+                                enabled: true, /* enable cmcdv2 request mode */
+                                mode: CMCD_MODE_QUERY, /* overrides global mode */
+                            },
+                            responseMode: {
+                                enabled: true, /* enable cmcdv2 response mode. FALSE by default */
+                                mode: CMCD_MODE_QUERY, /* overrides global mode. JSON not supported */
+                                enabledKeys: ['bg', 'int', 'sid', 'cid', 'ts', 'url', 'br', 'd', 'ot', 'tb', 'v', 'sta', 'ttfb', 'ttlb','rc'], /* optional, overrides global keys */
+                                requestUrl: 'http://' + window.location.hostname + ':3000/cmcd/response-mode', /*mandatory, URL to send report */
+                                requestMethod: 'POST', /*optional, get by default */
+                            },
+                            eventMode: {
+                                enabled: true, /* enable cmcdv2 event mode. FALSE by default */
+                                mode: CMCD_MODE_QUERY, /*overrides global mode. JSON not supported */
+                                interval: 10000,  /* time in ms between regular requests. Default 30s or 0 to omit */
+                                // enabledKeys: ['bg', 'br', 'e','int', 'sta', 'sid', 'cid', 'sf', 'v', 'ltc', 'msd', 'sta'], /* Currently only supports: 'sta', 'ts', 'sid', 'cid', 'sf', 'v', 'lb', 'pr' */
+                                requestUrl: 'http://' + window.location.hostname + ':3000/cmcd/event-mode', /* mandatory, URL to send report */
+                                requestMethod: 'POST',  /* optional, get by default */
+                            }
+                        },
+                        sid: 'b248658d-1d1a-4039-91d0-8c08ba597da5', /* session id send with each request */
+                        cid: '21cf726cfe3d937b5f974f72bb5bd06a', /* content id send with each request */
+                        mode: CMCD_MODE_QUERY, /* global mode if not specified in each mode */
+                        // enabledKeys: ['bg', 'int', 'br', 'd', 'ot', 'tb' , 'bl', 'dl', 'mtp', 'nor', 'nrr', 'su' , 'bs', 'rtp' , 'cid', 'pr', 'sf', 'sid', 'st', 'v', 'sta', 'ltc', 'msd', 'sta']
+                    }
+                }
+            });
+            player.setAutoPlay(true);
+            player.attachView(video);
+            player.attachSource(url);
+        }
+
+        function handleCmcdDataGeneratedEvent(event) {
+            log('type: ' + event.mediaType);
+            log('file: ' + event.url.split('/').pop())
+            var mode = player.getSettings().streaming.cmcd.mode;
+            const cmcdVersion = player.getSettings().streaming.cmcd.version;
+            var data = {};
+            if (cmcdVersion === 1) {
+                data = mode === CMCD_MODE_HEADER ? getKeysForHeaderMode(event) : getKeysForQueryMode(event);
+            } else if (cmcdVersion === 2){
+                /* Currently, headers are always generated in cmcd version 2 */
+                data = getKeysForHeaderMode(event);
+            }
+            var keys = Object.keys(data);
+            keys = keys.sort();
+            for (var key of keys) {
+                log(key.padEnd(4) + ': ' + event.cmcdData[key]);
+            }
+            log('');
+        }
+
+        function getKeysForQueryMode(event) {
+            var cmcdData = {};
+            var cmcdString = event.cmcdString;
+
+            extractKeyValuePairs(cmcdString, cmcdData);
+
+            return cmcdData;
+        }
+
+        function getKeysForHeaderMode(event) {
+            var cmcdData = {};
+            var keys = Object.keys(event.headers);
+
+            for (var key of keys) {
+                extractKeyValuePairs(event.headers[key], cmcdData)
+            }
+
+            return cmcdData
+        }
+
+        function extractKeyValuePairs(cmcdString, cmcdData) {
+            if (cmcdString === '') {
+                return;
+            }
+            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';
+            tracePanel.scrollTop = tracePanel.scrollHeight;
+            //console.log(msg);
+        }
+
+    </script>
+</head>
+<body>
+
+<main>
+    <div class="container py-4">
+        <header class="pb-3 mb-4 border-bottom">
+            <img class=""
+                 src="../lib/img/dashjs-logo.png"
+                 width="200">
+        </header>
+        <div class="row">
+            <div class="col-md-12">
+                <div class="h-100 p-5 bg-light border rounded-3">
+                    <h3>Live + AlternativeMPD + ListMPD + CMCD v2</h3>
+                    <p>This sample shows how use AlternativeMPD and ListMPD to replace and Ad slot with an Ad Pod while sending all the CMCD v2 requests</p>
+                </div>
+            </div>
+        </div>
+        <div class="row mt-2">
+            <div class="col-md-6">
+                <video controls="true"></video>
+            </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>
+                    <label for="trace">CMCD Data</label>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <div id="code-output"></div>
+            </div>
+        </div>
+        <footer class="pt-3 mt-4 text-muted border-top">
+            &copy; DASH-IF
+        </footer>
+    </div>
+</main>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        init();
+    });
+</script>
+<script src="../highlighter.js"></script>
+</body>
+</html>
diff --git a/samples/advanced/cmcd.html b/samples/advanced/cmcd.html
@@ -46,11 +46,33 @@
             player.updateSettings({
                 streaming: {
                     cmcd: {
-                        enabled: true, /* enable reporting of cmcd parameters */
+                        enabled: true, /* global enable reporting of cmcd parameters */
+                        version: 2, /* 1 is the default version */
+                        reporting: {
+                            requestMode: {
+                                enabled: true, /* enable cmcdv2 request mode */
+                                mode: CMCD_MODE_QUERY, /* overrides global mode */
+                            },
+                            responseMode: {
+                                enabled: true, /* enable cmcdv2 response mode. FALSE by default */
+                                mode: CMCD_MODE_QUERY, /* overrides global mode. JSON not supported */
+                                enabledKeys: ['sid', 'cid', 'ts', 'url', 'br', 'd', 'ot', 'tb', 'v', 'sta', 'ttfb', 'ttlb','rc'], /* optional, overrides global keys */
+                                requestUrl: 'http://localhost:3000/cmcd/response-mode', /*mandatory, URL to send report */
+                                requestMethod: 'POST', /*optional, get by default */
+                            },
+                            eventMode: {
+                                enabled: true, /* enable cmcdv2 event mode. FALSE by default */
+                                mode: CMCD_MODE_QUERY, /*overrides global mode. JSON not supported */
+                                interval: 10000,  /* time in ms between regular requests. Default 30s or 0 to omit */
+                                enabledKeys: ['sta', 'sid', 'cid', 'sf', 'v', 'ltc', 'msd', 'sta'], /* Currently only supports: 'sta', 'ts', 'sid', 'cid', 'sf', 'v', 'lb', 'pr' */
+                                requestUrl: 'http://localhost:3000/cmcd/event-mode', /* mandatory, URL to send report */
+                                requestMethod: 'POST',  /* optional, get by default */
+                            }
+                        },
                         sid: 'b248658d-1d1a-4039-91d0-8c08ba597da5', /* session id send with each request */
                         cid: '21cf726cfe3d937b5f974f72bb5bd06a', /* content id send with each request */
-                        mode: CMCD_MODE_QUERY,
-                        enabledKeys: ['br', 'd', 'ot', 'tb' , 'bl', 'dl', 'mtp', 'nor', 'nrr', 'su' , 'bs', 'rtp' , 'cid', 'pr', 'sf', 'sid', 'st', 'v']
+                        mode: CMCD_MODE_QUERY, /* global mode if not specified in each mode */
+                        enabledKeys: ['br', 'd', 'ot', 'tb' , 'bl', 'dl', 'mtp', 'nor', 'nrr', 'su' , 'bs', 'rtp' , 'cid', 'pr', 'sf', 'sid', 'st', 'v', 'sta', 'ltc', 'msd', 'sta']
                     }
                 }
             });
@@ -63,7 +85,14 @@
             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);
+            const cmcdVersion = player.getSettings().streaming.cmcd.version;
+            var data = {};
+            if (cmcdVersion === 1) {
+                data = mode === CMCD_MODE_HEADER ? getKeysForHeaderMode(event) : getKeysForQueryMode(event);
+            } else if (cmcdVersion === 2){
+                /* Currently, headers are always generated in cmcd version 2 */
+                data = getKeysForHeaderMode(event);
+            }
             var keys = Object.keys(data);
             keys = keys.sort();
             for (var key of keys) {

diff --git a/samples/advanced/mpds/ad-pod.mpd b/samples/advanced/mpds/ad-pod.mpd
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns="urn:mpeg:dash:schema:mpd:2011"
+  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
+  type="list"
+  minBufferTime="PT1S"
+  profiles="urn:mpeg:dash:profile:list:2024"
+  publishTime="2025-01-14T20:29:31.022Z">
+  <Period id="1" duration="PT10S">
+    <ImportedMPD
+      uri="https://redirector.gvt1.com/api/manifest/dash/id/f1be9c477e89fd68/itag/0/source/dclk_video_ads/acao/yes/cpn/qOvh4O0YAa2jPbET/ctier/L/ei/CfJEZ46ED5SPobIP0NmgiQ0/hfr/all/ip/0.0.0.0/keepalive/yes/playlist_type/DVR/requiressl/yes/susc/dvc/xpc/Eghovf3BOnoBAQ%3D%3D/expire/1764107657/sparams/expire,ei,ip,requiressl,source,itag,hfr,acao,ctier,id,playlist_type,susc,xpc/sig/AJfQdSswRAIgVHu-YX-65-daHfdpM5veBIhJDBnU9O7E7FPNelDibkICIFMOgZMWJbFeH3Z2BE8umm5PaUMZuBOwCWiffDy2kh1B/file/index.mpd"
+      earliestResolutionTimeOffset="0" />
+  </Period>
+  <Period id="2" duration="PT10S">
+    <ImportedMPD
+      uri="https://redirector.gvt1.com/api/manifest/dash/id/f1be9c477e89fd68/itag/0/source/dclk_video_ads/acao/yes/cpn/qOvh4O0YAa2jPbET/ctier/L/ei/CfJEZ46ED5SPobIP0NmgiQ0/hfr/all/ip/0.0.0.0/keepalive/yes/playlist_type/DVR/requiressl/yes/susc/dvc/xpc/Eghovf3BOnoBAQ%3D%3D/expire/1764107657/sparams/expire,ei,ip,requiressl,source,itag,hfr,acao,ctier,id,playlist_type,susc,xpc/sig/AJfQdSswRAIgVHu-YX-65-daHfdpM5veBIhJDBnU9O7E7FPNelDibkICIFMOgZMWJbFeH3Z2BE8umm5PaUMZuBOwCWiffDy2kh1B/file/index.mpd"
+      earliestResolutionTimeOffset="10" />
+  </Period>
+</MPD>
diff --git a/samples/advanced/mpds/live-alternative-ads.mpd b/samples/advanced/mpds/live-alternative-ads.mpd
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
+  xmlns:cmcd="http://qualabs.com/cmcd"
+  profiles="urn:mpeg:dash:profile:isoff-live:2011,http://dashif.org/guidelines/dash-if-simple"
+  type="dynamic" availabilityStartTime="1970-01-01T00:00:00Z" publishTime="1970-01-01T00:00:00Z"
+  minimumUpdatePeriod="PT2S" minBufferTime="PT2S" timeShiftBufferDepth="PT1M"
+  maxSegmentDuration="PT2S">
+  <BaseURL>https://livesim.dashif.org/livesim2/scte35_2/testpic_2s/</BaseURL>
+  <Period id="P0" start="PT0S">
+    <EventStream xmlns="" schemeIdUri="urn:mpeg:dash:event:alternativeMPD:2022" timescale="1000">
+      <Event id="ad1_vast2sgai" presentationTime="10000" duration="20000">
+        <AlternativeMPD uri="http://localhost:3001/samples/advanced/mpds/ad-pod.mpd"
+          earliestResolutionTimeOffset="5000" mode="replace" returnOffset="0" cmcd:RequestModeEnabled="false" />
+      </Event>
+      <Event id="ad2_mpd" presentationTime="40000" duration="5000">
+        <AlternativeMPD
+          uri="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/TestAssets/MediaOfflineErrorAsset/stream.mpd"
+          earliestResolutionTimeOffset="5000" mode="replace" returnOffset="0" />
+      </Event>
+      <Event id="ad3_mpd" presentationTime="70000" duration="5000">
+        <AlternativeMPD uri="https://media.axprod.net/TestVectors/v7-Clear/Manifest_1080p.mpd"
+          earliestResolutionTimeOffset="5000" mode="replace" returnOffset="0" />
+      </Event>
+    </EventStream>
+    <AdaptationSet lang="en" contentType="audio" segmentAlignment="true" mimeType="audio/mp4"
+      startWithSAP="1">
+      <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main" />
+      <SegmentTemplate media="$RepresentationID$/$Number$.m4s"
+        initialization="$RepresentationID$/init.mp4" duration="2" startNumber="0" />
+      <Representation id="A48" bandwidth="48000" audioSamplingRate="48000" codecs="mp4a.40.2">
+        <AudioChannelConfiguration
+          schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2" />
+      </Representation>
+    </AdaptationSet>
+    <AdaptationSet contentType="video" par="16:9" minWidth="640" maxWidth="640" minHeight="360"
+      maxHeight="360" maxFrameRate="60/2" segmentAlignment="true" mimeType="video/mp4"
+      startWithSAP="1">
+      <InbandEventStream schemeIdUri="urn:scte:scte35:2013:bin" />
+      <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main" />
+      <SegmentTemplate media="$RepresentationID$/$Number$.m4s"
+        initialization="$RepresentationID$/init.mp4" duration="2" startNumber="0" />
+      <Representation id="V300" bandwidth="300000" width="640" height="360" sar="1:1"
+        frameRate="60/2" codecs="avc1.64001e" />
+    </AdaptationSet>
+  </Period>
+  <UTCTiming schemeIdUri="urn:mpeg:dash:utc:http-xsdate:2014"
+    value="https://time.akamai.com/?iso&amp;ms" />
+</MPD>