Watch Party poc build

samples/develop.html

@@ -43,15 +43,69 @@
             }
         </style>
         <script>
+             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 */
             document.addEventListener("DOMContentLoaded", function () {
               var video,
                 player,
-                url = 'http://localhost:3030/manifest.mpd?alt=https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/TestAssets/MediaOfflineErrorAsset/stream.mpd|10000|10000|2000|insert|0&alt=https://media.axprod.net/TestVectors/v7-Clear/Manifest_1080p.mpd|40000|13000|5000|replace|5000&alt=https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/TestAssets/MediaOfflineErrorAsset/stream.mpd|80000|10000|2000|replace|0'
-
+                // url = "https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/ListMPDs/case1.mpd";
+                // url = 'https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/ListMPDs/bbb_mpd_list.mpd'
+                // url = "http://localhost:3000/manifest.mpd"
+                url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
 
               video = document.querySelector("video");
               player = dashjs.MediaPlayer().create();
-
+              player.updateSettings({
+                streaming: {
+                    cmcd: {
+                        enabled: true, /* global enable reporting of cmcd parameters */
+                        version: 2, /* 1 is the default version */
+                        reporting: {
+                            requestMode: {
+                                enabled: false, /* enable cmcdv2 request mode */
+                                mode: CMCD_MODE_QUERY, /* overrides global mode */
+                            },
+                            responseMode: {
+                                enabled: false, /* 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://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: ['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://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, /* 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.addRequestInterceptor((request) => {
+                const { filteredCmcdData } = request;
+                if (filteredCmcdData) {
+                    filteredCmcdData['custom-sample'] = 'testKey';
+                    console.log('request interceptor', request);
+                }
+                return Promise.resolve(request);
+              });
+
+              player.addResponseInterceptor((response) => {
+                if (response.cmcdMode === 'event') {
+                    console.log('response interceptor', response);
+                }
+                return Promise.resolve(response);
+              })
               player.initialize(video, url, true);
             });
           </script>

samples/players-synchronization/followerClient.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Follower client</title>
+
+    <script src="../../dist/dash.all.debug.js"></script>
+    <script src="./playerSynchronizationPlugin.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;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <div class="container py-4">
+            <header class="pb-3 mb-4 border-bottom">
+                <h1>Follower client</h1>
+            </header>
+            <div class="row">
+                <div>
+                    <div class="input-group mb-2">
+                        <button id="load-button" type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">Load</button>
+                        <select id="url-select" class="dropdown-toggle">
+                            <option value="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd">Big Buck Bunny
+                            </option>
+                            <option
+                                value="https://livesim.dashif.org/livesim2/WAVE/vectors/cfhd_sets/12.5_25_50/t1/2022-10-17/stream.mpd">
+                                Live Sim</option>
+                            <option value="https://cmafref.akamaized.net/cmaf/live-ull/2006350/akambr/out.mpd">CMAF Live
+                            </option>
+                        </select>
+                        <input id="custom-url" type="text" class="form-control" placeholder="Paste your own DASH manifest URL here" style="max-width: 350px; margin-left: 8px;">
+                    </div>
+                    <video controls="true"></video>
+                </div>
+            </div>
+            <footer class="pt-3 mt-4 text-muted border-top">
+                &copy; DASH-IF
+            </footer>
+        </div>
+    </main>
+    <style>
+        .hide-controls::-webkit-media-controls {
+            display: none !important;
+        }
+
+        .hide-controls::-moz-media-controls {
+            display: none !important;
+        }
+
+        .hide-controls::-ms-media-controls {
+            display: none !important;
+        }
+    </style>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            var video,
+                player
+
+            video = document.querySelector("video");
+            player = dashjs.MediaPlayer().create();
+
+            player.initialize(video, '', true);
+            playerSynchronization.addFollower(player, {
+                leaderId: 'leader-sid',
+                url: 'https://phsqtxt809.execute-api.us-east-2.amazonaws.com/event-mode',
+                id: 'follower-sid',
+                frameDelay: 1,
+                seekTreshold: 0.4,
+                catchUpRate: 2,
+                syncInterval: 5000
+            });
+
+            const loadButton = document.getElementById('load-button');
+            const urlSelect = document.getElementById('url-select');
+            const customUrl = document.getElementById('custom-url');
+
+            loadButton.addEventListener('click', () => {
+                const enteredUrl = customUrl.value.trim();
+                const selectedUrl = urlSelect.value;
+                player.attachSource(enteredUrl !== '' ? enteredUrl : selectedUrl);
+            });
+        });
+    </script>
+</body>
+
+</html>

samples/players-synchronization/globalSync.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Follower client</title>
+
+    <script src="../../dist/dash.all.debug.js"></script>
+    <script src="./playerSynchronizationPlugin.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;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <div class="container py-4">
+            <header class="pb-3 mb-4 border-bottom">
+                <h1>Follower client</h1>
+            </header>
+            <div class="row">
+                <div>
+                    <div class="input-group mb-2">
+                        <button id="load-button" type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">Load</button>
+                        <select id="url-select" class="dropdown-toggle">
+                            <option value="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd">Big Buck Bunny
+                            </option>
+                            <option
+                                value="https://livesim.dashif.org/livesim2/WAVE/vectors/cfhd_sets/12.5_25_50/t1/2022-10-17/stream.mpd">
+                                Live Sim</option>
+                            <option value="https://cmafref.akamaized.net/cmaf/live-ull/2006350/akambr/out.mpd">CMAF Live
+                            </option>
+                        </select>
+                        <input id="custom-url" type="text" class="form-control" placeholder="Paste your own DASH manifest URL here" style="max-width: 350px; margin-left: 8px;">
+                    </div>
+                    <video controls="true"></video>
+                </div>
+            </div>
+            <footer class="pt-3 mt-4 text-muted border-top">
+                &copy; DASH-IF
+            </footer>
+        </div>
+    </main>
+    <style>
+        .hide-controls::-webkit-media-controls {
+            display: none !important;
+        }
+
+        .hide-controls::-moz-media-controls {
+            display: none !important;
+        }
+
+        .hide-controls::-ms-media-controls {
+            display: none !important;
+        }
+    </style>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            var video,
+                player
+
+            video = document.querySelector("video");
+            player = dashjs.MediaPlayer().create();
+
+            player.initialize(video, '', true);
+            playerSynchronization.addFollower(player, {
+                globalSync: true,
+                url: 'http://localhost:3000/',
+                frameDelay: 1,
+                seekTreshold: 0.4,
+                catchUpRate: 2,
+                syncInterval: 5000
+            });
+
+            const loadButton = document.getElementById('load-button');
+            const urlSelect = document.getElementById('url-select');
+            const customUrl = document.getElementById('custom-url');
+
+            loadButton.addEventListener('click', () => {
+                const enteredUrl = customUrl.value.trim();
+                const selectedUrl = urlSelect.value;
+                player.attachSource(enteredUrl !== '' ? enteredUrl : selectedUrl);
+            });
+        });
+    </script>
+</body>
+
+</html>

samples/players-synchronization/leaderClient.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Leader client</title>
+
+    <script src="../../dist/dash.all.debug.js"></script>
+    <script src="./playerSynchronizationPlugin.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;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <div class="container py-4">
+            <header class="pb-3 mb-4 border-bottom">
+                <h1>Leader client</h1>
+            </header>
+            <div class="row">
+                <div>
+                    <div class="input-group mb-2">
+                        <button id="load-button" type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">Load</button>
+                        <select id="url-select" class="dropdown-toggle">
+                            <option value="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd">Big Buck Bunny
+                            </option>
+                            <option
+                                value="https://livesim.dashif.org/livesim2/WAVE/vectors/cfhd_sets/12.5_25_50/t1/2022-10-17/stream.mpd">
+                                Live Sim</option>
+                            <option value="https://cmafref.akamaized.net/cmaf/live-ull/2006350/akambr/out.mpd">CMAF Live
+                            </option>
+                        </select>
+                        <input id="custom-url" type="text" class="form-control" placeholder="Paste your own DASH manifest URL here" style="max-width: 350px; margin-left: 8px;">
+                    </div>
+                    <video controls="true"></video>
+                </div>
+            </div>
+            <footer class="pt-3 mt-4 text-muted border-top">
+                &copy; DASH-IF
+            </footer>
+        </div>
+    </main>
+    <style>
+        .hide-controls::-webkit-media-controls {
+            display: none !important;
+        }
+
+        .hide-controls::-moz-media-controls {
+            display: none !important;
+        }
+
+        .hide-controls::-ms-media-controls {
+            display: none !important;
+        }
+    </style>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            var video,
+                player;
+
+            video = document.querySelector("video");
+            player = dashjs.MediaPlayer().create();
+
+            player.initialize(video, '', true);
+            playerSynchronization.addLeader(player, {
+                url: 'https://phsqtxt809.execute-api.us-east-2.amazonaws.com/event-mode',
+                id: 'leader-sid'
+            });
+
+            const loadButton = document.getElementById('load-button');
+            const urlSelect = document.getElementById('url-select');
+            const customUrl = document.getElementById('custom-url');
+
+            loadButton.addEventListener('click', () => {
+                const enteredUrl = customUrl.value.trim();
+                const selectedUrl = urlSelect.value;
+                player.attachSource(enteredUrl !== '' ? enteredUrl : selectedUrl);
+            });
+        });
+    </script>
+</body>
+
+</html>