├── .env.example
├── .github
    └── workflows
    │   └── prod.yml
├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── docker-compose.yml
├── eslint.config.mjs
├── hls.js
    ├── README.md
    ├── adCreativeSignalingPlugin.js
    └── videoClicksPlugin.js
├── infra
    ├── .terraform.lock.hcl
    ├── backend.tf
    ├── data.tf
    ├── iam_role.tf
    ├── load_balancer.tf
    ├── main.tf
    ├── network.tf
    ├── security_groups.tf
    ├── tfvars
    │   ├── dev.tfvars
    │   └── prod.tfvars
    ├── users.tf
    └── variables.tf
├── package-lock.json
├── package.json
├── public
    ├── README.md
    ├── dash.js
    │   ├── dash.all.min.js
    │   └── dash.all.min.js.map
    ├── hls.js
    │   ├── adCreativeSignalingPlugin.js
    │   ├── hls.js
    │   ├── hls.js.map
    │   └── videoClicksPlugin.js
    ├── index.html
    ├── logo.svg
    ├── samples
    │   ├── asset-list-1
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   └── video
    │   │   │   ├── 250kbit.m3u8
    │   │   │   ├── 500kbit.m3u8
    │   │   │   └── 800kbit.m3u8
    │   ├── asset-list-2
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   └── video
    │   │   │   ├── 250kbit.m3u8
    │   │   │   ├── 500kbit.m3u8
    │   │   │   └── 800kbit.m3u8
    │   ├── dash-alt-mpd
    │   │   ├── index.html
    │   │   ├── live-alternative-ads.mpd
    │   │   └── vast-sample.xml
    │   ├── sample-ad-click
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-ad-signaling
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-api-jwt
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   ├── 250kbit.m3u8
    │   │   │   ├── 500kbit.m3u8
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-api-vastid-live
    │   │   ├── index.html
    │   │   └── vast-sample.xml
    │   ├── sample-api-vastid-live2
    │   │   ├── index.html
    │   │   └── vast-sample.xml
    │   ├── sample-api-vastid-live3
    │   │   ├── index.html
    │   │   └── vast-sample.xml
    │   ├── sample-api-vastid-live4
    │   │   ├── index.html
    │   │   └── vast-sample.xml
    │   ├── sample-api-vastid
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   ├── 250kbit.m3u8
    │   │   │   ├── 500kbit.m3u8
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-api-vasturl
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   ├── 250kbit.m3u8
    │   │   │   ├── 500kbit.m3u8
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-edit-vast
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-vast-1
    │   │   ├── audio
    │   │   │   └── stereo
    │   │   │   │   ├── en
    │   │   │   │       └── 128kbit.m3u8
    │   │   │   │   └── none
    │   │   │   │       └── 128kbit.m3u8
    │   │   ├── index.html
    │   │   ├── main.m3u8
    │   │   ├── vast-sample.xml
    │   │   └── video
    │   │   │   ├── 250kbit.m3u8
    │   │   │   ├── 500kbit.m3u8
    │   │   │   └── 800kbit.m3u8
    │   ├── sample-vast-set
    │   │   ├── vast_01_15s.xml
    │   │   ├── vast_02_30s.xml
    │   │   ├── vast_03_30s.xml
    │   │   ├── vast_04_15s.xml
    │   │   ├── vast_05_15s.xml
    │   │   ├── vast_06-7_30s.xml
    │   │   ├── vast_08_15s.xml
    │   │   └── vast_09_15s.xml
    │   └── wse_api.js
    └── wse.png
└── src
    ├── config
        └── vast-mapping.js
    ├── middlewares
        ├── params.js
        ├── vast-id.js
        └── whitelist.js
    ├── routes
        ├── api.js
        └── samples.js
    ├── server.js
    ├── trackingEvents
        └── tracking-events.js
    └── utils
        ├── jwt.js
        ├── list-mpd-generator.js
        ├── logger.js
        ├── replace-queryparams.js
        └── vast-parser.js


/.env.example:
--------------------------------------------------------------------------------
 1 | # Create a new secret key using: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
 2 | JWT_SECRET_KEY='251450bcd828e761eca58b28a4e15e9aa8fdc7e42579e8f9492303d0bbd10b21'
 3 | JWT_BYPASS_VALIDATION='false'
 4 | JWT_EXPIRES_IN='10y'
 5 | API_DISABLE_SIGN='false'
 6 | PINO_LOG_LEVEL='debug'
 7 | PORT='3000'
 8 | VAST_WHITELIST='www.vast1.com,www.vast2.com,localhost'
 9 | ORIGIN_WHITELIST=''
10 | VAST_MAPPING_JSON={"1" : "http://localhost:3000/samples/sample-vast-1/vast-sample.xml","2" : "https://www.vast2.com","3" : "https://www.vast3.com"}


--------------------------------------------------------------------------------
/.github/workflows/prod.yml:
--------------------------------------------------------------------------------
 1 | name: "[PROD] Build and Deploy"
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - 'main'
 6 | 
 7 | jobs:
 8 |   build:
 9 |     name: "Build and deploy"
10 |     runs-on: ubuntu-latest
11 |     environment: main
12 |     steps:
13 |       - name: Checkout
14 |         uses: actions/checkout@v4
15 |       
16 |       - name: Configure AWS Credentials
17 |         uses: aws-actions/configure-aws-credentials@v4
18 |         with:
19 |           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
20 |           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
21 |           aws-region: us-east-1
22 |       
23 |       - name: Login to Amazon ECR
24 |         id: login-ecr
25 |         uses: aws-actions/amazon-ecr-login@v2
26 |       
27 |       - name: Build, tag, and push docker image to Amazon ECR
28 |         id: build-image
29 |         env:
30 |           ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
31 |           ECR_REPOSITORY: vast2sgai-backend-prod
32 |           IMAGE_TAG: latest
33 |         run: |
34 |           docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
35 |           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
36 |           echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"
37 | 
38 |       - name: Download task definition
39 |         run: |
40 |           aws ecs describe-task-definition --task-definition vast2sgai-backend-prod --query taskDefinition > task-definition.json
41 | 
42 |       - name: Fill in the new image ID in the Amazon ECS task definition
43 |         id: task-def
44 |         uses: aws-actions/amazon-ecs-render-task-definition@v1
45 |         with:
46 |           task-definition: task-definition.json
47 |           container-name: vast2sgai-backend-prod
48 |           image: ${{ steps.build-image.outputs.image }}
49 | 
50 |       - name: Deploy Amazon ECS task definition
51 |         id: ecs-deploy
52 |         uses: aws-actions/amazon-ecs-deploy-task-definition@v2
53 |         with:
54 |           task-definition: ${{ steps.task-def.outputs.task-definition }}
55 |           service: vast2sgai-backend-prod
56 |           cluster: vast2sgai-prod
57 |           wait-for-service-stability: true
58 |           wait-for-minutes: 10


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # MacOS
 2 | .DS_Store
 3 | 
 4 | # VSCode custom workspace settings
 5 | .vscode/settings.json
 6 | 
 7 | # Build output
 8 | dist
 9 | 
10 | # npm
11 | node_modules/*
12 | 
13 | .env
14 | 
15 | infra/.terraform/*


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # Use a lightweight Node.js image
 2 | FROM node:20
 3 | 
 4 | # Install system dependencies for canvas
 5 | RUN apt-get update && apt-get install -y \
 6 |     libcairo2-dev \
 7 |     libpango1.0-dev \
 8 |     libjpeg-dev \
 9 |     libgif-dev \
10 |     librsvg2-dev
11 | 
12 | # Set working directory inside the container
13 | WORKDIR /usr/src/app
14 | 
15 | # Copy only the package.json and package-lock.json to optimize caching
16 | COPY package*.json ./
17 | 
18 | # Install production dependencies only
19 | RUN npm install
20 | 
21 | # Copy the rest of the application code
22 | COPY . .
23 | 
24 | # Expose the application's port
25 | EXPOSE 3000
26 | 
27 | # Start the application
28 | CMD ["npm", "start"]


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VAST-2-SGAI
 2 | 
 3 | ## Overview
 4 | 
 5 | ### Introduction
 6 | This is a project developed in the context of the **Montevideo TECH Summer Camp 2025**! During the Summer Camp, this project aims to create value for the video community while participants learn and share knowledge, fostering collaborative growth and making a positive impact together on the video community.
 7 | 
 8 | ### Project Goal
 9 | This project aims to create an open-source tool that converts VAST XML files into HLS interstitial AssetLists, supporting Server-Guided Ad Insertion (SGAI) without requiring Server-Side Ad Insertion (SSAI) providers. 
10 | 
11 | ### Project Duration
12 | **Start Date:** November 11  
13 | **End Date:** January 31  
14 | 
15 | 
16 | ## How to run
17 | 1. Start the project
18 | 
19 |     With Node:
20 |     ```
21 |     npm install
22 |     npm run dev
23 |     ```
24 |     or  Docker Compose
25 |     ```
26 |     docker compose up
27 |     ```
28 | 2. Open a browser in `http://localhost:3000` to try the examples
29 | 
30 | ## Communication Channels
31 | 
32 | - **[video-dev.org](https://video-dev.org)**: Join us on the `#montevideo-summerprojects` channel to discuss the project, share updates, and collaborate.
33 | - **GitHub Repository**: Follow and contribute at [montevideo-tech/vast-2-sgai](https://github.com/montevideo-tech/vast-2-sgai).
34 | 
35 | ## Methodology
36 | 
37 | We follow a collaborative, issue-driven development approach with regular meetings to discuss ongoing work and new developments.
38 | 
39 | ### Issues
40 | All topics related to development and design are logged and tracked via GitHub Issues at [Issues Page](https://github.com/montevideo-tech/vast-2-sgai/issues).
41 | 
42 | 1. **Creating Issues**: Participants can create and report issues covering development topics, feature requests, bugs, or any other relevant discussion points.
43 | 2. **Tagging for Discussion**: Issues tagged with `next meeting` will be discussed in the upcoming meeting. Participants should ideally review and comment on these issues beforehand.
44 | 
45 | ### Weekly Meetings
46 | 
47 | _meetigns MAY vary, please follow the discussions in [video-dev.org](https://video-dev.org) `#montevideo-summerprojects` channel_
48 | 
49 | - **Frequency**: Every Thursday  
50 | - **Time**: 9 a.m. PST (12 p.m. EST)
51 | - **Link**: https://meet.google.com/crh-zrtc-guz
52 | 
53 | During each meeting:
54 | 1. **Discussion on Tagged Issues**: We’ll focus on issues tagged `next meeting`, aiming to resolve roadblocks and outline actionable steps.
55 | 2. **Preparation**: We encourage each participant to review and comment on tagged issues ahead of time, ensuring an efficient and informed discussion.
56 | 
57 | ## Documentation
58 | 
59 | **Digital Whiteboard**: A visual tool used during meetings to support discussions can be accessed [here](https://drive.google.com/file/d/1MPodWl1R3DhgWXG54HC3dLo7qD7aTzZT/view?usp=sharing).
60 | 
61 | ---
62 | 
63 | Feel free to reach out via GitHub or on [video-dev.org](https://video-dev.org) `#montevideo-summerprojects` to get started, contribute, or ask questions. Let's make this tool a valuable resource for the video community!
64 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "3.9"
 2 | 
 3 | services:
 4 |   vast-2-sgai:
 5 |     build: .
 6 |     working_dir: /usr/src/app
 7 |     volumes:
 8 |       - .:/usr/src/app # Mount the current directory to the container
 9 |       - /usr/src/app/node_modules # Avoid mounting the node_modules locally
10 |     ports:
11 |       - "3000:3000"
12 |     command: >
13 |       sh -c "npm install && npm run dev"
14 |     environment:
15 |       NODE_ENV: development 
16 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   {
 3 |     files: ["src/**/*.js"],
 4 |     languageOptions: {
 5 |       ecmaVersion: 2021,
 6 |       sourceType: "module",
 7 |       globals: {
 8 |         process: "readonly",
 9 |         __dirname: "readonly",
10 |         require: "readonly",
11 |         module: "readonly",
12 |         exports: "readonly"
13 |       }
14 |     },
15 |     rules: {
16 |       "semi": ["error", "always"],
17 |       "quotes": ["error", "double"],
18 |       "indent": ["warn", 2],
19 |       "no-unused-vars": ["warn"],
20 |       "no-console": "off" 
21 |     }
22 |   }
23 | ];
24 | 


--------------------------------------------------------------------------------
/hls.js/README.md:
--------------------------------------------------------------------------------
 1 | # Ad Creative Signaling Plugin
 2 | 
 3 | The **Ad Creative Signaling Plugin** is designed to read and execute tracking events embedded in the `X-AD-CREATIVE-SIGNALING` tag, as specified in the `X-ASSET-LIST`.
 4 | 
 5 | ## Features
 6 | - Automatically handles tracking events for creative signals.
 7 | - Seamlessly integrates with the `hls` global object.
 8 | 
 9 | ## Getting Started
10 | 
11 | ### Prerequisites
12 | Ensure you have the `hls` object initialized in your project before using this plugin.
13 | 
14 | ### Installation
15 | Include the script for the Ad Creative Signaling Plugin in your project.
16 | 
17 | ```html
18 | <script src="https://cdn.jsdelivr.net/gh/montevideo-tech/vast-2-sgai/hls.js/adCreativeSignalingPlugin.js"></script>
19 | ```
20 | 
21 | ### Usage
22 | To initialize the plugin, simply pass the global hls object to the AdSignalingManager.
23 | 
24 | ```html
25 | <script>
26 |   const adSignalingManager = new AdSignalingManager(hls);
27 | </script>
28 | ```
29 | 
30 | ### How It Works
31 | Once initialized, the plugin automatically processes the requests defined for each creative signal, ensuring that tracking events are executed as specified in the X-AD-CREATIVE-SIGNALING tag.


--------------------------------------------------------------------------------
/hls.js/adCreativeSignalingPlugin.js:
--------------------------------------------------------------------------------
 1 | const SUPPORTED_TRACKING_EVENTS = ["start", "firstQuartile", "midpoint", "thirdQuartile", "complete", "progress", "impression"];
 2 | 
 3 | class AdSignalingManager {
 4 |   constructor(hls) {
 5 |     console.log("Initializing AdSignalingManager");
 6 |     this.hls = hls;
 7 |     this.interstitialsController = hls.interstitialsController;
 8 |     this.trackingEventsQueue = [];
 9 | 
10 |     hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, async (_, data) => {
11 |       this.assetPlayer = data.player;
12 | 
13 |       this.assetPlayer.hls.on(Hls.Events.MEDIA_ENDED, this.checkAdCreativeSignaling);
14 |       this.signalInterval = self.setInterval(this.checkAdCreativeSignaling, 500);
15 | 
16 |       const { assetListIndex } = data;
17 |       const assetListResponse = data.event.assetListResponse;
18 |       const asset = assetListResponse.ASSETS?.[assetListIndex];
19 |       const creativeSignaling = asset?.["X-AD-CREATIVE-SIGNALING"];
20 |       const trackingEvents = creativeSignaling?.payload?.[0]?.tracking ?? [];
21 |       this.trackingEventsQueue = trackingEvents;
22 |     });
23 | 
24 |     hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, async (_, data) => {
25 |       this.cleanup();
26 |     });
27 |   }
28 | 
29 |   cleanup = () => {
30 |     console.log(this.trackingEventsQueue)
31 |     this.trackingEventsQueue = []
32 |     this.assetPlayer = null;
33 |     clearInterval(this.signalInterval);
34 |   };
35 | 
36 |   checkAdCreativeSignaling = () => {
37 |     if (!this.trackingEventsQueue) return;
38 | 
39 |     const currentTime = this.assetPlayer.currentTime;
40 | 
41 |     this.trackingEventsQueue.forEach((event, index) => {
42 |       if (SUPPORTED_TRACKING_EVENTS.includes(event.type)) {
43 |         const tolerance = 0.75; // time difference tolerance in seconds
44 |         if (
45 |           (event?.offset === undefined || (Math.abs(currentTime - event.offset) <= tolerance))
46 |         ) {
47 |           Promise.all(event.urls.map((url) => this.sendTrackingEvent(url)));
48 |           this.trackingEventsQueue.splice(index, 1);
49 |         }
50 |       }
51 |     });
52 |   };
53 | 
54 |   sendTrackingEvent = async (url) => {
55 |     try {
56 |       const response = await fetch(url);
57 |       if (!response.ok) {
58 |         this.hls?.logger.error(
59 |           `Error on Ad Creative Signaling event tracking request ${url}: ${response.status}`
60 |         );
61 |       }
62 |     } catch (error) {
63 |       this.hls?.logger.error(
64 |         `Error on Ad Creative Signaling event tracking request ${url}:`,
65 |         error
66 |       );
67 |     }
68 |   };
69 | 
70 |   destroy() {
71 |     this.cleanup();
72 |     this.hls = this.interstitialsController = null;
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/hls.js/videoClicksPlugin.js:
--------------------------------------------------------------------------------
  1 | class VideoClicksPlugin {
  2 |   constructor(hls, options) {
  3 |     if (!hls || typeof hls.on !== "function") {
  4 |       throw new Error("Invalid HLS.js instance passed to the plugin.");
  5 |     }
  6 | 
  7 |     this.hls = hls;
  8 |     this.options = options || {};
  9 |     this.container = options.container || document.body;
 10 |     this.clickEventUrl = options.clickEventUrl || null;
 11 |     this.assetList = { ASSETS: [] };
 12 |     this.currentAdIndex = 0;
 13 |     this.isAdPlaying = false;
 14 |     this.adVignette = null;
 15 | 
 16 |     this.container.style.position = "relative";
 17 | 
 18 |     this.init();
 19 |   }
 20 | 
 21 |   init() {
 22 |     this.hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (_, data) => {
 23 |       const { assetListIndex } = data;
 24 |       const assetListResponse = data.event?.assetListResponse;
 25 |       if (!assetListResponse || !assetListResponse.ASSETS?.length) {
 26 |         return;
 27 |       }
 28 | 
 29 |       this.assetList = assetListResponse;
 30 |       this.currentAdIndex = assetListIndex;
 31 | 
 32 |       this.loadAdAssets();
 33 |     });
 34 | 
 35 |     this.hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, () => {
 36 |       if (this.adVignette && this.container.contains(this.adVignette)) {
 37 |         this.container.removeChild(this.adVignette);
 38 |       }
 39 |       this.isAdPlaying = false;
 40 |     });
 41 | 
 42 |     this.hls.on(Hls.Events.INTERSTITIAL_ENDED, () => {
 43 |       this.cleanupAd();
 44 |     });
 45 |   }
 46 | 
 47 |   loadAdAssets() {
 48 |     if (this.assetList.ASSETS.length === 0) {
 49 |       return;
 50 |     }
 51 | 
 52 |     this.showAd(this.assetList.ASSETS[this.currentAdIndex]);
 53 |   }
 54 | 
 55 |   showAd(ad) {
 56 |     if (this.isAdPlaying) return;
 57 | 
 58 |     const { DURATION, "X-VAST2SGAI-VIDEOCLICKS": videoClicks } = ad;
 59 | 
 60 |     if (!videoClicks || !videoClicks.clickThrough?.url) {
 61 |       this.loadNextAd();
 62 |       return;
 63 |     }
 64 | 
 65 |     this.isAdPlaying = true;
 66 |     this.adVignette = this.createAdOverlay(this.container, videoClicks);
 67 |     this.container.appendChild(this.adVignette);
 68 | 
 69 |     setTimeout(() => {
 70 |       if (this.container.contains(this.adVignette)) {
 71 |         this.container.removeChild(this.adVignette);
 72 |       }
 73 |       this.loadNextAd();
 74 |     }, DURATION * 1000);
 75 |   }
 76 | 
 77 |   createAdOverlay(videoContainer, videoClicks) {
 78 |     const clickThroughUrl = videoClicks.clickThrough.url;
 79 |     const clickTracking = videoClicks.clickTracking || [];
 80 |     const videoElement = videoContainer.querySelector("video");
 81 |     if (!videoElement) {
 82 |       return;
 83 |     }
 84 | 
 85 |     videoContainer.style.position = "relative";
 86 | 
 87 |     const adVignette = document.createElement("div");
 88 |     adVignette.style.position = "absolute"; 
 89 |     adVignette.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
 90 |     adVignette.style.color = "#fff";
 91 |     adVignette.style.borderRadius = "12px";
 92 |     adVignette.style.padding = "8px 12px";
 93 |     adVignette.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.4)";
 94 |     adVignette.style.fontFamily = "Arial, sans-serif";
 95 |     adVignette.style.fontSize = "12px";
 96 |     adVignette.style.zIndex = "10"; 
 97 |     adVignette.style.cursor = "pointer";
 98 |     adVignette.style.pointerEvents = "auto";
 99 |     adVignette.style.display = "inline-flex";
100 |     adVignette.style.alignItems = "center";
101 |     adVignette.style.minWidth = "150px";
102 |     adVignette.style.justifyContent = "space-between";
103 | 
104 |     const updateVignettePosition = () => {
105 |       const videoRect = videoElement.getBoundingClientRect();
106 |       adVignette.style.top = "10px"; 
107 |       adVignette.style.left = `${videoRect.width - 200}px`; 
108 |     };
109 | 
110 |     updateVignettePosition();
111 |     window.addEventListener("resize", updateVignettePosition);
112 | 
113 |     adVignette.onclick = () => {
114 |       this.sendAdClickEvent(clickTracking);
115 |       window.open(clickThroughUrl, "_blank");
116 |     };
117 | 
118 |     const adText = document.createElement("span");
119 |     adText.textContent = new URL(clickThroughUrl).hostname + "...";
120 |     adText.style.marginRight = "8px";
121 | 
122 |     const closeButton = document.createElement("button");
123 |     closeButton.textContent = "✖";
124 |     closeButton.style.backgroundColor = "transparent";
125 |     closeButton.style.border = "none";
126 |     closeButton.style.color = "#fff";
127 |     closeButton.style.fontSize = "12px";
128 |     closeButton.style.cursor = "pointer";
129 |     closeButton.style.marginLeft = "5px";
130 |     closeButton.onclick = (event) => {
131 |       event.stopPropagation();
132 |       adVignette.style.opacity = "0";
133 |       setTimeout(() => adVignette.remove(), 300);
134 |       window.removeEventListener("resize", updateVignettePosition);
135 |     };
136 | 
137 |     adVignette.appendChild(adText);
138 |     adVignette.appendChild(closeButton);
139 |     videoContainer.appendChild(adVignette);
140 | 
141 |     return adVignette;
142 |   }
143 | 
144 |   cleanupAd() {
145 |     const overlays = this.container.querySelectorAll("div");
146 |     overlays.forEach((overlay) => {
147 |       if (overlay.onclick) {
148 |         this.container.removeChild(overlay);
149 |       }
150 |     });
151 |   }
152 | 
153 |   loadNextAd() {
154 |     this.currentAdIndex++;
155 |     if (this.currentAdIndex < this.assetList.ASSETS.length) {
156 |       this.showAd(this.assetList.ASSETS[this.currentAdIndex]);
157 |     } else {
158 |       this.isAdPlaying = false;
159 |     }
160 |   }
161 | 
162 |   sendAdClickEvent(clickTracking) {
163 |     clickTracking.forEach((tracking) => {
164 |       fetch(tracking.url, { method: "GET" }).catch(() => {});
165 |     });
166 |   }
167 | }
168 | 


--------------------------------------------------------------------------------
/infra/.terraform.lock.hcl:
--------------------------------------------------------------------------------
 1 | # This file is maintained automatically by "terraform init".
 2 | # Manual edits may be lost in future updates.
 3 | 
 4 | provider "registry.terraform.io/hashicorp/aws" {
 5 |   version     = "4.55.0"
 6 |   constraints = ">= 3.73.0, 4.55.0"
 7 |   hashes = [
 8 |     "h1:vSVjfh4GIrca2Z3YPjWMaac5hOEBc1U3xOOwFmo7HZc=",
 9 |     "zh:0866f25575bad3b9c313cd778c94fc65e79d335af2d20a3480f79d7731d93b7b",
10 |     "zh:2c05c16155cbc054622cf83e4b6614fef35935b00b238e4c21ee225e6c896770",
11 |     "zh:2efba66649fb12af0492c6cce4e2361fe9139df648734264f61a9a1ef754df53",
12 |     "zh:3c60bb53e3b65d7f86699fae0797a55a9aa41b8ba377aaff4daf23d1661393a9",
13 |     "zh:41f6dcd90b54b623d523df8fb4a30779cfe22e9ab59516bc05b29291a7af0946",
14 |     "zh:4b8330b154e9e2d035dd5488abcac25efec1fa6055d3a70894a8c0384f0579d6",
15 |     "zh:595f263706cf1fb6b8447e2ec343638de4360841a15e6bff6ccbb0ff86c7ce74",
16 |     "zh:5dfc5b858a43cf45fde5542eb673f6104c14cdc3d73843d1b87a9e44545cbad4",
17 |     "zh:7bbe05cf30521f0110603bb84995a4025ce7810626010276600e4b402143df27",
18 |     "zh:9b12af85486a96aedd8d7984b0ff811a4b42e3d88dad1a3fb4c0b580d04fa425",
19 |     "zh:a490e68c63504d3301d6dcb700c95778d93bb2baa6632a46c5a1d62862a7067c",
20 |     "zh:c4f9f6659148528375c8a822163925c9aae490ccce2e6301cefbbab009531971",
21 |     "zh:ef66070f957408f1c924ddfd5dbd0d34bce16efd9e36ccecbf699de72beb131f",
22 |     "zh:f7ba5e3e62a2b51b24e326797a89fdd86bafaea7d1912738d514c9903c14d7f2",
23 |     "zh:ffc20b7d9f7bd331fb6451d0fc92c68196383d7115e69380de6566cc268cb9b9",
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/infra/backend.tf:
--------------------------------------------------------------------------------
  1 | ## ECS
  2 | ### Cluster
  3 | resource "aws_ecs_cluster" "microservices" {
  4 |   name = "${local.app_name}-${terraform.workspace}"
  5 |   setting {
  6 |     name  = "containerInsights"
  7 |     value = "enabled"
  8 |   }
  9 | }
 10 | 
 11 | locals {
 12 |   port = 3000
 13 | }
 14 | 
 15 | resource "aws_ecr_repository" "backend" {
 16 |   name                 = "${local.app_name}-backend-${terraform.workspace}"
 17 |   image_tag_mutability = "MUTABLE"
 18 | 
 19 |   image_scanning_configuration {
 20 |     scan_on_push = true
 21 |   }
 22 | }
 23 | 
 24 | resource "aws_lb_target_group" "backend" {
 25 |   name        = "${local.app_name}-backend-${terraform.workspace}"
 26 |   port        = local.port
 27 |   protocol    = "HTTP"
 28 |   target_type = "ip"
 29 |   deregistration_delay = 60
 30 |   health_check {
 31 |     path = "/"
 32 |   }
 33 |   vpc_id      = module.vpc.vpc_id
 34 |   depends_on = [
 35 |     aws_lb.microservices_alb
 36 |   ]
 37 | }
 38 | 
 39 | resource "aws_cloudwatch_log_group" "backend" {
 40 |   name = "${local.app_name}-backend-${terraform.workspace}"
 41 |   retention_in_days = 1
 42 | }
 43 | 
 44 | resource "aws_ecs_task_definition" "backend" {
 45 |   family                   = "${local.app_name}-backend-${terraform.workspace}"
 46 |   requires_compatibilities = ["FARGATE"]
 47 |   network_mode             = "awsvpc"
 48 |   cpu                      = 512
 49 |   memory                   = 1024
 50 |   execution_role_arn       = aws_iam_role.ECSTaskExecutionRole.arn
 51 |   task_role_arn            = aws_iam_role.ECSTaskRole.arn
 52 |   container_definitions    = <<TASK_DEFINITION
 53 | [
 54 |   {
 55 |     "name": "${local.app_name}-backend-${terraform.workspace}",
 56 |     "image": "${aws_ecr_repository.backend.repository_url}",
 57 |     "essential": true,
 58 |     "environment": [
 59 |       {"name": "NODE_ENV", "value": "${terraform.workspace}"},
 60 |       {"name": "VAST_MAPPING_JSON", "value": "{\"1\" : \"http://localhost:3000/samples/sample-vast-set/vast_01_15s.xml\",\"2\" : \"http://localhost:3000/samples/sample-vast-set/vast_02_30s.xml\",\"3\" : \"http://localhost:3000/samples/sample-vast-set/vast_03_30s.xml\",\"4\" : \"http://localhost:3000/samples/sample-vast-set/vast_04_15s.xml\",\"5\" : \"http://localhost:3000/samples/sample-vast-set/vast_05_15s.xml\",\"6\" : \"http://localhost:3000/samples/sample-vast-set/vast_06-7_30s.xml\",\"7\" : \"http://localhost:3000/samples/sample-vast-set/vast_06-7_30s.xml\",\"8\" : \"http://localhost:3000/samples/sample-vast-set/vast_08_15s.xml\",\"9\" : \"http://localhost:3000/samples/sample-vast-set/vast_09_15s.xml\"}"}
 61 | 
 62 |     ],
 63 |     "portMappings": [
 64 |       {
 65 |         "containerPort": 3000,
 66 |         "hostPort"     : 3000
 67 |       }
 68 |     ],
 69 |     "logConfiguration": {
 70 |         "logDriver": "awslogs",
 71 |         "options": {
 72 |             "awslogs-group": "${local.app_name}-backend-${terraform.workspace}",
 73 |             "awslogs-region": "us-east-1",
 74 |             "awslogs-stream-prefix": "vast2sgai-backend"
 75 |         }
 76 |     }
 77 |   }
 78 | ]
 79 | TASK_DEFINITION
 80 | 
 81 |   lifecycle {
 82 |     ignore_changes = [
 83 |       container_definitions
 84 |     ]
 85 |   }
 86 | }
 87 | 
 88 | resource "aws_ecs_service" "backend" {
 89 |   name            = "${local.app_name}-backend-${terraform.workspace}"
 90 |   cluster         = aws_ecs_cluster.microservices.id
 91 |   task_definition = aws_ecs_task_definition.backend.arn
 92 |   desired_count   = 1
 93 |   launch_type     = "FARGATE"
 94 | 
 95 |   network_configuration {
 96 |     subnets = module.vpc.private_subnets
 97 |     security_groups = [aws_security_group.ecs_backend_sg.id]
 98 |   }
 99 | 
100 |   lifecycle {
101 |     ignore_changes = [task_definition]
102 |   }
103 | 
104 |   load_balancer {
105 |     target_group_arn = aws_lb_target_group.backend.arn
106 |     container_name   = "${local.app_name}-backend-${terraform.workspace}"
107 |     container_port   = local.port
108 |   }
109 | }


--------------------------------------------------------------------------------
/infra/data.tf:
--------------------------------------------------------------------------------
1 | data "aws_caller_identity" "current" {}
2 | data "aws_region" "current" {}


--------------------------------------------------------------------------------
/infra/iam_role.tf:
--------------------------------------------------------------------------------
 1 | data "aws_iam_policy" "AmazonECSTaskExecutionRolePolicy" {
 2 |   name = "AmazonECSTaskExecutionRolePolicy"
 3 | }
 4 | 
 5 | resource "aws_iam_role" "ECSTaskExecutionRole" {
 6 |   assume_role_policy = jsonencode({
 7 |     Version = "2012-10-17"
 8 |     Statement = [
 9 |       {
10 |         Action = "sts:AssumeRole"
11 |         Effect = "Allow"
12 |         Sid    = ""
13 |         Principal = {
14 |           Service = "ecs-tasks.amazonaws.com"
15 |         }
16 |       },
17 |       
18 |     ]
19 |   })
20 |   inline_policy {
21 |     name = "logs"
22 | 
23 |     policy = jsonencode({
24 |       Version = "2012-10-17"
25 |       Statement = [
26 |         {
27 |           Action   = ["logs:*"]
28 |           Effect   = "Allow"
29 |           Resource = "*"
30 |         }
31 |       ]
32 |     })
33 |   }
34 |   managed_policy_arns = ["${data.aws_iam_policy.AmazonECSTaskExecutionRolePolicy.arn}"]
35 | }
36 | 
37 | resource "aws_iam_role" "ECSTaskRole" {
38 |   assume_role_policy = jsonencode({
39 |     Version = "2012-10-17"
40 |     Statement = [
41 |       {
42 |         Action = "sts:AssumeRole"
43 |         Effect = "Allow"
44 |         Sid    = ""
45 |         Principal = {
46 |           Service = "ecs-tasks.amazonaws.com"
47 |         }
48 |       }
49 |     ]
50 |   })
51 |   inline_policy {
52 |     name = "logs"
53 | 
54 |     policy = jsonencode({
55 |       Version = "2012-10-17"
56 |       Statement = [
57 |         {
58 |           Action   = ["logs:*"]
59 |           Effect   = "Allow"
60 |           Resource = "*"
61 |         },
62 |         {
63 |           Action   = ["s3:*"]
64 |           Effect   = "Allow"
65 |           Resource = "*"
66 |         },
67 |         {
68 |           Action   = ["secretsmanager:ListSecrets"]
69 |           Effect   = "Allow"
70 |           Resource = "*"
71 |         }
72 |       ]
73 |     })
74 |   }
75 | }


--------------------------------------------------------------------------------
/infra/load_balancer.tf:
--------------------------------------------------------------------------------
 1 | ## Load Balancer
 2 | resource "aws_lb" "microservices_alb" {
 3 |     name               = "${local.app_name}-${terraform.workspace}-alb"
 4 |     internal           = false
 5 |     load_balancer_type = "application"
 6 |     security_groups    = [aws_security_group.microservices_alb_sg.id]
 7 |     subnets            = module.vpc.public_subnets
 8 | 
 9 |     tags = {
10 |         Environment = terraform.workspace
11 |     }
12 | }
13 | ### Load Balancer Listener (HTTP)
14 | resource "aws_lb_listener" "alb_http" {
15 |     load_balancer_arn = aws_lb.microservices_alb.arn
16 |     port              = "80"
17 |     protocol          = "HTTP"
18 |     
19 |     default_action {
20 |     type = "redirect"
21 | 
22 |     redirect {
23 |       port        = "443"
24 |       protocol    = "HTTPS"
25 |       status_code = "HTTP_301"
26 |     }
27 |   }
28 | }
29 | ## Load Balancer Listener (HTTPS)
30 | resource "aws_lb_listener" "alb_https" {
31 |     load_balancer_arn = aws_lb.microservices_alb.arn
32 |     port              = "443"
33 |     protocol          = "HTTPS"
34 |     certificate_arn   = var.certificate_arn
35 | 
36 |     default_action {
37 |       type = "forward"
38 |       target_group_arn = aws_lb_target_group.backend.arn
39 |     }
40 | }


--------------------------------------------------------------------------------
/infra/main.tf:
--------------------------------------------------------------------------------
 1 | terraform {
 2 |     required_providers {
 3 |         aws = {
 4 |             source  = "hashicorp/aws"
 5 |             version = "4.55.0"
 6 |         }
 7 |     }
 8 |     backend "s3" {
 9 |         bucket = "terraform-vast2sgai"
10 |         key    = "terraform.tfstate.d/terraform.tfstate"
11 |         region = "us-east-1"
12 |     }
13 |     required_version = ">= 1.1.0"
14 | }
15 | 
16 | provider "aws" {
17 |     profile = var.aws_profile
18 |     region  = "us-east-1"
19 | }


--------------------------------------------------------------------------------
/infra/network.tf:
--------------------------------------------------------------------------------
 1 | # Networking
 2 | module "vpc" {
 3 |     source = "terraform-aws-modules/vpc/aws"
 4 |     version = "3.19.0"
 5 | 
 6 |     name = "${local.app_name}-${terraform.workspace}-vpc"
 7 |     cidr = "10.0.0.0/16"
 8 | 
 9 |     azs             = ["us-east-1a", "us-east-1b", "us-east-1c"]
10 |     private_subnets = ["10.0.1.0/24", "10.0.2.0/24", "10.0.3.0/24"]
11 |     public_subnets  = ["10.0.101.0/24", "10.0.102.0/24", "10.0.103.0/24"]
12 | 
13 |     # Single NAT Configuration
14 |     enable_nat_gateway = true
15 |     single_nat_gateway = true
16 |     enable_dns_hostnames = true
17 |     one_nat_gateway_per_az = false
18 | 
19 |     tags = {
20 |         Terraform = "true"
21 |         Environment = terraform.workspace
22 |     }
23 | }


--------------------------------------------------------------------------------
/infra/security_groups.tf:
--------------------------------------------------------------------------------
 1 | ## Backend Security Group
 2 | resource "aws_security_group" "ecs_backend_sg" {
 3 | 
 4 |   vpc_id      = module.vpc.vpc_id
 5 | 
 6 |   ingress {
 7 |     description      = "VPC"
 8 |     from_port        = 3000
 9 |     to_port          = 3000
10 |     protocol         = "tcp"
11 |     cidr_blocks      = [module.vpc.vpc_cidr_block]
12 |   }
13 | 
14 |   egress {
15 |     from_port        = 0
16 |     to_port          = 0
17 |     protocol         = "-1"
18 |     cidr_blocks      = ["0.0.0.0/0"]
19 |     ipv6_cidr_blocks = ["::/0"]
20 |   }
21 | 
22 |   tags = {
23 |     Environment = terraform.workspace
24 |   }
25 | }
26 | 
27 | ## Load Balancer Security Group
28 | resource "aws_security_group" "microservices_alb_sg" {
29 | 
30 |   vpc_id = module.vpc.vpc_id
31 | 
32 |   ingress {
33 |     description      = "HTTPS from Internet"
34 |     from_port        = 443
35 |     to_port          = 443
36 |     protocol         = "tcp"
37 |     cidr_blocks      = ["0.0.0.0/0"]
38 |   }
39 | 
40 |   ingress {
41 |     description      = "HTTP from Internet"
42 |     from_port        = 80
43 |     to_port          = 80
44 |     protocol         = "tcp"
45 |     cidr_blocks      = ["0.0.0.0/0"]
46 |   }
47 | 
48 |   egress {
49 |     from_port        = 0
50 |     to_port          = 0
51 |     protocol         = "-1"
52 |     cidr_blocks      = ["0.0.0.0/0"]
53 |     ipv6_cidr_blocks = ["::/0"]
54 |   }
55 | 
56 |   tags = {
57 |       Environment = terraform.workspace
58 |   }
59 | }


--------------------------------------------------------------------------------
/infra/tfvars/dev.tfvars:
--------------------------------------------------------------------------------
1 | certificate_arn                      = ""
2 | backend_domain_name                  = ""
3 | aws_profile                          = "sso"


--------------------------------------------------------------------------------
/infra/tfvars/prod.tfvars:
--------------------------------------------------------------------------------
1 | certificate_arn                      = "arn:aws:acm:us-east-1:588738577744:certificate/bb8f317d-bec7-494a-baf2-c4fd83bb51c1"
2 | backend_domain_name                  = "vast2sgai.qualabs.com"
3 | aws_profile                          = "sso"


--------------------------------------------------------------------------------
/infra/users.tf:
--------------------------------------------------------------------------------
 1 | ##
 2 | ## PIPELINE USER
 3 | ##
 4 | resource "aws_iam_user" "svc_pipeline" {
 5 |     name    = "svc_pipeline-${terraform.workspace}"
 6 | }
 7 | resource "aws_iam_user_policy" "svc_pipeline_policy" {
 8 |   name    = "VAST2SGEI_pipeline_policy-${terraform.workspace}"
 9 |   user    = aws_iam_user.svc_pipeline.name
10 |   policy  =  <<EOF
11 | {
12 |   "Version": "2012-10-17",
13 |   "Statement": [
14 |     {
15 |       "Action": [
16 |         "ecs:*",
17 |         "ecr:*",
18 |         "iam:PassRole"
19 |       ],
20 |       "Effect": "Allow",
21 |       "Resource": [
22 |           "*"
23 |       ]
24 |     },
25 |     {
26 |       "Action": [
27 |         "cloudfront:CreateInvalidation"
28 |       ],
29 |       "Effect": "Allow",
30 |       "Resource": [
31 |           "*"
32 |       ]
33 |     }
34 |   ]
35 | }
36 | EOF
37 | }
38 | resource "aws_iam_access_key" "svc_pipeline_key" {
39 |   user = aws_iam_user.svc_pipeline.name
40 | }
41 | output "pipeline_user_keys" {
42 |   value = aws_iam_access_key.svc_pipeline_key.id
43 |   description = "Pipeline user key"
44 |   sensitive = true
45 | }
46 | output "pipeline_user_secret_keys" {
47 |   value = aws_iam_access_key.svc_pipeline_key.secret
48 |   description = "Pipeline user secret key"
49 |   sensitive = true
50 | }
51 | 
52 | 


--------------------------------------------------------------------------------
/infra/variables.tf:
--------------------------------------------------------------------------------
 1 | locals {
 2 |   app_name    = "vast2sgai"
 3 | }
 4 | 
 5 | variable "aws_profile" {
 6 |   description = "sso"
 7 |   type        = string
 8 | }
 9 | 
10 | variable "certificate_arn" {
11 |   description = "Certificate ARN variable"
12 |   type        = string
13 | }
14 | 
15 | variable "backend_domain_name" {
16 |   description = "Backend domain name"
17 |   type        = string
18 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vast-2-sgai",
 3 |   "version": "0.0.1",
 4 |   "description": "A SGAI Proxy service",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node src/server.js",
 8 |     "dev": "nodemon src/server.js",
 9 |     "test": "echo \"Error: no test specified\" && exit 1",
10 |     "lint": "eslint ."
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/montevideo-tech/vast-2-sgai.git"
15 |   },
16 |   "keywords": [
17 |     "SGAI",
18 |     "HLS",
19 |     "Ad",
20 |     "insertion",
21 |     "HLS",
22 |     "Interstitials",
23 |     "MPEG-DASH"
24 |   ],
25 |   "author": "",
26 |   "license": "Apache-2.0",
27 |   "bugs": {
28 |     "url": "https://github.com/montevideo-tech/vast-2-sgai/issues"
29 |   },
30 |   "homepage": "https://github.com/montevideo-tech/vast-2-sgai#readme",
31 |   "dependencies": {
32 |     "@dailymotion/vast-client": "github:montevideo-tech/vast-client-js#dist",
33 |     "body-parser": "^1.20.3",
34 |     "cors": "^2.8.5",
35 |     "dotenv": "^16.4.7",
36 |     "express": "^4.21.1",
37 |     "find-config": "^1.0.0",
38 |     "jsonwebtoken": "^9.0.2",
39 |     "m": "^1.9.0",
40 |     "pino": "^9.5.0",
41 |     "pino-http": "^10.3.0",
42 |     "pino-pretty": "^13.0.0",
43 |     "prismjs": "^1.29.0"
44 |   },
45 |   "devDependencies": {
46 |     "@eslint/js": "^9.17.0",
47 |     "eslint": "^9.17.0",
48 |     "globals": "^15.13.0",
49 |     "nodemon": "^3.1.7"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/public/README.md:
--------------------------------------------------------------------------------
  1 | # Introduction
  2 | 
  3 | This demo shows how to use interstitials with HLS.js.
  4 | 
  5 | # Setup
  6 | 
  7 | Serve 'interstitials-demo' directory in a local server.
  8 | 
  9 | 
 10 | # HLS.js Tests
 11 | 
 12 | ## Place interstitial a the start/end 
 13 | 
 14 | Use `CUE="PRE"` 
 15 | Tested with "PRE" and "POST".
 16 | 
 17 | Result: ✅ Worked as expected.
 18 | 
 19 | ``` m3u8
 20 | #EXTM3U
 21 | #EXT-X-MEDIA-SEQUENCE:0
 22 | #EXT-X-TARGETDURATION:2
 23 | 
 24 | #EXTINF:2,
 25 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-0.ts
 26 | #EXTINF:2,
 27 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-1.ts
 28 | #EXTINF:2,
 29 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-2.ts
 30 | #EXTINF:2,
 31 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-3.ts
 32 | #EXTINF:2,
 33 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-4.ts
 34 | #EXTINF:2,
 35 | .
 36 | .
 37 | .
 38 | #EXT-X-ENDLIST
 39 | 
 40 | #EXT-X-DATERANGE:ID="ad1",CLASS="com.apple.hls.interstitial",START-DATE="2024-11-12T15:38:00.000Z",DURATION=45.000,X-ASSET-LIST="http://localhost:5500/assets/ads/ads.json",X-RESUME-OFFSET=0,X-RESTRICT="SKIP,JUMP",CUE="PRE"
 41 | ```
 42 | 
 43 | ## Place interstitial in between segments
 44 | 
 45 | Add `#EXT-X-PROGRAM-DATE-TIME` with a specific date and time.
 46 | Add `START-DATE` to `#EXT-X-DATERANGE`. 
 47 | 
 48 | >[!info]
 49 | The datetimes specified in both fields are relative to each other, and the player does not take the current timezone into account. To schedule an interstitial 5 seconds after the main content starts, simply set the second datetime to be 5 seconds later than the first, as shown in the example below.
 50 | 
 51 | >[!warning]
 52 | > Both `#EXT-X-PROGRAM-DATE-TIME` and `#EXT-X-DATERANGE` have to be defined in the playlist, not in the main HLS manifest.
 53 |  
 54 | 
 55 | Result: ✅ Worked as expected.
 56 | 
 57 | ``` m3u8
 58 | #EXTM3U
 59 | #EXT-X-MEDIA-SEQUENCE:0
 60 | #EXT-X-TARGETDURATION:2
 61 | #EXT-X-PROGRAM-DATE-TIME:2024-11-13T13:55:00.000Z
 62 | #EXT-X-DATERANGE:ID="ad1",CLASS="com.apple.hls.interstitial",START-DATE="2024-11-13T13:55:05.000Z",DURATION=45.000,X-ASSET-LIST="http://localhost:5500/assets/ads/ads.json",X-RESUME-OFFSET=0,X-RESTRICT="SKIP,JUMP"
 63 | 
 64 | #EXTINF:2,
 65 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-0.ts
 66 | #EXTINF:2,
 67 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-1.ts
 68 | #EXTINF:2,
 69 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-2.ts
 70 | #EXTINF:2,
 71 | https://bitdash-a.akamaihd.net/content/sintel/hls/video/800kbit/seq-3.ts
 72 | #EXTINF:2,
 73 | .
 74 | .
 75 | .
 76 | #EXT-X-ENDLIST
 77 | ```
 78 | 
 79 | ## Use #EXT-X-DEFINE:QUERYPARAM
 80 | Added #EXT-X-DEFINE:QUERYPARAM to the Multivariant Playlist and the Playlists, and it worked as expected. Using this approach, we can send any query parameter we want to the VAST-2-SGAI
 81 | 
 82 | 
 83 | Result: ✅ Worked as expected.
 84 | 
 85 | ``` main.m3u8
 86 | #EXTM3U
 87 | #EXT-X-DEFINE:QUERYPARAM="user"
 88 | #EXT-X-DEFINE:QUERYPARAM="content"
 89 | 
 90 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 91 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 92 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 93 | 
 94 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
 95 | video/800kbit.m3u8?user={$user}&content={$content}
 96 | 
 97 | #EXT-X-ENDLIST
 98 | ```
 99 | 
100 | ``` 800kbit.m3u8
101 | #EXTM3U
102 | #EXT-X-MEDIA-SEQUENCE:0
103 | #EXT-X-TARGETDURATION:2
104 | #EXT-X-DEFINE:QUERYPARAM="user"
105 | #EXT-X-DEFINE:QUERYPARAM="content"
106 | 
107 | #EXT-X-DATERANGE:ID="ad1",CLASS="com.apple.hls.interstitial",START-DATE="2024-11-13T13:55:05.000Z",DURATION=45.000,X-ASSET-LIST="/assets/ads/ads.json?user={$user}&content={$content}",X-RESUME-OFFSET=0,X-RESTRICT="SKIP,JUMP"
108 | 
109 | #EXT-X-PROGRAM-DATE-TIME:2024-11-13T13:55:00.000Z
110 | ...
111 | 
112 | ```


--------------------------------------------------------------------------------
/public/hls.js/adCreativeSignalingPlugin.js:
--------------------------------------------------------------------------------
 1 | const SUPPORTED_TRACKING_EVENTS = ["start", "firstQuartile", "midpoint", "thirdQuartile", "complete", "progress", "impression"];
 2 | 
 3 | class AdSignalingManager {
 4 |   constructor(hls) {
 5 |     console.log("Initializing AdSignalingManager");
 6 |     this.hls = hls;
 7 |     this.interstitialsController = hls.interstitialsController;
 8 |     this.trackingEventsQueue = [];
 9 | 
10 |     hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, async (_, data) => {
11 |       this.assetPlayer = data.player;
12 | 
13 |       this.assetPlayer.hls.on(Hls.Events.MEDIA_ENDED, this.checkAdCreativeSignaling);
14 |       this.signalInterval = self.setInterval(this.checkAdCreativeSignaling, 500);
15 | 
16 |       const { assetListIndex } = data;
17 |       const assetListResponse = data.event.assetListResponse;
18 |       const asset = assetListResponse.ASSETS?.[assetListIndex];
19 |       const creativeSignaling = asset?.["X-AD-CREATIVE-SIGNALING"];
20 |       const trackingEvents = creativeSignaling?.payload?.[0]?.tracking ?? [];
21 |       this.trackingEventsQueue = [...trackingEvents];
22 |     });
23 | 
24 |     hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, async (_, data) => {
25 |       this.cleanup();
26 |     });
27 |   }
28 | 
29 |   cleanup = () => {
30 |     console.log(this.trackingEventsQueue)
31 |     this.trackingEventsQueue = []
32 |     this.assetPlayer = null;
33 |     clearInterval(this.signalInterval);
34 |   };
35 | 
36 |   checkAdCreativeSignaling = () => {
37 |     if (!this.trackingEventsQueue) return;
38 | 
39 |     const currentTime = this.assetPlayer.currentTime;
40 | 
41 |     this.trackingEventsQueue.forEach((event, index) => {
42 |       if (SUPPORTED_TRACKING_EVENTS.includes(event.type)) {
43 |         const tolerance = 0.75; // time difference tolerance in seconds
44 |         if (
45 |           (event?.offset === undefined || (Math.abs(currentTime - event.offset) <= tolerance))
46 |         ) {
47 |           Promise.all(event.urls.map((url) => this.sendTrackingEvent(url)));
48 |           this.trackingEventsQueue.splice(index, 1);
49 |         }
50 |       }
51 |     });
52 |   };
53 | 
54 |   sendTrackingEvent = async (url) => {
55 |     try {
56 |       const response = await fetch(url);
57 |       if (!response.ok) {
58 |         this.hls?.logger.error(
59 |           `Error on Ad Creative Signaling event tracking request ${url}: ${response.status}`
60 |         );
61 |       }
62 |     } catch (error) {
63 |       this.hls?.logger.error(
64 |         `Error on Ad Creative Signaling event tracking request ${url}:`,
65 |         error
66 |       );
67 |     }
68 |   };
69 | 
70 |   destroy() {
71 |     this.cleanup();
72 |     this.hls = this.interstitialsController = null;
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/public/hls.js/videoClicksPlugin.js:
--------------------------------------------------------------------------------
  1 | class VideoClicksPlugin {
  2 |   constructor(hls, options) {
  3 |     if (!hls || typeof hls.on !== "function") {
  4 |       throw new Error("Invalid HLS.js instance passed to the plugin.");
  5 |     }
  6 | 
  7 |     this.hls = hls;
  8 |     this.options = options || {};
  9 |     this.container = options.container || document.body;
 10 |     this.clickEventUrl = options.clickEventUrl || null;
 11 |     this.assetList = { ASSETS: [] };
 12 |     this.currentAdIndex = 0;
 13 |     this.isAdPlaying = false;
 14 |     this.adVignette = null;
 15 | 
 16 |     this.container.style.position = "relative";
 17 | 
 18 |     this.init();
 19 |   }
 20 | 
 21 |   init() {
 22 |     this.hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (_, data) => {
 23 |       const { assetListIndex } = data;
 24 |       const assetListResponse = data.event?.assetListResponse;
 25 |       if (!assetListResponse || !assetListResponse.ASSETS?.length) {
 26 |         return;
 27 |       }
 28 | 
 29 |       this.assetList = assetListResponse;
 30 |       this.currentAdIndex = assetListIndex;
 31 | 
 32 |       this.loadAdAssets();
 33 |     });
 34 | 
 35 |     this.hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, () => {
 36 |       if (this.adVignette && this.container.contains(this.adVignette)) {
 37 |         this.container.removeChild(this.adVignette);
 38 |       }
 39 |       this.isAdPlaying = false;
 40 |     });
 41 | 
 42 |     this.hls.on(Hls.Events.INTERSTITIAL_ENDED, () => {
 43 |       this.cleanupAd();
 44 |     });
 45 |   }
 46 | 
 47 |   loadAdAssets() {
 48 |     if (this.assetList.ASSETS.length === 0) {
 49 |       return;
 50 |     }
 51 | 
 52 |     this.showAd(this.assetList.ASSETS[this.currentAdIndex]);
 53 |   }
 54 | 
 55 |   showAd(ad) {
 56 |     if (this.isAdPlaying) return;
 57 | 
 58 |     const { DURATION, "X-VAST2SGAI-VIDEOCLICKS": videoClicks } = ad;
 59 | 
 60 |     if (!videoClicks || !videoClicks.clickThrough?.url) {
 61 |       this.loadNextAd();
 62 |       return;
 63 |     }
 64 | 
 65 |     this.isAdPlaying = true;
 66 |     this.adVignette = this.createAdOverlay(this.container, videoClicks);
 67 |     this.container.appendChild(this.adVignette);
 68 | 
 69 |     setTimeout(() => {
 70 |       if (this.container.contains(this.adVignette)) {
 71 |         this.container.removeChild(this.adVignette);
 72 |       }
 73 |       this.loadNextAd();
 74 |     }, DURATION * 1000);
 75 |   }
 76 | 
 77 |   createAdOverlay(videoContainer, videoClicks) {
 78 |     const clickThroughUrl = videoClicks.clickThrough.url;
 79 |     const clickTracking = videoClicks.clickTracking || [];
 80 |     const videoElement = videoContainer.querySelector("video");
 81 |     if (!videoElement) {
 82 |       return;
 83 |     }
 84 | 
 85 |     videoContainer.style.position = "relative";
 86 | 
 87 |     const adVignette = document.createElement("div");
 88 |     adVignette.style.position = "absolute"; 
 89 |     adVignette.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
 90 |     adVignette.style.color = "#fff";
 91 |     adVignette.style.borderRadius = "12px";
 92 |     adVignette.style.padding = "8px 12px";
 93 |     adVignette.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.4)";
 94 |     adVignette.style.fontFamily = "Arial, sans-serif";
 95 |     adVignette.style.fontSize = "12px";
 96 |     adVignette.style.zIndex = "10"; 
 97 |     adVignette.style.cursor = "pointer";
 98 |     adVignette.style.pointerEvents = "auto";
 99 |     adVignette.style.display = "inline-flex";
100 |     adVignette.style.alignItems = "center";
101 |     adVignette.style.minWidth = "150px";
102 |     adVignette.style.justifyContent = "space-between";
103 | 
104 |     const updateVignettePosition = () => {
105 |       const videoRect = videoElement.getBoundingClientRect();
106 |       adVignette.style.top = "10px"; 
107 |       adVignette.style.left = `${videoRect.width - 200}px`; 
108 |     };
109 | 
110 |     updateVignettePosition();
111 |     window.addEventListener("resize", updateVignettePosition);
112 | 
113 |     adVignette.onclick = () => {
114 |       this.sendAdClickEvent(clickTracking);
115 |       window.open(clickThroughUrl, "_blank");
116 |     };
117 | 
118 |     const adText = document.createElement("span");
119 |     adText.textContent = new URL(clickThroughUrl).hostname + "...";
120 |     adText.style.marginRight = "8px";
121 | 
122 |     const closeButton = document.createElement("button");
123 |     closeButton.textContent = "✖";
124 |     closeButton.style.backgroundColor = "transparent";
125 |     closeButton.style.border = "none";
126 |     closeButton.style.color = "#fff";
127 |     closeButton.style.fontSize = "12px";
128 |     closeButton.style.cursor = "pointer";
129 |     closeButton.style.marginLeft = "5px";
130 |     closeButton.onclick = (event) => {
131 |       event.stopPropagation();
132 |       adVignette.style.opacity = "0";
133 |       setTimeout(() => adVignette.remove(), 300);
134 |       window.removeEventListener("resize", updateVignettePosition);
135 |     };
136 | 
137 |     adVignette.appendChild(adText);
138 |     adVignette.appendChild(closeButton);
139 |     videoContainer.appendChild(adVignette);
140 | 
141 |     return adVignette;
142 |   }
143 | 
144 |   cleanupAd() {
145 |     const overlays = this.container.querySelectorAll("div");
146 |     overlays.forEach((overlay) => {
147 |       if (overlay.onclick) {
148 |         this.container.removeChild(overlay);
149 |       }
150 |     });
151 |   }
152 | 
153 |   loadNextAd() {
154 |     this.currentAdIndex++;
155 |     if (this.currentAdIndex < this.assetList.ASSETS.length) {
156 |       this.showAd(this.assetList.ASSETS[this.currentAdIndex]);
157 |     } else {
158 |       this.isAdPlaying = false;
159 |     }
160 |   }
161 | 
162 |   sendAdClickEvent(clickTracking) {
163 |     clickTracking.forEach((tracking) => {
164 |       fetch(tracking.url, { method: "GET" }).catch(() => {});
165 |     });
166 |   }
167 | }
168 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>VAST-2-SGAI</title>
  3 |   <style>
  4 |     header {
  5 |       padding: 1rem;
  6 |       background-color: white;
  7 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  8 |     }
  9 | 
 10 |     .header-container {
 11 |       display: grid;
 12 |       grid-template-columns: repeat(3, 1fr);
 13 |       align-items: center;
 14 |     }
 15 | 
 16 |     .project-name {
 17 |       color: #63ba93;
 18 |       text-align: center;
 19 |     }
 20 | 
 21 |     body {
 22 |       margin: 0;
 23 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 24 |         Arial, sans-serif;
 25 |     }
 26 | 
 27 |     #logo {
 28 |       margin-right: auto;
 29 |     }
 30 | 
 31 |     .samples {
 32 |       max-width: 640px;
 33 |       margin: 0 auto;
 34 |       padding: 1rem;
 35 |     }
 36 | 
 37 |     .samples a {
 38 |       color: black;
 39 |       font-weight: 500;
 40 |       font-size: 1.2rem;
 41 |     }
 42 | 
 43 |     .samples a:hover {
 44 |       color: #36b4a7;
 45 |       transition: ease-in-out 250ms;
 46 |     }
 47 | 
 48 |     .samples h1 {
 49 |       color: #36b4a7;
 50 |     }
 51 | 
 52 |     ul li:not(:last-child) {
 53 |       margin-bottom: 10px;
 54 |     }
 55 |   </style>
 56 | </head>
 57 | 
 58 | <body>
 59 |   <header>
 60 |     <div class="header-container">
 61 |       <img
 62 |         src="/logo.svg"
 63 |         alt="Company Logo"
 64 |         width="150"
 65 |         height="50"
 66 |         id="logo"
 67 |       />
 68 |       <h1 class="project-name">VAST-2-SGAI</h1>
 69 |     </div>
 70 |   </header>
 71 |   <div class="samples">
 72 |     <h1>Demo Showcase</h1>
 73 |     <ul>
 74 |       <li>
 75 |         <a href="samples/asset-list-1">Asset List 1</a>
 76 |       </li>
 77 |       <li>
 78 |         <a href="samples/asset-list-2/">Asset List 2</a>
 79 |       </li>
 80 |       <li>
 81 |         <a href="samples/sample-vast-1/">Sample VAST Parsing 1</a>
 82 |       </li>
 83 |       <li>
 84 |         <a href="samples/sample-api-jwt/">Sample API JWT</a>
 85 |       </li>
 86 |       <li>
 87 |         <a href="samples/sample-api-vasturl/">Sample API VAST URL</a>
 88 |       </li>
 89 |       <li>
 90 |         <a href="samples/sample-api-vastid/">Sample API VAST ID</a>
 91 |       </li>
 92 |       <li>
 93 |         <a href="samples/sample-api-vastid-live/">Sample API VAST ID (LIVE w/BBB)</a>
 94 |       </li>
 95 |       <li>
 96 |         <a href="samples/sample-api-vastid-live2/">Sample API VAST ID (LIVE w/WebRTC)</a>
 97 |       </li>
 98 |       <li>
 99 |         <a href="samples/sample-api-vastid-live3/">Sample API VAST ID (LIVE w/IP Camera)</a>
100 |       </li>
101 |       <li>
102 |         <a href="samples/sample-api-vastid-live4/">Sample API VAST ID (LIVE w/RTMP)</a>
103 |       </li>
104 |       <li>
105 |         <a href="samples/sample-ad-signaling/"
106 |           >Sample VAST with Tracking Events to Ad Creative Signaling</a
107 |         >
108 |       </li>
109 |       <li>
110 |         <a href="samples/sample-ad-click/">Sample VAST with Ad Clickthrough Tracking</a>
111 |       </li>
112 |       <li>
113 |         <a href="samples/dash-alt-mpd/">dash.js + AlterantiveMPD + ListMPD</a>
114 |       </li>
115 |       <li>
116 |         <a href="samples/sample-edit-vast/">Try your own VAST file!</a>
117 |       </li>
118 |     </ul>
119 |   </div>
120 | </body>
121 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="2110.795 -238.06 5164.892 1083.314" width="5164.89" height="1083.31">
 2 |   <defs>
 3 |     <clipPath id="a">
 4 |       <path d="M9306 500h5177.8v1102c0 2.21-1.8 4-4 4H9310c-2.21 0-4-1.79-4-4V500Z" fill="#fff"/>
 5 |     </clipPath>
 6 |   </defs>
 7 |   <g clip-path="url(#a)" transform="translate(-7200.514 -738.06)">
 8 |     <path d="M10231.3 565.1c-398.06-177.263-787.38 28.972-891.51 359.38-56.07 178.03 37.07 353.96 279.26 395.42-302.19-295.87 161.66-833.399 612.25-754.8Z" fill="#36B4A7"/>
 9 |     <path d="m9477.16 1296.37 136.71 171.59c243.55 242.48 767.53 88.21 876.53-327.25 19-123.52 15.8-265.062-50.6-403.261-90 414.391-539.23 699.641-962.64 558.921Z" fill="#64BA93"/>
10 |     <path d="M10262.3 1469.2c89-66.08 154.6-138.82 193.2-229.47 200.3-468.129-118.1-846.507-588.61-614.674 200.61-83.068 463.61-61.11 565.91 112.543 170.4 290.541-64.4 679.371-170.5 731.601Z" fill="#DBDFE2"/>
11 |     <path d="M10015.2 1258.44c-242.29 77.47-681.4 87.86-688.34-232.69-1.45-44.571 7.93-70.939 14.92-114.261l-14.08 41.31c-111.31 361.721 369.25 467.371 687.5 305.641Z" fill="#fff"/>
12 |     <path d="M11187.7 1545.52h-69.8V1239.7c-59.2 74.93-132.3 112.4-219.2 112.4-78.9 0-145.5-29.62-199.7-88.87-53.5-58.18-80.2-128.76-80.2-211.71 0-81.883 27.3-151.928 82-210.14 54.7-58.209 121.3-87.299 199.9-87.299 89.9 0 162.4 39.744 217.2 119.2V768.73h69.8v776.79Zm-67.3-488.29c0-64.923-20.4-119.643-61.1-164.092-40.7-44.446-91.9-66.671-153.7-66.671-83 0-145 38.026-185.8 114.08-19.6 36.133-29.4 74.333-29.4 114.613 0 40.31 9.8 78.57 29.4 114.88 19.6 36.28 45.9 64.6 78.9 84.91 33.1 20.33 68.6 30.48 106.4 30.48 38.2 0 74.4-10.06 108.7-30.19 34.2-20.15 60.5-47.41 78.9-81.79 18.5-34.39 27.7-73.13 27.7-116.22ZM11797.3 1047.5c0 64.06-5.9 114.85-17.5 152.46-15.9 51.17-45 90.35-87.2 117.48-35.2 22.64-79.3 33.95-132.1 33.95-104.1 0-174.5-42.65-211.4-127.9-17.6-40.04-26.4-100.44-26.4-181.2V768.698h74.4v264.972c0 65.38 3.3 109.88 9.9 133.53 10.2 36.16 30 64.34 59.4 84.49 27.6 18.79 60 28.17 96.9 28.17 35.9 0 67.4-8.88 94.5-26.6 28.6-19.12 48.4-45.9 59.3-80.32 6.9-21.87 10.4-68.3 10.4-139.27V768.698h69.8V1047.5ZM12485.9 1337.42h-69.8v-97.75c-59.2 74.93-132.2 112.4-219.2 112.4-78.9 0-145.5-29.62-199.6-88.87-53.5-58.18-80.3-128.76-80.3-211.71 0-81.882 27.4-151.928 82-210.14 54.7-58.208 121.3-87.298 199.9-87.298 90 0 162.4 39.743 217.2 119.172V768.671h69.8v568.749Zm-65.9-280.19c0-64.922-20.4-119.643-61-164.089-40.8-44.449-92-66.674-153.8-66.674-83 0-145 38.026-185.8 114.08-19.6 36.133-29.4 74.333-29.4 114.613 0 40.31 9.8 78.57 29.4 114.88 19.6 36.28 45.9 64.6 78.9 84.91 33.1 20.33 68.6 30.48 106.4 30.48 38.2 0 74.5-10.06 108.7-30.19 34.2-20.15 60.5-47.41 78.9-81.79 18.4-34.39 27.7-73.13 27.7-116.22Z" fill="#383838"/>
13 |     <path d="M12690.6 1337.42h-69.8V551.34h69.8v786.08ZM13370 1337.42h-69.8v-97.75c-59.2 74.93-132.3 112.4-219.2 112.4-78.9 0-145.5-29.62-199.6-88.87-53.6-58.18-80.3-128.76-80.3-211.71 0-81.882 27.3-151.928 82-210.14 54.7-58.208 121.3-87.298 199.9-87.298 89.9 0 162.3 39.743 217.2 119.172V768.671h69.8v568.749Zm-67-280.19c0-64.922-20.4-119.643-61-164.089-40.8-44.449-92-66.674-153.8-66.674-83 0-145 38.026-185.8 114.08-19.6 36.133-29.4 74.333-29.4 114.613 0 40.31 9.8 78.57 29.4 114.88 19.6 36.28 45.9 64.6 78.9 84.91 33.1 20.33 68.6 30.48 106.5 30.48 38.2 0 74.4-10.06 108.6-30.19 34.2-20.15 60.5-47.41 79-81.79 18.4-34.39 27.6-73.13 27.6-116.22ZM14083.7 1054.9c0 82-27.2 152.05-81.5 210.08-54.2 58.03-120.4 87.03-198.4 87.03-88.3 0-160-39.59-215.2-118.84v104.25h-69.8V551.34h69.8v316.411c58.1-74.724 130.5-112.07 217.2-112.07 78.3 0 144.2 29.297 197.7 87.834 53.5 58.564 80.2 129.025 80.2 211.385Zm-69.2-1.84c0-40.27-9.8-78.655-29.4-115.114-19.6-36.459-46-64.868-79-85.171-33.1-20.299-68.4-30.481-105.9-30.481-38.2 0-74.5 10.182-108.9 30.481-34.3 20.303-60.7 47.675-79.2 82.062-18.4 34.388-27.7 73.093-27.7 116.153 0 64.96 20.4 119.65 61.1 164.1 40.7 44.44 91.9 66.67 153.7 66.67 83 0 145.2-38.03 186.4-114.08 19.2-36.14 28.9-74.31 28.9-114.62ZM14476.2 1185.43c0 48.12-15.8 88.01-47.4 119.74-31.7 31.72-70.6 47.58-116.9 47.58-66.9 0-120.4-26.78-160.3-80.4l43.9-52.23c35.5 41.78 73.3 62.68 113.1 62.68 26.3 0 49.6-8.94 70-26.85 20.4-17.87 30.7-40.36 30.7-67.44 0-27.4-12.2-51.55-36.4-72.38-12-10.42-35.6-25.01-70.8-43.77-40.2-21.57-69.6-42.97-88.2-64.22-25.2-28.525-37.9-62.646-37.9-102.331 0-44.213 14.3-80.316 42.7-108.341 28.5-28.025 63.9-42.022 106.2-42.022 49.9 0 100.2 25.598 150.8 76.764l-44.8 48.562c-37.3-37.583-73.6-56.373-109.2-56.373-21.6 0-40.7 7.428-57.3 22.341-16.6 14.886-24.9 33.41-24.9 55.578 0 37.374 34.5 74.781 103.6 112.162 42.6 23.02 73.5 44.98 92.7 65.87 26.9 29.24 40.4 64.3 40.4 105.08Z" fill="#64BA93"/>
14 |   </g>
15 | </svg>


--------------------------------------------------------------------------------
/public/samples/asset-list-1/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Asset List 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     ul li:not(:last-child) {
 64 |       margin-bottom: 10px;
 65 |     }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <header>
 71 |     <div class="header-container">
 72 |       <a href="/">
 73 |         <img
 74 |           src="/logo.svg"
 75 |           alt="Company Logo"
 76 |           width="150"
 77 |           height="50"
 78 |           id="logo"
 79 |         />
 80 |       </a>
 81 |       <h1 class="project-name">VAST-2-SGAI</h1>
 82 |     </div>
 83 |   </header>
 84 |   <div class="samples">
 85 |     <h1>Asset List 1</h1>
 86 |     <p>HLS, interstitial@5sec, 1 ad</p>
 87 | 
 88 |     <div class="video-container">
 89 |       <video id="video" controls></video>
 90 |     </div>
 91 |   </div>
 92 | 
 93 |   <script>
 94 |     if (Hls.isSupported()) {
 95 |       var video = document.getElementById("video");
 96 |       var hls = new Hls({
 97 |         enableInterstitialPlayback: true,
 98 |         interstitialAppendInPlace: true,
 99 |         interstitialLiveLookAhead: 20,
100 |       });
101 | 
102 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
103 |         console.log("video and hls.js are now bound together !");
104 |       });
105 | 
106 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
107 |         console.log(
108 |           "manifest loaded, found " + data.levels.length + " quality level"
109 |         );
110 |       });
111 | 
112 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
113 |         console.log("INTERSTITIALS_UPDATED", data);
114 |       });
115 | 
116 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
117 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
118 |         console.log("hls interstitialsManager", hls.interstitialsManager);
119 |       });
120 | 
121 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
122 |         console.log("ASSET_LIST_LOADING", data);
123 |       });
124 | 
125 |       hls.on(Hls.Events.ERROR, (event, data) => {
126 |         console.log("ERROR", data);
127 |       });
128 | 
129 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
130 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
131 |       });
132 | 
133 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
134 |         console.log("ASSET_LIST_LOADED", data);
135 |       });
136 | 
137 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
138 |         console.log("INTERSTITIAL_STARTED", data);
139 |       });
140 | 
141 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
142 |         console.log("INTERSTITIAL_ENDED", data);
143 |       });
144 | 
145 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
146 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
147 |       });
148 | 
149 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
150 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
151 |       });
152 | 
153 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
154 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
155 |       });
156 | 
157 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
158 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
159 |       });
160 | 
161 |       hls.loadSource("main.m3u8?user=1234&content=abc");
162 | 
163 |       hls.attachMedia(video);
164 |     }
165 |   </script>
166 | </body>
167 | 


--------------------------------------------------------------------------------
/public/samples/asset-list-1/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/asset-list-2/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Asset List 2</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     ul li:not(:last-child) {
 64 |       margin-bottom: 10px;
 65 |     }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <header>
 71 |     <div class="header-container">
 72 |       <a href="/">
 73 |         <img
 74 |           src="/logo.svg"
 75 |           alt="Company Logo"
 76 |           width="150"
 77 |           height="50"
 78 |           id="logo"
 79 |         />
 80 |       </a>
 81 |       <h1 class="project-name">VAST-2-SGAI</h1>
 82 |     </div>
 83 |   </header>
 84 |   <div class="samples">
 85 |     <h1>Asset List 2</h1>
 86 |     <p>HLS, interstitial@5sec, 2 ads in Ad POD</p>
 87 | 
 88 |     <div class="video-container">
 89 |       <video id="video" controls></video>
 90 |     </div>
 91 |   </div>
 92 | 
 93 |   <script>
 94 |     if (Hls.isSupported()) {
 95 |       var video = document.getElementById("video");
 96 |       var hls = new Hls({
 97 |         enableInterstitialPlayback: true,
 98 |         interstitialAppendInPlace: true,
 99 |         interstitialLiveLookAhead: 20,
100 |       });
101 | 
102 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
103 |         console.log("video and hls.js are now bound together !");
104 |       });
105 | 
106 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
107 |         console.log(
108 |           "manifest loaded, found " + data.levels.length + " quality level"
109 |         );
110 |       });
111 | 
112 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
113 |         console.log("INTERSTITIALS_UPDATED", data);
114 |       });
115 | 
116 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
117 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
118 |         console.log("hls interstitialsManager", hls.interstitialsManager);
119 |       });
120 | 
121 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
122 |         console.log("ASSET_LIST_LOADING", data);
123 |       });
124 | 
125 |       hls.on(Hls.Events.ERROR, (event, data) => {
126 |         console.log("ERROR", data);
127 |       });
128 | 
129 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
130 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
131 |       });
132 | 
133 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
134 |         console.log("ASSET_LIST_LOADED", data);
135 |       });
136 | 
137 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
138 |         console.log("INTERSTITIAL_STARTED", data);
139 |       });
140 | 
141 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
142 |         console.log("INTERSTITIAL_ENDED", data);
143 |       });
144 | 
145 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
146 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
147 |       });
148 | 
149 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
150 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
151 |       });
152 | 
153 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
154 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
155 |       });
156 | 
157 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
158 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
159 |       });
160 | 
161 |       hls.loadSource("main.m3u8?user=1234&content=abc");
162 | 
163 |       hls.attachMedia(video);
164 |     }
165 |   </script>
166 | </body>
167 | 


--------------------------------------------------------------------------------
/public/samples/asset-list-2/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/dash-alt-mpd/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="../../dash.js/dash.all.min.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     ul li:not(:last-child) {
 64 |       margin-bottom: 10px;
 65 |     }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <header>
 71 |     <div class="header-container">
 72 |       <a href="/">
 73 |         <img
 74 |           src="/logo.svg"
 75 |           alt="Company Logo"
 76 |           width="150"
 77 |           height="50"
 78 |           id="logo"
 79 |         />
 80 |       </a>
 81 |       <h1 class="project-name">VAST-2-SGAI</h1>
 82 |     </div>
 83 |   </header>
 84 |   <div class="samples">
 85 |     <h1>Sample dash.js AlternativeMPD with ListMPD + CMCD v2</h1>
 86 |     <p>
 87 |       DASH + AlternativeMPD + ListMPD + CMCD v2, 1 ad parsed form
 88 |       <a href="vast-sample.xml">this VAST example</a>
 89 |     </p>
 90 |     <p>
 91 |       API Call:
 92 |       <a
 93 |         href="/api/list-mpd?vasturl=http://localhost:3000/samples/dash-alt-mpd/vast-sample.xml"
 94 |         >try out</a
 95 |       >
 96 |     </p>
 97 | 
 98 |     <div class="video-container">
 99 |       <video id="video" controls></video>
100 |     </div>
101 |   </div>
102 | 
103 |   <script>
104 |     /* possible modes of attach cmcd data */
105 |     var CMCD_MODE_QUERY = "query"; /* as query parameters */
106 |     var CMCD_MODE_HEADER = "header"; /* as HTTP headers */
107 | 
108 |     var video,
109 |       url = "live-alternative-ads.mpd",
110 |       version;
111 | 
112 |     player = dashjs.MediaPlayer().create();
113 |     video = document.querySelector("video");
114 |     player.initialize();
115 | 
116 |     player.updateSettings({
117 |       streaming: {
118 |         cmcd: {
119 |           enabled: true /* global enable reporting of cmcd parameters */,
120 |           version: 2 /* 1 is the default version */,
121 |           reporting: {
122 |             requestMode: {
123 |               enabled: true /* enable cmcdv2 request mode */,
124 |               mode: CMCD_MODE_QUERY /* overrides global mode */,
125 |             },
126 |             responseMode: {
127 |               enabled: true /* enable cmcdv2 response mode. FALSE by default */,
128 |               mode: CMCD_MODE_QUERY /* overrides global mode. JSON not supported */,
129 |               enabledKeys: [
130 |                 "sid",
131 |                 "cid",
132 |                 "ts",
133 |                 "url",
134 |                 "br",
135 |                 "d",
136 |                 "ot",
137 |                 "tb",
138 |                 "v",
139 |                 "sta",
140 |                 "ttfb",
141 |                 "ttlb",
142 |                 "rc",
143 |               ] /* optional, overrides global keys */,
144 |               requestUrl:
145 |                 "http://" +
146 |                 window.location.hostname +
147 |                 ":3000/cmcd/response-mode" /*mandatory, URL to send report */,
148 |               requestMethod: "POST" /*optional, get by default */,
149 |             },
150 |             eventMode: {
151 |               enabled: true /* enable cmcdv2 state-interval mode. FALSE by default */,
152 |               mode: CMCD_MODE_QUERY /*overrides global mode. JSON not supported */,
153 |               interval: 10000 /* time in ms between regular requests. Default 30s or 0 to omit */,
154 |               enabledKeys: [
155 |                 "sta",
156 |                 "sid",
157 |                 "cid",
158 |                 "sf",
159 |                 "v",
160 |                 "ltc",
161 |                 "msd",
162 |                 "sta",
163 |               ] /* Currently only supports: 'sta', 'ts', 'sid', 'cid', 'sf', 'v', 'lb', 'pr' */,
164 |               requestUrl:
165 |                 "http://" +
166 |                 window.location.hostname +
167 |                 ":3000/cmcd/event-mode" /* mandatory, URL to send report */,
168 |               requestMethod: "POST" /* optional, get by default */,
169 |             },
170 |           },
171 |           sid: "b248658d-1d1a-4039-91d0-8c08ba597da5" /* session id send with each request */,
172 |           cid: "21cf726cfe3d937b5f974f72bb5bd06a" /* content id send with each request */,
173 |           mode: CMCD_MODE_QUERY /* global mode if not specified in each mode */,
174 |           enabledKeys: [
175 |             "br",
176 |             "d",
177 |             "ot",
178 |             "tb",
179 |             "bl",
180 |             "dl",
181 |             "mtp",
182 |             "nor",
183 |             "nrr",
184 |             "su",
185 |             "bs",
186 |             "rtp",
187 |             "cid",
188 |             "pr",
189 |             "sf",
190 |             "sid",
191 |             "st",
192 |             "v",
193 |             "sta",
194 |             "ltc",
195 |             "msd",
196 |             "sta",
197 |           ],
198 |         },
199 |       },
200 |     });
201 |     player.setAutoPlay(true);
202 |     player.attachView(video);
203 |     player.attachSource(url);
204 |   </script>
205 | </body>
206 | 


--------------------------------------------------------------------------------
/public/samples/dash-alt-mpd/live-alternative-ads.mpd:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <MPD xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:cmcd="http://www.qualabs.com/cmcd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd" 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">
 3 |   <BaseURL>https://livesim.dashif.org/livesim2/scte35_2/testpic_2s/</BaseURL>
 4 |   <Period id="P0" start="PT0S">
 5 |     <EventStream xmlns="" schemeIdUri="urn:mpeg:dash:event:alternativeMPD:2022" timescale="1000">
 6 |       <Event id="ad1" presentationTime="10000" duration="10000">
 7 |         <AlternativeMPD uri="/api/list-mpd?vasturl=http://localhost:3000/samples/dash-alt-mpd/vast-sample.xml" earliestResolutionTimeOffset="5000" mode="replace" returnOffset="0" cmcd:RequestModeEnabled="false"/>
 8 |       </Event>
 9 |       <Event id="ad2" presentationTime="40000" duration="5000">
10 |         <AlternativeMPD uri="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/TestAssets/MediaOfflineErrorAsset/stream.mpd" earliestResolutionTimeOffset="5000" mode="replace" returnOffset="0"/>
11 |       </Event>
12 |       <Event id="ad3" presentationTime="70000" duration="5000">
13 |         <AlternativeMPD uri="https://media.axprod.net/TestVectors/v7-Clear/Manifest_1080p.mpd" earliestResolutionTimeOffset="5000" mode="replace" returnOffset="0"/>
14 |       </Event>
15 |     </EventStream>
16 |     <AdaptationSet lang="en" contentType="audio" segmentAlignment="true" mimeType="audio/mp4" startWithSAP="1">
17 |       <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main"/>
18 |       <SegmentTemplate media="$RepresentationID$/$Number$.m4s" initialization="$RepresentationID$/init.mp4" duration="2" startNumber="0"/>
19 |       <Representation id="A48" bandwidth="48000" audioSamplingRate="48000" codecs="mp4a.40.2">
20 |         <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
21 |       </Representation>
22 |     </AdaptationSet>
23 |     <AdaptationSet contentType="video" par="16:9" minWidth="640" maxWidth="640" minHeight="360" maxHeight="360" maxFrameRate="60/2" segmentAlignment="true" mimeType="video/mp4" startWithSAP="1">
24 |       <InbandEventStream schemeIdUri="urn:scte:scte35:2013:bin"/>
25 |       <Role schemeIdUri="urn:mpeg:dash:role:2011" value="main"/>
26 |       <SegmentTemplate media="$RepresentationID$/$Number$.m4s" initialization="$RepresentationID$/init.mp4" duration="2" startNumber="0"/>
27 |       <Representation id="V300" bandwidth="300000" width="640" height="360" sar="1:1" frameRate="60/2" codecs="avc1.64001e"/>
28 |     </AdaptationSet>
29 |   </Period>
30 |   <UTCTiming schemeIdUri="urn:mpeg:dash:utc:http-xsdate:2014" value="https://time.akamai.com/?iso&amp;ms"/>
31 | </MPD>
32 | 


--------------------------------------------------------------------------------
/public/samples/sample-ad-click/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample VAST 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <script src="../../hls.js/videoClicksPlugin.js"></script>
  5 |   <style>
  6 |     video {
  7 |       height: 300px;
  8 |       width: 533px;
  9 |       background-color: black;
 10 |     }
 11 |     .ad-overlay {
 12 |       position: fixed;
 13 |       top: 20px;
 14 |       left: 20px;
 15 |       padding: 10px;
 16 |       background-color: rgba(0, 0, 0, 0.7);
 17 |       color: white;
 18 |       z-index: 9999;
 19 |       font-size: 16px;
 20 |       border-radius: 5px;
 21 |     }
 22 |     video {
 23 |       height: 300px;
 24 |       width: 533px;
 25 |       background-color: black;
 26 |     }
 27 | 
 28 |     .video-container {
 29 |       display: flex;
 30 |       justify-content: center;
 31 |     }
 32 | 
 33 |     header {
 34 |       padding: 1rem;
 35 |       background-color: white;
 36 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 37 |     }
 38 | 
 39 |     .header-container {
 40 |       display: grid;
 41 |       grid-template-columns: repeat(3, 1fr);
 42 |       align-items: center;
 43 |     }
 44 | 
 45 |     .project-name {
 46 |       color: #63ba93;
 47 |       text-align: center;
 48 |     }
 49 | 
 50 |     body {
 51 |       margin: 0;
 52 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 53 |         Arial, sans-serif;
 54 |     }
 55 | 
 56 |     #logo {
 57 |       margin-right: auto;
 58 |     }
 59 | 
 60 |     .samples {
 61 |       max-width: 640px;
 62 |       margin: 0 auto;
 63 |       padding: 1rem;
 64 |     }
 65 | 
 66 |     .samples a {
 67 |       color: black;
 68 |       font-weight: 500;
 69 |     }
 70 | 
 71 |     .samples a:hover {
 72 |       color: #36b4a7;
 73 |       transition: ease-in-out 250ms;
 74 |     }
 75 | 
 76 |     .samples h1 {
 77 |       color: #36b4a7;
 78 |     }
 79 | 
 80 |     .samples p {
 81 |       overflow: auto;
 82 |     }
 83 | 
 84 |     ul li:not(:last-child) {
 85 |       margin-bottom: 10px;
 86 |     }
 87 |   </style>
 88 | </head>
 89 | 
 90 | <body>
 91 |   <body>
 92 |     <header>
 93 |       <div class="header-container">
 94 |         <a href="/">
 95 |           <img
 96 |             src="/logo.svg"
 97 |             alt="Company Logo"
 98 |             width="150"
 99 |             height="50"
100 |             id="logo"
101 |           />
102 |         </a>
103 |         <h1 class="project-name">VAST-2-SGAI</h1>
104 |       </div>
105 |     </header>
106 |     <div class="samples">
107 |       <h1>Sample VAST with Click Tracking</h1>
108 |       <p>
109 |         HLS, interstitial@5sec, 1 ad parsed form
110 |         <a href="vast-sample.xml">this Google IMA VAST example</a>
111 |       </p>
112 |   <div id="player-container" class="video-container">
113 |     <video id="video" controls></video>
114 |   </div>
115 |   <script>
116 |     if (Hls.isSupported()) {
117 |       var video = document.getElementById('video');
118 |       var hls = new Hls({
119 |         enableInterstitialPlayback: true,
120 |         interstitialAppendInPlace: true,
121 |         interstitialLiveLookAhead: 20
122 |       });
123 | 
124 | 
125 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
126 |         console.log(
127 |           'manifest loaded, found ' + data.levels.length + ' quality level',
128 |         );
129 |       });
130 | 
131 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
132 |         console.log('INTERSTITIALS_UPDATED', data);
133 |       });
134 | 
135 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
136 |         console.log('INTERSTITIALS_BUFFERED_TO_BOUNDARY', data);
137 |         console.log("hls interstitialsManager", hls.interstitialsManager)
138 |       });
139 | 
140 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
141 |         console.log('ASSET_LIST_LOADING', data);
142 |       });
143 | 
144 |       hls.on(Hls.Events.ERROR, (event, data) => {
145 |         console.log('ERROR', data);
146 |       });
147 | 
148 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
149 |         console.log('INTERSTITIAL_ASSET_PLAYER_CREATED', data);
150 |       });
151 | 
152 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
153 |         console.log('ASSET_LIST_LOADED', data);
154 |       });
155 |       
156 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
157 |         console.log('INTERSTITIAL_STARTED', data);
158 |       });
159 | 
160 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
161 |         console.log('INTERSTITIAL_ENDED', data);
162 |       });
163 | 
164 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
165 |         console.log('INTERSTITIAL_ASSET_STARTED', data);
166 |       });
167 | 
168 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
169 |         console.log('INTERSTITIAL_ASSET_ENDED', data);
170 |       });
171 | 
172 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
173 |         console.log('INTERSTITIALS_PRIMARY_RESUMED', data);
174 |       });
175 | 
176 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
177 |         console.log('INTERSTITIAL_ASSET_ERROR', data);
178 |       });
179 | 
180 |       hls.loadSource('main.m3u8?user=1234&content=abc');
181 | 
182 |       hls.attachMedia(video);
183 | 
184 |       const videoClicksPlugin = new VideoClicksPlugin(hls, {
185 |         container: document.getElementById("player-container")
186 |       });
187 | 
188 |     }
189 |   </script>
190 | </body>


--------------------------------------------------------------------------------
/public/samples/sample-ad-click/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/sample-ad-signaling/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample VAST 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <script src="../../hls.js/adCreativeSignalingPlugin.js"></script>
  5 |   <style>
  6 |     video {
  7 |       height: 300px;
  8 |       width: 533px;
  9 |       background-color: black;
 10 |     }
 11 | 
 12 |     .video-container {
 13 |       display: flex;
 14 |       justify-content: center;
 15 |     }
 16 | 
 17 |     header {
 18 |       padding: 1rem;
 19 |       background-color: white;
 20 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 21 |     }
 22 | 
 23 |     .header-container {
 24 |       display: grid;
 25 |       grid-template-columns: repeat(3, 1fr);
 26 |       align-items: center;
 27 |     }
 28 | 
 29 |     .project-name {
 30 |       color: #63ba93;
 31 |       text-align: center;
 32 |     }
 33 | 
 34 |     body {
 35 |       margin: 0;
 36 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 37 |         Arial, sans-serif;
 38 |     }
 39 | 
 40 |     #logo {
 41 |       margin-right: auto;
 42 |     }
 43 | 
 44 |     .samples {
 45 |       max-width: 640px;
 46 |       margin: 0 auto;
 47 |       padding: 1rem;
 48 |     }
 49 | 
 50 |     .samples a {
 51 |       color: black;
 52 |       font-weight: 500;
 53 |     }
 54 | 
 55 |     .samples a:hover {
 56 |       color: #36b4a7;
 57 |       transition: ease-in-out 250ms;
 58 |     }
 59 | 
 60 |     .samples h1 {
 61 |       color: #36b4a7;
 62 |     }
 63 | 
 64 |     ul li:not(:last-child) {
 65 |       margin-bottom: 10px;
 66 |     }
 67 |   </style>
 68 | </head>
 69 | 
 70 | <body>
 71 |   <header>
 72 |     <div class="header-container">
 73 |       <a href="/">
 74 |         <img
 75 |           src="/logo.svg"
 76 |           alt="Company Logo"
 77 |           width="150"
 78 |           height="50"
 79 |           id="logo"
 80 |         />
 81 |       </a>
 82 |       <h1 class="project-name">VAST-2-SGAI</h1>
 83 |     </div>
 84 |   </header>
 85 |   <div class="samples">
 86 |     <h1>Sample VAST with Tracking Events</h1>
 87 |     <p>
 88 |       HLS, interstitial@5sec, 1 ad parsed form
 89 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 90 |     </p>
 91 |     <div class="video-container">
 92 |       <video id="video" controls></video>
 93 |     </div>
 94 |   </div>
 95 | 
 96 |   <script>
 97 |     if (Hls.isSupported()) {
 98 |       var video = document.getElementById("video");
 99 |       var hls = new Hls({
100 |         enableInterstitialPlayback: true,
101 |         interstitialAppendInPlace: true,
102 |         interstitialLiveLookAhead: 20,
103 |       });
104 | 
105 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
106 |         console.log("video and hls.js are now bound together !");
107 |       });
108 | 
109 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
110 |         console.log(
111 |           "manifest loaded, found " + data.levels.length + " quality level"
112 |         );
113 |       });
114 | 
115 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
116 |         console.log("INTERSTITIALS_UPDATED", data);
117 |       });
118 | 
119 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
120 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
121 |         console.log("hls interstitialsManager", hls.interstitialsManager);
122 |       });
123 | 
124 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
125 |         console.log("ASSET_LIST_LOADING", data);
126 |       });
127 | 
128 |       hls.on(Hls.Events.ERROR, (event, data) => {
129 |         console.log("ERROR", data);
130 |       });
131 | 
132 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
133 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
134 |       });
135 | 
136 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
137 |         console.log("ASSET_LIST_LOADED", data);
138 |       });
139 | 
140 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
141 |         console.log("INTERSTITIAL_STARTED", data);
142 |       });
143 | 
144 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
145 |         console.log("INTERSTITIAL_ENDED", data);
146 |       });
147 | 
148 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
149 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
150 |       });
151 | 
152 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
153 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
154 |       });
155 | 
156 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
157 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
158 |       });
159 | 
160 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
161 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
162 |       });
163 | 
164 |       hls.loadSource("main.m3u8?user=1234&content=abc");
165 | 
166 |       hls.attachMedia(video);
167 | 
168 |       const adSignalingManager = new AdSignalingManager(hls);
169 |     }
170 |   </script>
171 | </body>
172 | 


--------------------------------------------------------------------------------
/public/samples/sample-ad-signaling/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-jwt/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     .samples p {
 64 |       overflow: auto;
 65 |     }
 66 | 
 67 |     ul li:not(:last-child) {
 68 |       margin-bottom: 10px;
 69 |     }
 70 |   </style>
 71 | </head>
 72 | 
 73 | <body>
 74 |   <header>
 75 |     <div class="header-container">
 76 |       <a href="/">
 77 |         <img
 78 |           src="/logo.svg"
 79 |           alt="Company Logo"
 80 |           width="150"
 81 |           height="50"
 82 |           id="logo"
 83 |         />
 84 |       </a>
 85 |       <h1 class="project-name">VAST-2-SGAI</h1>
 86 |     </div>
 87 |   </header>
 88 |   <div class="samples">
 89 |     <h1>Sample API JWT</h1>
 90 |     <p>
 91 |       HLS, interstitial@5sec, 1 ad parsed form
 92 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 93 |     </p>
 94 |     <p>
 95 |       JWT Secret:
 96 |       251450bcd828e761eca58b28a4e15e9aa8fdc7e42579e8f9492303d0bbd10b21
 97 |     </p>
 98 |     <p>
 99 |       JWT:
100 |       eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvc2FtcGxlcy9zYW1wbGUtdmFzdC0xL3Zhc3Qtc2FtcGxlLnhtbCIsImlhdCI6MTczMzc3MzcxMiwiZXhwIjoyMDQ5MzQ5NzEyfQ.iliLPo-KgB4mCH6mLTrtGUtDy28dN_zZYDWV_xwU5sA
101 |     </p>
102 |     <p>
103 |       Use <a target="_blank" href="https://jwt.io/">jwt.io</a> to decode the JWT
104 |     </p>
105 |     <p>
106 |       API Call:
107 |       <a
108 |         href="/api/asset-list?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvc2FtcGxlcy9zYW1wbGUtdmFzdC0xL3Zhc3Qtc2FtcGxlLnhtbCIsImlhdCI6MTczMzc3MzcxMiwiZXhwIjoyMDQ5MzQ5NzEyfQ.iliLPo-KgB4mCH6mLTrtGUtDy28dN_zZYDWV_xwU5sA&test=false&user=1234&content=abcd"
109 |         >try out</a
110 |       >
111 |     </p>
112 | 
113 |     <div class="video-container">
114 |       <video id="video" controls></video>
115 |     </div>
116 |   </div>
117 | 
118 |   <script>
119 |     if (Hls.isSupported()) {
120 |       var video = document.getElementById("video");
121 |       var hls = new Hls({
122 |         enableInterstitialPlayback: true,
123 |         interstitialAppendInPlace: true,
124 |         interstitialLiveLookAhead: 20,
125 |       });
126 | 
127 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
128 |         console.log("video and hls.js are now bound together !");
129 |       });
130 | 
131 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
132 |         console.log(
133 |           "manifest loaded, found " + data.levels.length + " quality level"
134 |         );
135 |       });
136 | 
137 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
138 |         console.log("INTERSTITIALS_UPDATED", data);
139 |       });
140 | 
141 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
142 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
143 |         console.log("hls interstitialsManager", hls.interstitialsManager);
144 |       });
145 | 
146 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
147 |         console.log("ASSET_LIST_LOADING", data);
148 |       });
149 | 
150 |       hls.on(Hls.Events.ERROR, (event, data) => {
151 |         console.log("ERROR", data);
152 |       });
153 | 
154 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
155 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
156 |       });
157 | 
158 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
159 |         console.log("ASSET_LIST_LOADED", data);
160 |       });
161 | 
162 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
163 |         console.log("INTERSTITIAL_STARTED", data);
164 |       });
165 | 
166 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
167 |         console.log("INTERSTITIAL_ENDED", data);
168 |       });
169 | 
170 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
171 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
172 |       });
173 | 
174 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
175 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
176 |       });
177 | 
178 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
179 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
180 |       });
181 | 
182 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
183 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
184 |       });
185 | 
186 |       hls.loadSource("main.m3u8?user=1234&content=abc");
187 | 
188 |       hls.attachMedia(video);
189 |     }
190 |   </script>
191 | </body>
192 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-jwt/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vastid-live/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API VASTID (LIVE)</title>
  3 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  4 |   <script src="../../hls.js/hls.js"></script>
  5 |   <script src="../wse_api.js"></script>
  6 | <style>
  7 |     video {
  8 |       height: 300px;
  9 |       width: 533px;
 10 |       background-color: black;
 11 |     }
 12 | 
 13 |     .video-container {
 14 |       display: flex;
 15 |       justify-content: center;
 16 |     }
 17 | 
 18 |     header {
 19 |       padding: 1rem;
 20 |       background-color: white;
 21 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 22 |     }
 23 | 
 24 |     .header-container {
 25 |       display: grid;
 26 |       grid-template-columns: repeat(3, 1fr);
 27 |       align-items: center;
 28 |     }
 29 | 
 30 |     .project-name {
 31 |       color: #63ba93;
 32 |       text-align: center;
 33 |     }
 34 | 
 35 |     body {
 36 |       margin: 0;
 37 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 38 |         Arial, sans-serif;
 39 |     }
 40 | 
 41 |     #logo {
 42 |       margin-right: auto;
 43 |     }
 44 | 
 45 |     .samples {
 46 |       max-width: 640px;
 47 |       margin: 0 auto;
 48 |       padding: 1rem;
 49 |     }
 50 | 
 51 |     .samples a {
 52 |       color: black;
 53 |       font-weight: 500;
 54 |     }
 55 | 
 56 |     .samples a:hover {
 57 |       color: #36b4a7;
 58 |       transition: ease-in-out 250ms;
 59 |     }
 60 | 
 61 |     .samples h1 {
 62 |       color: #36b4a7;
 63 |     }
 64 | 
 65 |     ul li:not(:last-child) {
 66 |       margin-bottom: 10px;
 67 |     }
 68 |   </style>
 69 | </head>
 70 | 
 71 | <body>
 72 |   <header>
 73 |     <div class="header-container">
 74 |       <a href="/">
 75 |         <img
 76 |           src="/logo.svg"
 77 |           alt="Company Logo"
 78 |           width="150"
 79 |           height="50"
 80 |           id="logo"
 81 |         />
 82 |       </a>
 83 |       <h1 class="project-name">VAST-2-SGAI</h1>
 84 |     </div>
 85 |   </header>
 86 |   <div class="samples">
 87 |     <img src="/wse.png" height=40 style="vertical-align:middle" />
 88 |     <h1 style="display:inline;vertical-align:middle">Sample API VASTID (LIVE w/BBB)</h1>
 89 |     <p>
 90 |       HLS, live, 1 ad parsed form
 91 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 92 |     </p>
 93 |     <p>
 94 |       <b>Source: </b>BBB restreamed as live
 95 |     </p>
 96 |     <span style="display:inline">
 97 |       <button onclick="sendGetRequest('bbb','mystream')">Insert Ad</button>
 98 |       <button onclick="sendDeleteRequest('bbb','mystream')">Remove Ad</button>
 99 |     </span><br>
100 |     <span><b>API Event: </b><pre id="response" style="display:inline">...</pre></span><br>
101 |     <span><b>Current Time: </b><pre id="time" style="display:inline"></pre></span><br>
102 |     <span><b>Program Date Time: </b><pre id="program-date-time" style="display:inline">...</pre></span><br>
103 |     <span><b>Interstitial: </b><pre id="interstitial" style="display:inline">...</pre></span><br><br>    
104 |     <div class="video-container">
105 |       <video id="video" controls></video>
106 |     </div>
107 |   </div>
108 |   <script>
109 | 
110 |     if (Hls.isSupported()) {
111 |       var video = document.getElementById("video");
112 |       var hls = new Hls({
113 |         enableInterstitialPlayback: true,
114 |         interstitialAppendInPlace: true,
115 |         interstitialLiveLookAhead: 20,
116 |       });
117 | 
118 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
119 |         console.log("video and hls.js are now bound together !");
120 |       });
121 | 
122 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
123 |         console.log(
124 |           "manifest loaded, found " + data.levels.length + " quality level"
125 |         );
126 |       });
127 | 
128 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
129 |         console.log("INTERSTITIALS_UPDATED", data);
130 |         if(data.removedIds.length >= 1 ) {
131 |           $("#interstitial").text("...");
132 |         }
133 |       });
134 | 
135 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
136 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
137 |         console.log("hls interstitialsManager", hls.interstitialsManager);
138 |       });
139 | 
140 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
141 |         console.log("ASSET_LIST_LOADING", data);
142 |       });
143 | 
144 |       hls.on(Hls.Events.ERROR, (event, data) => {
145 |         console.log("ERROR", data);
146 |       });
147 | 
148 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
149 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
150 |         $("#interstitial").text(data.asset.parentIdentifier + " @" + data.event.dateRange._startDate);
151 |       });
152 | 
153 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
154 |         console.log("ASSET_LIST_LOADED", data);
155 |       });
156 | 
157 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
158 |         console.log("INTERSTITIAL_STARTED", data);
159 |       });
160 | 
161 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
162 |         console.log("INTERSTITIAL_ENDED", data);
163 |       });
164 | 
165 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
166 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
167 |       });
168 | 
169 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
170 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
171 |       });
172 | 
173 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
174 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
175 |       });
176 | 
177 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
178 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
179 |       });
180 | 
181 |       hls.loadSource("https://demo.entrypoint.cloud.wowza.com/bbb/mystream/chunklist_w225987628.m3u8?user=1234&content=abc");
182 | 
183 |       hls.attachMedia(video);
184 |       startTime();
185 |     }
186 |   </script>
187 | </body>
188 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vastid-live2/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  4 |   <script src="../../hls.js/hls.js"></script>
  5 |   <script src="../wse_api.js"></script>
  6 |   <style>
  7 |     video {
  8 |       height: 300px;
  9 |       width: 533px;
 10 |       background-color: black;
 11 |     }
 12 | 
 13 |     .video-container {
 14 |       display: flex;
 15 |       justify-content: center;
 16 |     }
 17 | 
 18 |     header {
 19 |       padding: 1rem;
 20 |       background-color: white;
 21 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 22 |     }
 23 | 
 24 |     .header-container {
 25 |       display: grid;
 26 |       grid-template-columns: repeat(3, 1fr);
 27 |       align-items: center;
 28 |     }
 29 | 
 30 |     .project-name {
 31 |       color: #63ba93;
 32 |       text-align: center;
 33 |     }
 34 | 
 35 |     body {
 36 |       margin: 0;
 37 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 38 |         Arial, sans-serif;
 39 |     }
 40 | 
 41 |     #logo {
 42 |       margin-right: auto;
 43 |     }
 44 | 
 45 |     .samples {
 46 |       max-width: 640px;
 47 |       margin: 0 auto;
 48 |       padding: 1rem;
 49 |     }
 50 | 
 51 |     .samples a {
 52 |       color: black;
 53 |       font-weight: 500;
 54 |     }
 55 | 
 56 |     .samples a:hover {
 57 |       color: #36b4a7;
 58 |       transition: ease-in-out 250ms;
 59 |     }
 60 | 
 61 |     .samples h1 {
 62 |       color: #36b4a7;
 63 |     }
 64 | 
 65 |     ul li:not(:last-child) {
 66 |       margin-bottom: 10px;
 67 |     }
 68 |   </style>
 69 | </head>
 70 | 
 71 | <body>
 72 |   <header>
 73 |     <div class="header-container">
 74 |       <a href="/">
 75 |         <img
 76 |           src="/logo.svg"
 77 |           alt="Company Logo"
 78 |           width="150"
 79 |           height="50"
 80 |           id="logo"
 81 |         />
 82 |       </a>
 83 |       <h1 class="project-name">VAST-2-SGAI</h1>
 84 |     </div>
 85 |   </header>
 86 |   <div class="samples">
 87 |     <img src="/wse.png" height=40 style="vertical-align:middle" />
 88 |     <h1 style="display:inline;vertical-align:middle">Sample API VASTID (LIVE w/WebRTC)</h1>
 89 |     <p>
 90 |       HLS, live, 1 ad parsed form
 91 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 92 |     </p>
 93 |     <p>
 94 |       <b>Source: </b>
 95 |       <a href="https://www.wowza.com/developer/webrtc/dev-view-publish?sdpURL=wss%3A%2F%2Fdemo.entrypoint.cloud.wowza.com%2Fwebrtc-session.json&applicationName=webrtc&streamName=mystream&audioBitrate=64&audioCodec=opus&videoBitrate=3500&videoCodec=42e01f&videoFrameRate=30&frameSize=default" target="webrtc">WebRTC Publish Page</a>
 96 |     </p>
 97 |     <span style="display:inline">
 98 |       <button onclick="sendGetRequest('webrtc','mystream')">Insert Ad</button>
 99 |       <button onclick="sendDeleteRequest('webrtc','mystream')">Remove Ad</button>
100 |     </span><br>
101 |     <span><b>API Event: </b><pre id="response" style="display:inline">...</pre></span><br>
102 |     <span><b>Current Time: </b><pre id="time" style="display:inline"></pre></span><br>
103 |     <span><b>Program Date Time: </b><pre id="program-date-time" style="display:inline">...</pre></span><br>
104 |     <span><b>Interstitial: </b><pre id="interstitial" style="display:inline">...</pre></span><br><br>    
105 |     <div class="video-container">
106 |       <video id="video" controls></video>
107 |     </div>
108 |   </div>
109 | 
110 |   <script>
111 |     if (Hls.isSupported()) {
112 |       var video = document.getElementById("video");
113 |       var hls = new Hls({
114 |         enableInterstitialPlayback: true,
115 |         interstitialAppendInPlace: true,
116 |         interstitialLiveLookAhead: 20,
117 |       });
118 | 
119 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
120 |         console.log("video and hls.js are now bound together !");
121 |       });
122 | 
123 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
124 |         console.log(
125 |           "manifest loaded, found " + data.levels.length + " quality level"
126 |         );
127 |       });
128 | 
129 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
130 |         console.log("INTERSTITIALS_UPDATED", data);
131 |         if(data.removedIds.length >= 1 ) {
132 |           $("#interstitial").text("...");
133 |         }
134 |       });
135 | 
136 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
137 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
138 |         console.log("hls interstitialsManager", hls.interstitialsManager);
139 |       });
140 | 
141 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
142 |         console.log("ASSET_LIST_LOADING", data);
143 |       });
144 | 
145 |       hls.on(Hls.Events.ERROR, (event, data) => {
146 |         console.log("ERROR", data);
147 |       });
148 | 
149 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
150 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
151 |         $("#interstitial").text(data.asset.parentIdentifier + " @" + data.event.dateRange._startDate);
152 |       });
153 | 
154 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
155 |         console.log("ASSET_LIST_LOADED", data);
156 |       });
157 | 
158 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
159 |         console.log("INTERSTITIAL_STARTED", data);
160 |       });
161 | 
162 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
163 |         console.log("INTERSTITIAL_ENDED", data);
164 |       });
165 | 
166 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
167 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
168 |       });
169 | 
170 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
171 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
172 |       });
173 | 
174 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
175 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
176 |       });
177 | 
178 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
179 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
180 |       });
181 | 
182 |       hls.loadSource("https://demo.entrypoint.cloud.wowza.com/webrtc/mystream/playlist.m3u8?user=1234&content=abc");
183 |       hls.attachMedia(video);
184 |       startTime();
185 |     }
186 |   </script>
187 | </body>
188 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vastid-live3/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  4 |   <script src="../../hls.js/hls.js"></script>
  5 |   <script src="../wse_api.js"></script>
  6 |   <style>
  7 |     video {
  8 |       height: 300px;
  9 |       width: 533px;
 10 |       background-color: black;
 11 |     }
 12 | 
 13 |     .video-container {
 14 |       display: flex;
 15 |       justify-content: center;
 16 |     }
 17 | 
 18 |     header {
 19 |       padding: 1rem;
 20 |       background-color: white;
 21 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 22 |     }
 23 | 
 24 |     .header-container {
 25 |       display: grid;
 26 |       grid-template-columns: repeat(3, 1fr);
 27 |       align-items: center;
 28 |     }
 29 | 
 30 |     .project-name {
 31 |       color: #63ba93;
 32 |       text-align: center;
 33 |     }
 34 | 
 35 |     body {
 36 |       margin: 0;
 37 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 38 |         Arial, sans-serif;
 39 |     }
 40 | 
 41 |     #logo {
 42 |       margin-right: auto;
 43 |     }
 44 | 
 45 |     .samples {
 46 |       max-width: 640px;
 47 |       margin: 0 auto;
 48 |       padding: 1rem;
 49 |     }
 50 | 
 51 |     .samples a {
 52 |       color: black;
 53 |       font-weight: 500;
 54 |     }
 55 | 
 56 |     .samples a:hover {
 57 |       color: #36b4a7;
 58 |       transition: ease-in-out 250ms;
 59 |     }
 60 | 
 61 |     .samples h1 {
 62 |       color: #36b4a7;
 63 |     }
 64 | 
 65 |     ul li:not(:last-child) {
 66 |       margin-bottom: 10px;
 67 |     }
 68 |   </style>
 69 | </head>
 70 | 
 71 | <body>
 72 |   <header>
 73 |     <div class="header-container">
 74 |       <a href="/">
 75 |         <img
 76 |           src="/logo.svg"
 77 |           alt="Company Logo"
 78 |           width="150"
 79 |           height="50"
 80 |           id="logo"
 81 |         />
 82 |       </a>
 83 |       <h1 class="project-name">VAST-2-SGAI</h1>
 84 |     </div>
 85 |   </header>
 86 |   <div class="samples">
 87 |     <img src="/wse.png" height=40 style="vertical-align:middle" />
 88 |     <h1 style="display:inline;vertical-align:middle">Sample API VASTID (LIVE w/rtsp Camera)</h1>
 89 |     <p>
 90 |       HLS, live, 1 ad parsed form
 91 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 92 |     </p>
 93 |     <p>
 94 |       <b>Source: </b>rtsp Camera
 95 |     </p>
 96 |     <span style="display:inline">
 97 |       <button onclick="sendGetRequest('camera','mystream.stream')">Insert Ad</button>
 98 |       <button onclick="sendDeleteRequest('camera','mystream.stream')">Remove Ad</button>
 99 |     </span><br>
100 |     <span><b>API Event: </b><pre id="response" style="display:inline">...</pre></span><br>
101 |     <span><b>Current Time: </b><pre id="time" style="display:inline"></pre></span><br>
102 |     <span><b>Program Date Time: </b><pre id="program-date-time" style="display:inline">...</pre></span><br>
103 |     <span><b>Interstitial: </b><pre id="interstitial" style="display:inline">...</pre></span><br><br>    
104 |     <div class="video-container">
105 |       <video id="video" controls></video>
106 |     </div>
107 |   </div>
108 | 
109 |   <script>
110 |     if (Hls.isSupported()) {
111 |       var video = document.getElementById("video");
112 |       var hls = new Hls({
113 |         enableInterstitialPlayback: true,
114 |         interstitialAppendInPlace: true,
115 |         interstitialLiveLookAhead: 20,
116 |       });
117 | 
118 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
119 |         console.log("video and hls.js are now bound together !");
120 |       });
121 | 
122 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
123 |         console.log(
124 |           "manifest loaded, found " + data.levels.length + " quality level"
125 |         );
126 |       });
127 | 
128 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
129 |         console.log("INTERSTITIALS_UPDATED", data);
130 |         if(data.removedIds.length >= 1 ) {
131 |           $("#interstitial").text("...");
132 |         }
133 |       });
134 | 
135 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
136 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
137 |         console.log("hls interstitialsManager", hls.interstitialsManager);
138 |       });
139 | 
140 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
141 |         console.log("ASSET_LIST_LOADING", data);
142 |       });
143 | 
144 |       hls.on(Hls.Events.ERROR, (event, data) => {
145 |         console.log("ERROR", data);
146 |       });
147 | 
148 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
149 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
150 |         $("#interstitial").text(data.asset.parentIdentifier + " @" + data.event.dateRange._startDate);
151 |       });
152 | 
153 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
154 |         console.log("ASSET_LIST_LOADED", data);
155 |       });
156 | 
157 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
158 |         console.log("INTERSTITIAL_STARTED", data);
159 |       });
160 | 
161 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
162 |         console.log("INTERSTITIAL_ENDED", data);
163 |       });
164 | 
165 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
166 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
167 |       });
168 | 
169 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
170 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
171 |       });
172 | 
173 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
174 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
175 |       });
176 | 
177 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
178 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
179 |       });
180 | 
181 |       hls.loadSource("https://demo.entrypoint.cloud.wowza.com/camera/mystream.stream/playlist.m3u8?user=1234&content=abc");
182 |       hls.attachMedia(video);
183 |       startTime();
184 |     }
185 |   </script>
186 | </body>
187 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vastid-live4/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  4 |   <script src="../../hls.js/hls.js"></script>
  5 |   <script src="../wse_api.js"></script>
  6 |   <style>
  7 |     video {
  8 |       height: 300px;
  9 |       width: 533px;
 10 |       background-color: black;
 11 |     }
 12 | 
 13 |     .video-container {
 14 |       display: flex;
 15 |       justify-content: center;
 16 |     }
 17 | 
 18 |     header {
 19 |       padding: 1rem;
 20 |       background-color: white;
 21 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 22 |     }
 23 | 
 24 |     .header-container {
 25 |       display: grid;
 26 |       grid-template-columns: repeat(3, 1fr);
 27 |       align-items: center;
 28 |     }
 29 | 
 30 |     .project-name {
 31 |       color: #63ba93;
 32 |       text-align: center;
 33 |     }
 34 | 
 35 |     body {
 36 |       margin: 0;
 37 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 38 |         Arial, sans-serif;
 39 |     }
 40 | 
 41 |     #logo {
 42 |       margin-right: auto;
 43 |     }
 44 | 
 45 |     .samples {
 46 |       max-width: 640px;
 47 |       margin: 0 auto;
 48 |       padding: 1rem;
 49 |     }
 50 | 
 51 |     .samples a {
 52 |       color: black;
 53 |       font-weight: 500;
 54 |     }
 55 | 
 56 |     .samples a:hover {
 57 |       color: #36b4a7;
 58 |       transition: ease-in-out 250ms;
 59 |     }
 60 | 
 61 |     .samples h1 {
 62 |       color: #36b4a7;
 63 |     }
 64 | 
 65 |     ul li:not(:last-child) {
 66 |       margin-bottom: 10px;
 67 |     }
 68 |   </style>
 69 | </head>
 70 | 
 71 | <body>
 72 |   <header>
 73 |     <div class="header-container">
 74 |       <a href="/">
 75 |         <img
 76 |           src="/logo.svg"
 77 |           alt="Company Logo"
 78 |           width="150"
 79 |           height="50"
 80 |           id="logo"
 81 |         />
 82 |       </a>
 83 |       <h1 class="project-name">VAST-2-SGAI</h1>
 84 |     </div>
 85 |   </header>
 86 |   <div class="samples">
 87 |     <img src="/wse.png" height=40 style="vertical-align:middle" />
 88 |     <h1 style="display:inline;vertical-align:middle">Sample API VASTID (LIVE w/rtmp)</h1>
 89 |     <p>
 90 |       HLS, live, 1 ad parsed form
 91 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 92 |     </p>
 93 |     <p>
 94 |       <b>Source: </b>rtmp <pre>ffmpeg -stats -re -f lavfi -i testsrc=size=1280x720,format=yuv420p -f lavfi -i anullsrc -vf "drawtext=fontsize=120:fontcolor=black:text='%{gmtime\:%T}':x=24:y=24,drawtext=fontsize=120:fontcolor=white:text='%{gmtime\:%T}':x=20:y=20"  -c:v libx264 -g 50 -c:a aac -f flv rtmp://demo.entrypoint.cloud.wowza.com/rtmp/mystream</pre>
 95 |     </p>
 96 |     <span style="display:inline">
 97 |       <button onclick="sendGetRequest('rtmp','mystream')">Insert Ad</button>
 98 |       <button onclick="sendDeleteRequest('rtmp','mystream')">Remove Ad</button>
 99 |     </span><br>
100 |     <span><b>API Event: </b><pre id="response" style="display:inline">...</pre></span><br>
101 |     <span><b>Current Time: </b><pre id="time" style="display:inline"></pre></span><br>
102 |     <span><b>Program Date Time: </b><pre id="program-date-time" style="display:inline">...</pre></span><br>
103 |     <span><b>Interstitial: </b><pre id="interstitial" style="display:inline">...</pre></span><br><br>    
104 |     <div class="video-container">
105 |       <video id="video" controls></video>
106 |     </div>
107 |   </div>
108 |   <script>
109 | 
110 |     if (Hls.isSupported()) {
111 |       var video = document.getElementById("video");
112 |       var hls = new Hls({
113 |         enableInterstitialPlayback: true,
114 |         interstitialAppendInPlace: true,
115 |         interstitialLiveLookAhead: 20,
116 |       });
117 | 
118 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
119 |         console.log("video and hls.js are now bound together !");
120 |       });
121 | 
122 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
123 |         console.log(
124 |           "manifest loaded, found " + data.levels.length + " quality level"
125 |         );
126 |       });
127 | 
128 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
129 |         console.log("INTERSTITIALS_UPDATED", data);
130 |         if(data.removedIds.length >= 1 ) {
131 |           $("#interstitial").text("...");
132 |         }
133 |       });
134 | 
135 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
136 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
137 |         console.log("hls interstitialsManager", hls.interstitialsManager);
138 |       });
139 | 
140 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
141 |         console.log("ASSET_LIST_LOADING", data);
142 |       });
143 | 
144 |       hls.on(Hls.Events.ERROR, (event, data) => {
145 |         console.log("ERROR", data);
146 |       });
147 | 
148 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
149 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
150 |         $("#interstitial").text(data.asset.parentIdentifier + " @" + data.event.dateRange._startDate);
151 |       });
152 | 
153 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
154 |         console.log("ASSET_LIST_LOADED", data);
155 |       });
156 | 
157 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
158 |         console.log("INTERSTITIAL_STARTED", data);
159 |       });
160 | 
161 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
162 |         console.log("INTERSTITIAL_ENDED", data);
163 |       });
164 | 
165 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
166 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
167 |       });
168 | 
169 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
170 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
171 |       });
172 | 
173 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
174 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
175 |       });
176 | 
177 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
178 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
179 |       });
180 | 
181 |       hls.loadSource("https://demo.entrypoint.cloud.wowza.com/rtmp/mystream/playlist.m3u8?user=1234&content=abc");
182 |       hls.attachMedia(video);
183 |       startTime();
184 |     }
185 |   </script>
186 | </body>
187 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vastid/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     ul li:not(:last-child) {
 64 |       margin-bottom: 10px;
 65 |     }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <header>
 71 |     <div class="header-container">
 72 |       <a href="/">
 73 |         <img
 74 |           src="/logo.svg"
 75 |           alt="Company Logo"
 76 |           width="150"
 77 |           height="50"
 78 |           id="logo"
 79 |         />
 80 |       </a>
 81 |       <h1 class="project-name">VAST-2-SGAI</h1>
 82 |     </div>
 83 |   </header>
 84 |   <div class="samples">
 85 |     <h1>Sample API VASTID</h1>
 86 |     <p>
 87 |       HLS, interstitial@5sec, 1 ad parsed form
 88 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 89 |     </p>
 90 |     <p>
 91 |       API Call:
 92 |       <a href="/api/asset-list?vastid=1&test=false&user=1234&content=abcd"
 93 |         >try out</a
 94 |       >
 95 |     </p>
 96 | 
 97 |     <div class="video-container">
 98 |       <video id="video" controls></video>
 99 |     </div>
100 |   </div>
101 | 
102 |   <script>
103 |     if (Hls.isSupported()) {
104 |       var video = document.getElementById("video");
105 |       var hls = new Hls({
106 |         enableInterstitialPlayback: true,
107 |         interstitialAppendInPlace: true,
108 |         interstitialLiveLookAhead: 20,
109 |       });
110 | 
111 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
112 |         console.log("video and hls.js are now bound together !");
113 |       });
114 | 
115 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
116 |         console.log(
117 |           "manifest loaded, found " + data.levels.length + " quality level"
118 |         );
119 |       });
120 | 
121 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
122 |         console.log("INTERSTITIALS_UPDATED", data);
123 |       });
124 | 
125 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
126 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
127 |         console.log("hls interstitialsManager", hls.interstitialsManager);
128 |       });
129 | 
130 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
131 |         console.log("ASSET_LIST_LOADING", data);
132 |       });
133 | 
134 |       hls.on(Hls.Events.ERROR, (event, data) => {
135 |         console.log("ERROR", data);
136 |       });
137 | 
138 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
139 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
140 |       });
141 | 
142 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
143 |         console.log("ASSET_LIST_LOADED", data);
144 |       });
145 | 
146 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
147 |         console.log("INTERSTITIAL_STARTED", data);
148 |       });
149 | 
150 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
151 |         console.log("INTERSTITIAL_ENDED", data);
152 |       });
153 | 
154 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
155 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
156 |       });
157 | 
158 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
159 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
160 |       });
161 | 
162 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
163 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
164 |       });
165 | 
166 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
167 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
168 |       });
169 | 
170 |       hls.loadSource("main.m3u8?user=1234&content=abc");
171 | 
172 |       hls.attachMedia(video);
173 |     }
174 |   </script>
175 | </body>
176 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vastid/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vasturl/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample API 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     ul li:not(:last-child) {
 64 |       margin-bottom: 10px;
 65 |     }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <header>
 71 |     <div class="header-container">
 72 |       <a href="/">
 73 |         <img
 74 |           src="/logo.svg"
 75 |           alt="Company Logo"
 76 |           width="150"
 77 |           height="50"
 78 |           id="logo"
 79 |         />
 80 |       </a>
 81 |       <h1 class="project-name">VAST-2-SGAI</h1>
 82 |     </div>
 83 |   </header>
 84 |   <div class="samples">
 85 |     <h1>Sample API VASTURL</h1>
 86 |     <p>
 87 |       HLS, interstitial@5sec, 1 ad parsed form
 88 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 89 |     </p>
 90 |     <p>
 91 |       API Call:
 92 |       <a
 93 |         href="/api/asset-list?vasturl=http://localhost:3000/samples/sample-vast-1/vast-sample.xml&test=false&user=1234&content=abcd"
 94 |         >try out</a
 95 |       >
 96 |     </p>
 97 | 
 98 |     <div class="video-container">
 99 |       <video id="video" controls></video>
100 |     </div>
101 |   </div>
102 | 
103 |   <script>
104 |     if (Hls.isSupported()) {
105 |       var video = document.getElementById("video");
106 |       var hls = new Hls({
107 |         enableInterstitialPlayback: true,
108 |         interstitialAppendInPlace: true,
109 |         interstitialLiveLookAhead: 20,
110 |       });
111 | 
112 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
113 |         console.log("video and hls.js are now bound together !");
114 |       });
115 | 
116 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
117 |         console.log(
118 |           "manifest loaded, found " + data.levels.length + " quality level"
119 |         );
120 |       });
121 | 
122 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
123 |         console.log("INTERSTITIALS_UPDATED", data);
124 |       });
125 | 
126 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
127 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
128 |         console.log("hls interstitialsManager", hls.interstitialsManager);
129 |       });
130 | 
131 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
132 |         console.log("ASSET_LIST_LOADING", data);
133 |       });
134 | 
135 |       hls.on(Hls.Events.ERROR, (event, data) => {
136 |         console.log("ERROR", data);
137 |       });
138 | 
139 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
140 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
141 |       });
142 | 
143 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
144 |         console.log("ASSET_LIST_LOADED", data);
145 |       });
146 | 
147 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
148 |         console.log("INTERSTITIAL_STARTED", data);
149 |       });
150 | 
151 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
152 |         console.log("INTERSTITIAL_ENDED", data);
153 |       });
154 | 
155 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
156 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
157 |       });
158 | 
159 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
160 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
161 |       });
162 | 
163 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
164 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
165 |       });
166 | 
167 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
168 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
169 |       });
170 | 
171 |       hls.loadSource("main.m3u8?user=1234&content=abc");
172 | 
173 |       hls.attachMedia(video);
174 |     }
175 |   </script>
176 | </body>
177 | 


--------------------------------------------------------------------------------
/public/samples/sample-api-vasturl/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/sample-edit-vast/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>Sample VAST 1</title>
  7 |   <script src="../../hls.js/hls.js"></script>
  8 |   <script src="../../hls.js/adCreativeSignalingPlugin.js"></script>
  9 |   <script src="../../hls.js/videoClicksPlugin.js"></script>
 10 |   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
 11 |   <style>
 12 |     body {
 13 |       margin: 0;
 14 |       font-family: 'Arial', sans-serif;
 15 |       background-color: #f9f9f9;
 16 |       color: #333;
 17 |     }
 18 | 
 19 |     video {
 20 |       height: 300px;
 21 |       width: 533px;
 22 |       background-color: black;
 23 |     }
 24 | 
 25 |     .video-container {
 26 |       display: flex;
 27 |       justify-content: center;
 28 |       margin-top: 20px;
 29 |     }
 30 | 
 31 |     header {
 32 |       padding: 1rem;
 33 |       background-color: #ffffff;
 34 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 35 |     }
 36 | 
 37 |     .header-container {
 38 |       display: grid;
 39 |       grid-template-columns: repeat(3, 1fr);
 40 |       align-items: center;
 41 |     }
 42 | 
 43 |     .project-name {
 44 |       color: #36b4a7;
 45 |       text-align: center;
 46 |       font-weight: bold;
 47 |     }
 48 | 
 49 |     .samples {
 50 |       max-width: 90%;
 51 |       margin: 2rem auto;
 52 |       background: #ffffff;
 53 |       padding: 2rem;
 54 |       border-radius: 10px;
 55 |       box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
 56 |     }
 57 | 
 58 |     .samples h1 {
 59 |       color: #36b4a7;
 60 |       margin-bottom: 1.5rem;
 61 |       text-align: center;
 62 |     }
 63 | 
 64 |     .inputs-container {
 65 |       display: flex;
 66 |       flex-direction: column;
 67 |       margin-top: 20px;
 68 |     }
 69 | 
 70 |     .inputs-container input {
 71 |       margin-bottom: 8px;
 72 |       padding: 6px;
 73 |       font-size: 12px;
 74 |       border: 1px solid #ddd;
 75 |       border-radius: 6px;
 76 |       box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
 77 |       transition: border-color 0.3s ease, box-shadow 0.3s ease;
 78 |       width: 100%; /* Ensures inputs take full width of the container */
 79 |       box-sizing: border-box; /* Prevents inputs from exceeding container size */
 80 |       overflow: hidden; /* Prevents scrolling inside inputs */
 81 |     }
 82 | 
 83 |     .inputs-container input:focus {
 84 |       border-color: #36b4a7;
 85 |       box-shadow: 0 0 3px rgba(54, 180, 167, 0.6);
 86 |       outline: none;
 87 |     }
 88 | 
 89 |     .inputs-container button {
 90 |       padding: 10px;
 91 |       font-size: 14px;
 92 |       background-color: #36b4a7;
 93 |       color: white;
 94 |       border: none;
 95 |       cursor: pointer;
 96 |       border-radius: 6px;
 97 |       box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
 98 |       transition: background-color 0.3s ease, box-shadow 0.3s ease;
 99 |       width: 100%; /* Button will align with input widths */
100 |     }
101 | 
102 |     .inputs-container button:hover {
103 |       background-color: #2a8d7d;
104 |       box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
105 |     }
106 | 
107 | 
108 |     @keyframes spin {
109 |       0% {
110 |         transform: rotate(0deg);
111 |       }
112 | 
113 |       100% {
114 |         transform: rotate(360deg);
115 |       }
116 |     }
117 | 
118 |     .side-by-side {
119 |       display: flex;
120 |       justify-content: space-between;
121 |       margin-top: 20px;
122 |     }
123 | 
124 |     .side-by-side .box {
125 |       width: 48%;
126 |       padding: 15px;
127 |       background: #f4f4f4;
128 |       border-radius: 8px;
129 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
130 |       overflow-y: auto; 
131 |       max-height: 400px;
132 |     }
133 | 
134 |     .side-by-side .box pre {
135 |       font-size: 14px;
136 |       white-space: pre-wrap;
137 |       word-wrap: break-word;
138 |       color: #333;
139 |       background: #f4f4f4;
140 |       padding: 10px;
141 |     }
142 | 
143 |     .video-container video {
144 |       width: 100%;
145 |       height: 100%;
146 |     }
147 |     
148 |   </style>
149 | </head>
150 | <body>
151 |   <header>
152 |     <div class="header-container">
153 |       <a href="/">
154 |         <img src="/logo.svg" alt="Company Logo" width="150" height="50" id="logo" />
155 |       </a>
156 |       <h1 class="project-name">VAST-2-SGAI</h1>
157 |     </div>
158 |   </header>
159 |   <div class="side-by-side">
160 |     <div class="box inputs-container">
161 |       <h2>Try your own VAST!</h2>
162 |       <label for="duration-input">Ad slot duration:</label>
163 |       <input id="duration-input" type="text" placeholder="Enter duration (in seconds)" value="10" />
164 |       <label for="startdate-input">Start Date:</label>
165 |       <input id="startdate-input" type="text" placeholder="Enter start date" value="2024-11-13T13:55:00.000Z" />
166 |       <label for="resumeoffset-input">Resume Offset:</label>
167 |       <input id="resumeoffset-input" type="text" placeholder="Resume Offset" value="0" />
168 |       <label for="restrict-input">Restrict: </label>
169 |       <input id="restrict-input" type="text" placeholder="Restrict Offset" value="SKIP, JUMP" />
170 |       <label for="vast-url-input">
171 |         VAST file URL <br>
172 |         <small>(The provided VAST file MUST have at least one m3u8 media file.)</small>
173 |       </label>
174 |       <input id="vast-url-input" type="text" placeholder="Enter VAST URL"
175 |         value="https://vast2sgai.qualabs.com/samples/sample-vast-1/vast-sample.xml" />
176 |       <button id="load-video">Load Video</button>
177 |     </div>
178 |     <div id="player-container" class="box video-container">
179 |       <video id="video" controls></video>
180 |     </div>
181 |   </div>
182 |   <div class="side-by-side">
183 |     <div class="box" id="vast-file">
184 |       <h3>VAST File</h3>
185 |       <pre><code id="vast-content" class="language-xml">Waiting for VAST file...</code></pre>
186 | 
187 |     </div>
188 |     <div class="box" id="hls-assets">
189 |       <h3>Parsed Asset List</h3>
190 |       <pre><code id="assets-list" class="language-json">Waiting for asset-list...</code></pre>
191 |     </div>
192 |   </div>
193 |   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
194 |   <script>
195 |     hljs.highlightAll();
196 | 
197 |     if (Hls.isSupported()) {
198 |       const video = document.getElementById("video");
199 |       const vastContent = document.getElementById("vast-content");
200 |       const assetsList = document.getElementById("assets-list");
201 |       document.getElementById("load-video").addEventListener("click", () => {
202 |         const hls = new Hls({
203 |           enableInterstitialPlayback: true,
204 |           interstitialAppendInPlace: true,
205 |           interstitialLiveLookAhead: 20,
206 |         });
207 |         const duration = document.getElementById("duration-input").value;
208 |         const vastUrl = document.getElementById("vast-url-input").value;
209 |         const startDate = document.getElementById("startdate-input").value;
210 |         const resumeOffset = document.getElementById("resumeoffset-input").value;
211 |         const restrict = document.getElementById("restrict-input").value;
212 |         if (!duration || !vastUrl) {
213 |           alert("Please fill in both fields!");
214 |           return;
215 |         }
216 | 
217 |         const sourceUrl = `main.m3u8?` +
218 |           `duration=${encodeURIComponent(duration)}&` +
219 |           `vasturl=${encodeURIComponent(vastUrl)}&` +
220 |           `startDate=${encodeURIComponent(startDate)}&` +
221 |           `resumeOffset=${encodeURIComponent(resumeOffset)}&` +
222 |           `restrict=${encodeURIComponent(restrict)}`;        hls.loadSource(sourceUrl);
223 | 
224 |         hls.attachMedia(video);
225 |         
226 |         fetch(vastUrl)
227 |           .then(response => response.text())
228 |           .then(data => {
229 |             vastContent.textContent = data;
230 |             hljs.highlightElement(vastContent);
231 |           })
232 |           .catch(error => {
233 |             vastContent.textContent = "Failed to load VAST file.";
234 |             console.error(error);
235 |           });
236 |           
237 |           hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (_, data) => {
238 |             console.log("Received INTERSTITIAL_ASSET_STARTED event:", data);
239 |             const assetListResponse = data.event?.assetListResponse;
240 | 
241 |             if (!assetListResponse || !assetListResponse.ASSETS?.length) {
242 |               console.warn("No valid assets found in the response.");
243 |               assetsList.textContent = "No valid assets found in the response.";
244 |               return;
245 |             }
246 |             assetsList.textContent = JSON.stringify(assetListResponse, null, 2);
247 |             hljs.highlightElement(assetsList);
248 | 
249 |             console.log("Asset List Updated:", assetListResponse);
250 |         });
251 | 
252 |         hls.on(Hls.Events.MEDIA_ATTACHED, function () {
253 |           console.log("video and hls.js are now bound together !");
254 |         });
255 |         hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
256 |           console.log("manifest loaded, found " + data.levels.length + " quality level");
257 |         });
258 |         hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
259 |           console.log("INTERSTITIALS_UPDATED", data);
260 |         });
261 |         hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
262 |           console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
263 |           console.log("hls interstitialsManager", hls.interstitialsManager);
264 |         });
265 |         hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
266 |           console.log("ASSET_LIST_LOADING", data);
267 |         });
268 |         hls.on(Hls.Events.ERROR, (event, data) => {
269 |           console.log("ERROR", data);
270 |         });
271 |         hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
272 |           console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
273 |         });
274 |         hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
275 |           console.log("ASSET_LIST_LOADED", data);
276 |         });
277 |         hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
278 |           console.log("INTERSTITIAL_STARTED", data);
279 |         });
280 |         hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
281 |           console.log("INTERSTITIAL_ENDED", data);
282 |         });
283 |         hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
284 |           console.log("INTERSTITIAL_ASSET_STARTED", data);
285 |         });
286 |         hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
287 |           console.log("INTERSTITIAL_ASSET_ENDED", data);
288 |         });
289 |         hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
290 |           console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
291 |         });
292 |         hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
293 |           console.log("INTERSTITIAL_ASSET_ERROR", data);
294 |         });
295 |         const adSignalingManager = new AdSignalingManager(hls);
296 |         const videoClicksPlugin = new VideoClicksPlugin(hls, {
297 |           container: document.getElementById("player-container")
298 |         });
299 |       });
300 |     }
301 |   </script>
302 | </body>
303 | </html>


--------------------------------------------------------------------------------
/public/samples/sample-edit-vast/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="duration"
 3 | #EXT-X-DEFINE:QUERYPARAM="vasturl"
 4 | #EXT-X-DEFINE:QUERYPARAM="startDate"
 5 | #EXT-X-DEFINE:QUERYPARAM="resumeOffset"
 6 | #EXT-X-DEFINE:QUERYPARAM="restrict"
 7 | 
 8 | 
 9 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
10 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
11 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
12 | 
13 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
14 | video/800kbit.m3u8?duration={$duration}&vasturl={$vasturl}&startDate={$startDate}&resumeOffset={$resumeOffset}&restrict={$restrict}
15 | 
16 | #EXT-X-ENDLIST
17 | 
18 | 
19 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-1/index.html:
--------------------------------------------------------------------------------
  1 | <head>
  2 |   <title>Sample VAST 1</title>
  3 |   <script src="../../hls.js/hls.js"></script>
  4 |   <style>
  5 |     video {
  6 |       height: 300px;
  7 |       width: 533px;
  8 |       background-color: black;
  9 |     }
 10 | 
 11 |     .video-container {
 12 |       display: flex;
 13 |       justify-content: center;
 14 |     }
 15 | 
 16 |     header {
 17 |       padding: 1rem;
 18 |       background-color: white;
 19 |       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 20 |     }
 21 | 
 22 |     .header-container {
 23 |       display: grid;
 24 |       grid-template-columns: repeat(3, 1fr);
 25 |       align-items: center;
 26 |     }
 27 | 
 28 |     .project-name {
 29 |       color: #63ba93;
 30 |       text-align: center;
 31 |     }
 32 | 
 33 |     body {
 34 |       margin: 0;
 35 |       font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica,
 36 |         Arial, sans-serif;
 37 |     }
 38 | 
 39 |     #logo {
 40 |       margin-right: auto;
 41 |     }
 42 | 
 43 |     .samples {
 44 |       max-width: 640px;
 45 |       margin: 0 auto;
 46 |       padding: 1rem;
 47 |     }
 48 | 
 49 |     .samples a {
 50 |       color: black;
 51 |       font-weight: 500;
 52 |     }
 53 | 
 54 |     .samples a:hover {
 55 |       color: #36b4a7;
 56 |       transition: ease-in-out 250ms;
 57 |     }
 58 | 
 59 |     .samples h1 {
 60 |       color: #36b4a7;
 61 |     }
 62 | 
 63 |     ul li:not(:last-child) {
 64 |       margin-bottom: 10px;
 65 |     }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <header>
 71 |     <div class="header-container">
 72 |       <a href="/">
 73 |         <img
 74 |           src="/logo.svg"
 75 |           alt="Company Logo"
 76 |           width="150"
 77 |           height="50"
 78 |           id="logo"
 79 |         />
 80 |       </a>
 81 |       <h1 class="project-name">VAST-2-SGAI</h1>
 82 |     </div>
 83 |   </header>
 84 |   <div class="samples">
 85 |     <h1>Sample VAST 1</h1>
 86 |     <p>
 87 |       HLS, interstitial@5sec, 1 ad parsed form
 88 |       <a href="vast-sample.xml">this Google IMA VAST example</a>
 89 |     </p>
 90 | 
 91 |     <div class="video-container">
 92 |       <video id="video" controls></video>
 93 |     </div>
 94 |   </div>
 95 | 
 96 |   <script>
 97 |     if (Hls.isSupported()) {
 98 |       var video = document.getElementById("video");
 99 |       var hls = new Hls({
100 |         enableInterstitialPlayback: true,
101 |         interstitialAppendInPlace: true,
102 |         interstitialLiveLookAhead: 20,
103 |       });
104 | 
105 |       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
106 |         console.log("video and hls.js are now bound together !");
107 |       });
108 | 
109 |       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
110 |         console.log(
111 |           "manifest loaded, found " + data.levels.length + " quality level"
112 |         );
113 |       });
114 | 
115 |       hls.on(Hls.Events.INTERSTITIALS_UPDATED, (event, data) => {
116 |         console.log("INTERSTITIALS_UPDATED", data);
117 |       });
118 | 
119 |       hls.on(Hls.Events.INTERSTITIALS_BUFFERED_TO_BOUNDARY, (event, data) => {
120 |         console.log("INTERSTITIALS_BUFFERED_TO_BOUNDARY", data);
121 |         console.log("hls interstitialsManager", hls.interstitialsManager);
122 |       });
123 | 
124 |       hls.on(Hls.Events.ASSET_LIST_LOADING, (event, data) => {
125 |         console.log("ASSET_LIST_LOADING", data);
126 |       });
127 | 
128 |       hls.on(Hls.Events.ERROR, (event, data) => {
129 |         console.log("ERROR", data);
130 |       });
131 | 
132 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_PLAYER_CREATED, (event, data) => {
133 |         console.log("INTERSTITIAL_ASSET_PLAYER_CREATED", data);
134 |       });
135 | 
136 |       hls.on(Hls.Events.ASSET_LIST_LOADED, (event, data) => {
137 |         console.log("ASSET_LIST_LOADED", data);
138 |       });
139 | 
140 |       hls.on(Hls.Events.INTERSTITIAL_STARTED, (event, data) => {
141 |         console.log("INTERSTITIAL_STARTED", data);
142 |       });
143 | 
144 |       hls.on(Hls.Events.INTERSTITIAL_ENDED, (event, data) => {
145 |         console.log("INTERSTITIAL_ENDED", data);
146 |       });
147 | 
148 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_STARTED, (event, data) => {
149 |         console.log("INTERSTITIAL_ASSET_STARTED", data);
150 |       });
151 | 
152 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ENDED, (event, data) => {
153 |         console.log("INTERSTITIAL_ASSET_ENDED", data);
154 |       });
155 | 
156 |       hls.on(Hls.Events.INTERSTITIALS_PRIMARY_RESUMED, (event, data) => {
157 |         console.log("INTERSTITIALS_PRIMARY_RESUMED", data);
158 |       });
159 | 
160 |       hls.on(Hls.Events.INTERSTITIAL_ASSET_ERROR, (event, data) => {
161 |         console.log("INTERSTITIAL_ASSET_ERROR", data);
162 |       });
163 | 
164 |       hls.loadSource("main.m3u8?user=1234&content=abc");
165 | 
166 |       hls.attachMedia(video);
167 |     }
168 |   </script>
169 | </body>
170 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-1/main.m3u8:
--------------------------------------------------------------------------------
 1 | #EXTM3U
 2 | #EXT-X-DEFINE:QUERYPARAM="user"
 3 | #EXT-X-DEFINE:QUERYPARAM="content"
 4 | 
 5 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="en",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="audio/stereo/en/128kbit.m3u8"
 6 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="stereo",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 7 | #EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="surround",LANGUAGE="dubbing",NAME="Dubbing",DEFAULT=NO,AUTOSELECT=YES,URI="audio/stereo/none/128kbit.m3u8"
 8 | 
 9 | #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=831270,CODECS="avc1.4d4015,mp4a.40.2",AUDIO="stereo",RESOLUTION=638x272
10 | video/800kbit.m3u8?user={$user}&content={$content}
11 | 
12 | #EXT-X-ENDLIST
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_01_15s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="111">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="111111111" AdID="A11111111" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:15</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad02_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad02_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad02_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_02_30s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="222">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="22222222" AdID="A22222222" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:30</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad01_30s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad01_30s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad01_30s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_03_30s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="333">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="33333333" AdID="A33333333" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:30</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad01_30s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad01_30s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad01_30s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_04_15s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="444">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="44444444" AdID="A44444444" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:15</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad04_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad04_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad04_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_05_15s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="888">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="55555555" AdID="A55555555" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:15</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad05_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad05_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad05_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_06-7_30s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="666">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Double Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="66666666" AdID="A66666666" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:15</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad06_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad06_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad06_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad>
45 |  <Ad id="777">
46 |   <InLine>
47 |    <AdSystem>Sample</AdSystem>
48 |    <AdTitle>External - Double Inline Linear</AdTitle>
49 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
50 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
51 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
52 |    <Creatives>
53 |     <Creative id="77777777" AdID="A77777777" sequence="2">
54 |      <Linear>
55 |       <Duration>00:00:15</Duration>
56 |       <TrackingEvents>
57 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
58 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
59 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
60 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
61 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
62 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
63 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
64 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
65 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
66 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
67 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
68 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
69 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
70 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
71 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
72 |       </TrackingEvents>
73 |       <VideoClicks>
74 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
75 |       </VideoClicks>
76 |       
77 |       <MediaFiles>
78 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad07_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
79 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad07_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
80 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad07_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
81 |       </MediaFiles>
82 |      </Linear>
83 |     </Creative>
84 |    </Creatives>
85 |   </InLine>
86 |  </Ad>
87 | </VAST>
88 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_08_15s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="888">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="88888888" AdID="A88888888" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:15</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad08_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad08_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad08_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/sample-vast-set/vast_09_15s.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="4.0">
 3 |  <Ad id="999">
 4 |   <InLine>
 5 |    <AdSystem>Sample</AdSystem>
 6 |    <AdTitle>External - Single Inline Linear</AdTitle>
 7 |    <Description><![CDATA[External - Single Inline Linear ad]]></Description>
 8 |    <Error><![CDATA[https://pubads.g.doubleclick.net/pagead/interaction/?ai=BBKW5CfJEZ62IDvyV9cYP7YKIiA6D6qWVRgAAABABII64hW84AViLgsbBgwRg2wa6AQo3Mjh4OTBfeG1syAEFwAIC4AIA6gInLzIxNzc1NzQ0OTIzL2V4dGVybmFsL3NpbmdsZV9hZF9zYW1wbGVz-ALw0R6AAwGQA5wEmAOkA6gDAeAEAdIFBhCPpcSJFpAGAaAGI6gHuL6xAqgHmgaoB5fFsQKoB_PRG6gHltgbqAeqm7ECqAeDrbECqAfgvbECqAf_nrECqAffn7ECqAf4wrECqAf7wrEC2AcB4AcB0ggmCIBhEAEYHTICigI6C4BAgMCAgICgqIACSL39wTpYuJG1sbz4iQPYCAKACgWYCwGqDQJVWeoNEwiEw7WxvPiJAxX8St0CHW0BAuHQFQH4FgGAFwE&sigh=xlYT2MSskww&label=videoplayfailed[ERRORCODE]]]></Error>
 9 |    <Impression><![CDATA[https://securepubads.g.doubleclick.net/pcs/view?xai=AKAOjsuCfL3ZNnhbg_a7-O_u_52rNU2ZH0wzjDK6p8RvSjVabfBCemoZkWfh_ufofi42_EaMwjnAm6izNSwMtjw4zjL_ldJwRngv69pnX8JHygflwwIbWTfvf7UjiDzRRdqTPtdEXYPta2FekCo5xk3dJaG5cC3Rpg1SyERW_45Oi_aEJgRj0yPwi6k8PTEZyEMvDSivnxg6ugHgNC4t0vcmshEXIMzrrjBR_1zdABGl1uekICltnEszbh0OGebSfK0-OXYVKWrsRlLTuetLrCnMSg5ryiJgBgQqy0Ru-EatGOrJImUi_DQhTZOkpuMiA2VjVUfN3Bjxvh2EQj35XwZ-fzVE9HiO1UhbDEcl_mbl0K_4m4jKKASBhtLGpQEY4vUnJS0T&sai=AMfl-YQ7B8i4NrbUfQ9S187Usq3gXFnsUoeKRdRr64CWpefMsisLtzciK-YF7EvXx8xHlLT5Mmgld1EiWF92&sig=Cg0ArKJSzEtPlPUBNDbREAE&uach_m=%5BUACH%5D&adurl=]]></Impression>
10 |    <Creatives>
11 |     <Creative id="99999999" AdID="A99999999" sequence="1">
12 |      <Linear>
13 |       <Duration>00:00:15</Duration>
14 |       <TrackingEvents>
15 |        <Tracking event="start"><![CDATA[http://localhost:8000/?event=start]]></Tracking>
16 |        <Tracking event="firstQuartile"><![CDATA[http://localhost:8000/?event=firstQuartile]]></Tracking>
17 |        <Tracking event="midpoint"><![CDATA[http://localhost:8000/?event=midpoint]]></Tracking>
18 |        <Tracking event="thirdQuartile"><![CDATA[http://localhost:8000/?event=thirdQuartile]]></Tracking>
19 |        <Tracking event="complete"><![CDATA[http://localhost:8000/?event=complete]]></Tracking>
20 |        <Tracking event="mute"><![CDATA[http://localhost:8000/?event=mute]]></Tracking>
21 |        <Tracking event="unmute"><![CDATA[http://localhost:8000/?event=unmute]]></Tracking>
22 |        <Tracking event="rewind"><![CDATA[http://localhost:8000/?event=rewind]]></Tracking>
23 |        <Tracking event="pause"><![CDATA[http://localhost:8000/?event=pause]]></Tracking>
24 |        <Tracking event="resume"><![CDATA[http://localhost:8000/?event=resume]]></Tracking>
25 |        <Tracking event="creativeView"><![CDATA[http://localhost:8000/?event=creativeView]]></Tracking>
26 |        <Tracking event="fullscreen"><![CDATA[http://localhost:8000/?event=fullscreen]]></Tracking>
27 |        <Tracking event="acceptInvitationLinear"><![CDATA[http://localhost:8000/?event=acceptInvitationLinear]]></Tracking>
28 |        <Tracking event="closeLinear"><![CDATA[http://localhost:8000/?event=closeLinear]]></Tracking>
29 |        <Tracking event="exitFullscreen"><![CDATA[http://localhost:8000/?event=exitFullscreen]]></Tracking>
30 |       </TrackingEvents>
31 |       <VideoClicks>
32 |        <ClickThrough id="GDFP"><![CDATA[https://pubads.g.doubleclick.net/pcs/click?xai=AKAOjstxAPF4SZnn9lWQUI2tmCNyzbKk-0JnxSiAXSpuS8JiOQ8Jq7G2Ddo-sd6NprqcRGw4TyhC4e-JtiqZq5ZyIuqCfyhPiGXDaN7YOBWcaqIMlLPRGaJthOOa1bc4suuBlCuqovdhNlUgAgjn0fxehHODfc12ZQYmKhomhS0PFqwV1F0eQEUNQXqlnuQadbpdrXnsOzD3T32hudbqJRBPHoPaxbhB37HppdA29rrw0jwcFg9iR3l3tAymjUQq618KtR7FC6gEM-Sk3-NBEjeLO8MCk2XhVuTcDEkgNz1DaMQ2ah0EpuP70VfxyIn9nkXuScpQt-eEcVoa59qjnCIkyo1T2g3Pp4P4uC1J380KV5g83hOU&sai=AMfl-YSBya7Y7IUK4BcI3zUIECXHKDBOJs5xNQrJwHJHp4vMAkLWBnPUbCMOAdckTJtgsS_tPeoQFf18ngGt&sig=Cg0ArKJSzHVI0ajoHYe0&fbs_aeid=%5Bgw_fbsaeid%5D&adurl=https://googleads.github.io/googleads-ima-html5/vsi/]]></ClickThrough>
33 |       </VideoClicks>
34 |       
35 |       <MediaFiles>
36 |        <MediaFile id="GDFP" delivery="progressive" width="1280" height="720" type="video/mp4" bitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad09_15s/hls_manifests/master_manifest.mp4]]></MediaFile>
37 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/x-mpegURL" minBitrate="800" maxBitrate="2200" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad09_15s/hls_manifests/master_manifest.m3u8]]></MediaFile>
38 |        <MediaFile id="GDFP" delivery="streaming" width="1280" height="720" type="application/dash+xml" scalable="true" maintainAspectRatio="true"><![CDATA[https://d3gf4nhd4u6icy.cloudfront.net/nico/ad09_15s/hls_manifests/master_manifest.mpd]]></MediaFile>
39 |       </MediaFiles>
40 |      </Linear>
41 |     </Creative>
42 |    </Creatives>
43 |   </InLine>
44 |  </Ad> 
45 | </VAST>
46 | 


--------------------------------------------------------------------------------
/public/samples/wse_api.js:
--------------------------------------------------------------------------------
  1 | function sendGetRequest(app,stream,attempt=1)
  2 | {
  3 |   console.log("Sending ad insert attempt:"+attempt);
  4 |   $('#response').text("...");
  5 |   var adObject = new Object();
  6 |   adObject.id = app + "-ad";
  7 |   //adObject.start_date = "+10";
  8 |   adObject.asset_list = "https://vast2sgai.qualabs.com/api/asset-list?vasturl=http://vast2sgai.qualabs.com/samples/sample-api-vastid-live/vast-sample.xml&test=false&user=user&content=content"
  9 | 
 10 |   $.post({
 11 |     url: 'https://demo.entrypoint.cloud.wowza.com/v1/ads/applications/'+app+'/streams/' + stream,
 12 |     type: 'post',
 13 |     timeout: 2000,
 14 |     tryCount : 0,
 15 |     retryLimit : 3,
 16 |     dataType: 'json',
 17 |     contentType: "application/json",
 18 |     data: JSON.stringify(adObject),
 19 |     success: function (okdata) {
 20 |       msg = "OK:"+okdata;
 21 |       console.log(msg);
 22 |       $('#response').text(msg.trim());      
 23 |     },
 24 |     error: function (xhr, ajaxOptions, thrownError) {
 25 |       if(xhr.status == 0) {
 26 |         var msg = "insert failed:" + xhr.status + "=>" + xhr.responseText + " (attempt:" + attempt + ")"
 27 |         $('#response').text(msg.trim());
 28 |         console.log(msg);
 29 |         if(attempt < 3) {
 30 |           console.log("Retyring");
 31 |           sendGetRequest(app,stream,attempt+1);
 32 |         } else {
 33 |           $('#response').text(msg);      
 34 |         }
 35 |       } else if(xhr.status == 200) {
 36 |         msg = "insert ok:" + xhr.status + "=>" + xhr.responseText;
 37 |         console.log(msg);
 38 |         $('#response').text(msg.trim());
 39 |       }
 40 |       else {
 41 |         msg = "insert failed:" + xhr.status + "=>" + xhr.responseText;
 42 |         console.log(msg);
 43 |         $('#response').text(msg.trim());
 44 |       }
 45 |     }
 46 |   });
 47 | };
 48 | 
 49 | function sendDeleteRequest(app,stream,attempt=1)
 50 | {
 51 |   console.log("Sending ad remove attempt:"+attempt);
 52 |   $('#response').text("...");
 53 |   var adObject = new Object();
 54 |   $.post({
 55 |     url: 'https://demo.entrypoint.cloud.wowza.com/v1/ads/applications/'+app+'/streams/' + stream,
 56 |     type: 'delete',
 57 |     dataType: 'json',
 58 |     timeout: 2000,
 59 |     tryCount : 0,
 60 |     retryLimit : 3,    
 61 |     contentType: "application/json",
 62 |     data: JSON.stringify(adObject),
 63 |     success: function (okdata) {
 64 |       msg = "Deleted";
 65 |       console.log(msg);
 66 |       $('#response').text(msg.trim());      
 67 |     },
 68 |     error: function (xhr, ajaxOptions, thrownError) {
 69 |       if(xhr.status == 0) {
 70 |         msg = "delete failed:" + xhr.status + "=>" + xhr.responseText + " (attempt:" + attempt + ")";
 71 |         console.log(msg);
 72 |         if(attempt < 3) {
 73 |           console.log("trying...");
 74 |           sendDeleteRequest(app,stream,attempt+1);
 75 |         } else {
 76 |           $('#response').text(msg.trim());      
 77 |         }
 78 |       } else if(xhr.status == 204) {
 79 |         msg = "delete ok:" + xhr.status + "=>" + xhr.responseText;
 80 |         console.log(msg);
 81 |         $('#response').text(msg.trim());      
 82 |       }
 83 |       else {
 84 |         msg = "delete failed:" + xhr.status + "=>" + xhr.responseText;
 85 |         console.log(msg);
 86 |         $('#response').text(msg.trim());
 87 |       }
 88 |     }
 89 |   });
 90 | }    
 91 | 
 92 | function checkTime(i) {
 93 |   // add a zero in front of numbers<10
 94 |   if (i < 10) {
 95 |     i = "0" + i;
 96 |   }
 97 |   return i;
 98 | }
 99 | 
100 | function startTime() {
101 |   var today = new Date();
102 |   $('#time').text(checkTime(today.getUTCHours()) + ":" + checkTime(today.getUTCMinutes()) + ":" + checkTime(today.getUTCSeconds()));
103 | 
104 |   if (hls && hls.playingDate){
105 |     var programDateTime = hls.playingDate
106 |     $('#program-date-time').text(checkTime(programDateTime.getUTCHours()) + ":" + checkTime(programDateTime.getUTCMinutes()) + ":" + checkTime(programDateTime.getUTCSeconds()));
107 |   }
108 |   setTimeout(function() {
109 |     startTime()
110 |   }, 500);
111 | }


--------------------------------------------------------------------------------
/public/wse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/montevideo-tech/vast-2-sgai/b883cafcdc417a4afac4273281fcdc1880c2f1ef/public/wse.png


--------------------------------------------------------------------------------
/src/config/vast-mapping.js:
--------------------------------------------------------------------------------
 1 | const vastMappingEnv = process.env.VAST_MAPPING_JSON || "";
 2 | 
 3 | let vastMapping;
 4 | try {
 5 |   vastMapping = JSON.parse(vastMappingEnv);
 6 | } catch {
 7 |   vastMapping = {};
 8 | }
 9 | 
10 | module.exports = vastMapping;
11 | 


--------------------------------------------------------------------------------
/src/middlewares/params.js:
--------------------------------------------------------------------------------
 1 | const { middlewareJWTQuery } = require("../utils/jwt");
 2 | const { vastServerWhitelistMiddleware } = require("./whitelist");
 3 | const { vastIdMiddleware } = require("./vast-id");
 4 | 
 5 | function paramsMiddleware(req, res, next) {
 6 |   const { jwt, vasturl, vastid } = req.query;
 7 | 
 8 |   const params = [jwt, vasturl, vastid].filter((param) => param !== undefined);
 9 |   if (params.length > 1) {
10 |     return res
11 |       .status(400)
12 |       .json({
13 |         message: "Provide only one param at a time: jwt, vasturl or vastid",
14 |       });
15 |   }
16 | 
17 |   if (jwt) {
18 |     return middlewareJWTQuery(req, res, next);
19 |   } else if (vasturl) {
20 |     return vastServerWhitelistMiddleware(req, res, next);
21 |   } else if (vastid) {
22 |     return vastIdMiddleware(req, res, next);
23 |   } else {
24 |     return res
25 |       .status(400)
26 |       .json({
27 |         message: "No valid query param provided. Use jwt, vasturl or vastid",
28 |       });
29 |   }
30 | }
31 | 
32 | module.exports = { paramsMiddleware };
33 | 


--------------------------------------------------------------------------------
/src/middlewares/vast-id.js:
--------------------------------------------------------------------------------
 1 | const vastMapping = require("../config/vast-mapping");
 2 | 
 3 | function vastIdMiddleware(req, res, next) {
 4 |   const { vastid } = req.query;
 5 |   if (!vastid) {
 6 |     return res.status(400).json({ message: "Missing vastid query param" });
 7 |   }
 8 | 
 9 |   const vastidurl = vastMapping[vastid];
10 |   if (!vastidurl) {
11 |     return res
12 |       .status(404)
13 |       .json({ message: `No VAST URL found for id: ${vastid}` });
14 |   }
15 | 
16 |   req.query.vastidurl = vastidurl;
17 |   return next();
18 | }
19 | 
20 | module.exports = { vastIdMiddleware };
21 | 


--------------------------------------------------------------------------------
/src/middlewares/whitelist.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config({ path: "src/.env" });
 2 | 
 3 | const {
 4 |   VAST_WHITELIST: vastWhitelist = "",
 5 |   ORIGIN_WHITELIST: originWhitelist = ""
 6 | } = process.env;
 7 | 
 8 | function vastServerWhitelistMiddleware(req, res, next) {
 9 |   const { vasturl } = req.query;
10 | 
11 |   if (vastWhitelist === "") {
12 |     return next();
13 |   }
14 | 
15 |   if (!vasturl) {
16 |     return res.status(400).json({ message: "Missing vasturl query param" });
17 |   }
18 | 
19 |   try {
20 |     const hostname = new URL(vasturl).hostname;
21 |     const isAllowedVast = vastWhitelist.split(",").includes(hostname);
22 | 
23 |     if (isAllowedVast) {
24 |       return next();
25 |     } else {
26 |       return res
27 |         .status(403)
28 |         .json({ message: "Forbidden: VAST URL not allowed" });
29 |     }
30 |   } catch {
31 |     return res.status(400).json({ message: "Bad Request: Invalid VAST URL" });
32 |   }
33 | }
34 | 
35 | function originWhitelistMiddleware(req, res, next) {
36 |   const origin = req.headers.origin;
37 | 
38 |   if (originWhitelist === "") {
39 |     return next();
40 |   }
41 | 
42 |   if (!origin) {
43 |     return res
44 |       .status(400)
45 |       .json({ message: "Bad Request: Origin header is required" });
46 |   }
47 | 
48 |   try {
49 |     const hostname = new URL(origin).hostname;
50 |     const isAllowedOrigin = originWhitelist.split(",").includes(hostname);
51 | 
52 |     if (isAllowedOrigin) {
53 |       return next();
54 |     } else {
55 |       return res
56 |         .status(403)
57 |         .json({ message: "Forbidden: Origin host not allowed" });
58 |     }
59 |   } catch {
60 |     return res
61 |       .status(400)
62 |       .json({ message: "Bad Request: Invalid Origin header" });
63 |   }
64 | }
65 | 
66 | module.exports = { originWhitelistMiddleware, vastServerWhitelistMiddleware };
67 | 


--------------------------------------------------------------------------------
/src/routes/api.js:
--------------------------------------------------------------------------------
  1 | // routes/api.js
  2 | require("dotenv").config();
  3 | const express = require("express");
  4 | const bodyParser = require("body-parser");
  5 | 
  6 | const getVideoManifests = require("../utils/vast-parser.js");
  7 | const getListMPD = require("../utils/list-mpd-generator.js");
  8 | const { signJWT } = require("../utils/jwt.js");
  9 | const updateQueryParams = require("../utils/replace-queryparams.js");
 10 | 
 11 | const { originWhitelistMiddleware } = require("../middlewares/whitelist.js");
 12 | const { paramsMiddleware } = require("../middlewares/params.js");
 13 | 
 14 | const { AdCreativeSignalingMapper } = require("../trackingEvents/tracking-events.js");
 15 | 
 16 | const API_DISABLE_SIGN = process.env.API_DISABLE_SIGN == "true";
 17 | 
 18 | const router = express.Router();
 19 | 
 20 | async function getAds(req, manifestType) {
 21 |   //remove all the reserved params from the query params
 22 |   // eslint-disable-next-line no-unused-vars
 23 |   const { jwt, vasturl, vastidurl, vastid, ...queryParams } = req.query;
 24 | 
 25 |   let jwturl = "";
 26 |   if (req.jwtPayload) {
 27 |     jwturl = req.jwtPayload.url;
 28 |   }
 29 | 
 30 |   //get the url from decoded jwt, plain vasturl or vastid mapping
 31 |   const url = jwturl || vasturl || vastidurl;
 32 | 
 33 |   const finalUrl = updateQueryParams(url, queryParams);
 34 |   req.log.debug(`initial VAST URL : ${url}`);
 35 |   req.log.debug(`final VAST URL: ${finalUrl}`);
 36 |   return await getVideoManifests(finalUrl, manifestType);
 37 | }
 38 | 
 39 | function mapAdCreativeSignaling(ad) {
 40 |   const mapper = new AdCreativeSignalingMapper(ad);
 41 |   const mappedTrackingEvents = mapper.map();
 42 | 
 43 |   return mappedTrackingEvents;
 44 | }
 45 | 
 46 | // HLS Asset List
 47 | router.get(
 48 |   "/asset-list",
 49 |   originWhitelistMiddleware,
 50 |   paramsMiddleware,
 51 |   async (req, res) => {
 52 |     let ads;
 53 |     try {
 54 |       ads = await getAds(req, "m3u8");
 55 |     } catch (error) {
 56 |       return res.status(400).json({
 57 |         error: error.message,
 58 |       });
 59 |     }
 60 |     const assetList = { ASSETS: [] };
 61 |     ads.forEach((ad) => {
 62 |       
 63 |       const videoClicksSignaling = {
 64 |         clickThrough: ad.videoClicks?.clickThrough,
 65 |         clickTracking: ad.videoClicks?.clickTracking,
 66 |         customClick: ad.videoClicks?.customClick,
 67 |       };
 68 | 
 69 |       const trackingEvents = mapAdCreativeSignaling(ad);
 70 |       assetList.ASSETS.push({
 71 |         URI: ad.fileURL,
 72 |         DURATION: ad.duration,
 73 |         "X-AD-CREATIVE-SIGNALING": {
 74 |           version: 2,
 75 |           type: "slot",
 76 |           payload: [
 77 |             {
 78 |               type: "linear",
 79 |               start: 0.0,
 80 |               duration: ad.duration,
 81 |               tracking: trackingEvents,
 82 |             },
 83 |           ],
 84 |         },
 85 |         "X-VAST2SGAI-VIDEOCLICKS": videoClicksSignaling,
 86 |       });
 87 |     });
 88 | 
 89 |     res.json(assetList);
 90 |   }
 91 | );
 92 | 
 93 | // MPEG-DASH MPD List
 94 | router.get(
 95 |   "/list-mpd",
 96 |   originWhitelistMiddleware,
 97 |   paramsMiddleware,
 98 |   async (req, res) => {
 99 |     const ads = await getAds(req, "mpd");
100 |     res.set("Content-Type", "application/dash+xml");
101 |     res.send(getListMPD(ads));
102 |   }
103 | );
104 | 
105 | // Sign JWT
106 | router.all("/sign", bodyParser.json(), (req, res) => {
107 |   if (API_DISABLE_SIGN) res.status(401).json({ error: "API disabled" });
108 |   const url = req.body.url || req.query.url;
109 |   if (!url)
110 |     res.status(400).json({
111 |       error:
112 |         "You must send the 'url' as a query parameter when using GET or include it in the JSON body when using POST.",
113 |     });
114 |   res.send(signJWT({ url }));
115 | });
116 | 
117 | module.exports = router;


--------------------------------------------------------------------------------
/src/routes/samples.js:
--------------------------------------------------------------------------------
 1 | // routes/subroutes.js
 2 | const express = require("express");
 3 | const VAST = require("@dailymotion/vast-client");
 4 | const { logger } = require("../utils/logger.js");
 5 | 
 6 | const router = express.Router();
 7 | 
 8 | // Basic Asset List
 9 | router.get("/asset-list-1", (req, res) => {
10 |   const assetList = {
11 |     ASSETS: [
12 |       {
13 |         URI: "https://flipfit-cdn.akamaized.net/flip_hls/661f570aab9d840019942b80-473e0b/video_h1.m3u8",
14 |         DURATION: 45.0,
15 |       },
16 |     ],
17 |   };
18 |   res.log.info("Return sample: asset-list-1");
19 |   res.json(assetList);
20 | });
21 | 
22 | // Ad POD
23 | router.get("/asset-list-2", (req, res) => {
24 |   res.json({
25 |     ASSETS: [
26 |       {
27 |         URI: "https://flipfit-cdn.akamaized.net/flip_hls/661f570aab9d840019942b80-473e0b/video_h1.m3u8",
28 |         DURATION: 45.0,
29 |       },
30 |       {
31 |         URI: "https://redirector.gvt1.com/api/manifest/hls_variant/id/f1be9c477e89fd68/itag/0/source/dclk_video_ads/acao/yes/cpn/McGcWKwT0_10xtfw/ctier/L/ei/IuBEZ6rhLtrn1sQP0IXQ8A8/hfr/all/ip/0.0.0.0/keepalive/yes/playlist_type/DVR/requiressl/yes/susc/dvc/xpc/Eghovf3BOnoBAQ%3D%3D/expire/1764103074/sparams/expire,ei,ip,requiressl,acao,ctier,source,playlist_type,hfr,id,itag,susc,xpc/sig/AJfQdSswRAIgc0tQOyv3LSTCNBEv8q_nWaSWwq-EdQ870E7JFyy_dVQCICCKy-TAM88ZpQOHiXKAcgfj1ezoru62WiR_A-1epmla/file/index.m3u8",
32 |         DURATION: 10.0,
33 |       },
34 |     ],
35 |   });
36 | });
37 | 
38 | router.get("/sample-vast-1", async (req, res) => {
39 |   const vastClient = new VAST.VASTClient();
40 |   const parsedVast = await vastClient.get(
41 |     "http://localhost:3000/samples/sample-vast-1/vast-sample.xml"
42 |   );
43 | 
44 |   logger.info(parsedVast);
45 |   logger.info(parsedVast.ads[0]);
46 |   logger.info(parsedVast.ads[0].creatives[0]);
47 |   logger.info(parsedVast.ads[0].creatives[0].mediaFiles[4]);
48 | 
49 |   const fileURL = parsedVast.ads[0].creatives[0].mediaFiles[4].fileURL;
50 |   const duration = parsedVast.ads[0].creatives[0].duration;
51 |   res.json({
52 |     ASSETS: [
53 |       {
54 |         URI: fileURL,
55 |         DURATION: duration,
56 |       },
57 |     ],
58 |   });
59 | });
60 | 
61 | module.exports = router;
62 | 


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config();
 2 | const express = require("express");
 3 | const path = require("path");
 4 | const cors = require("cors");
 5 | 
 6 | const samples = require("./routes/samples.js");
 7 | const api = require("./routes/api.js");
 8 | const { httpLogger, logger } = require("./utils/logger.js");
 9 | 
10 | const app = express();
11 | const PORT = process.env.PORT || 3000;
12 | 
13 | app.use(cors());
14 | 
15 | app.use("/api/", httpLogger, api);
16 | app.use("/api/samples/", httpLogger, samples);
17 | 
18 | // Static samples
19 | app.use(express.static(path.join(__dirname, "../public")));
20 | 
21 | // Start the server
22 | app.listen(PORT, () => {
23 |   logger.info(`VAST-2-SGAI is running on http://localhost:${PORT}`);
24 | });
25 | 
26 | module.exports = app;
27 | 


--------------------------------------------------------------------------------
/src/trackingEvents/tracking-events.js:
--------------------------------------------------------------------------------
 1 | const { logger } = require("../utils/logger.js");
 2 | 
 3 | const IMPRESSION = "impression";
 4 | const PROGRESS = "progress";
 5 | 
 6 | class TrackingEvent {
 7 |   constructor(type, duration, urls) {
 8 |     // console.log(">>>TRACKING EVT: ", type)
 9 |     this.type = type;
10 |     //this.duration = duration;
11 |     this.urls = urls;
12 |     //this.start = start;
13 | 
14 |     if (this.type.startsWith(PROGRESS)) {
15 |       const offsetValue = this.type.split("-")[1];
16 |       if (offsetValue !== null) {
17 |         this.offset =
18 |           typeof offsetValue === "string" && offsetValue.includes("%")
19 |             ? (duration * parseFloat(offsetValue.replace("%", ""))) / 100
20 |             : parseFloat(offsetValue);
21 | 
22 |         this.type = PROGRESS;
23 | 
24 |         if (
25 |           isNaN(this.offset) ||
26 |           this.offset < 0 ||
27 |           this.offset > this.duration
28 |         ) {
29 |           throw new Error(`Invalid start value: ${offset}`);
30 |         }
31 |       }
32 |     } else {
33 |       switch (type) {
34 |       case "start":
35 |         this.offset = 0;
36 |         break;
37 | 
38 |       case "firstQuartile":
39 |         this.offset = duration * 0.25;
40 |         break;
41 | 
42 |       case "midpoint":
43 |         this.offset = duration * 0.5;
44 |         break;
45 | 
46 |       case "thirdQuartile":
47 |         this.offset = duration * 0.75;
48 |         break;
49 | 
50 |       case "complete":
51 |         this.offset = duration;
52 |         break;
53 |       }
54 |     }
55 |   }
56 | }
57 | 
58 | class AdCreativeSignalingMapper {
59 |   constructor(ad) {
60 |     this.ad = ad;
61 |     console.log(">>>> Ad Tracking", this.ad.trackingEvents);
62 |   }
63 | 
64 |   map() {
65 |     const newTrackingEvents = this.ad.trackingEvents;
66 | 
67 |     if (this.ad?.impressions.length > 0)
68 |       newTrackingEvents[IMPRESSION] = this.ad.impressions.map(
69 |         (impression) => impression.url
70 |       );
71 | 
72 |     const trackingEvents = Object.entries(this.ad.trackingEvents)
73 |       .map(([eventType, urls]) => {
74 |         try {
75 |           const event = new TrackingEvent(eventType, this.ad.duration, urls);
76 |           //console.log(">>> track evt: ", event)
77 |           return event;
78 |         } catch (error) {
79 |           logger.warn(
80 |             `Skipping invalid event: ${eventType}, Error: ${error.message}`
81 |           );
82 | 
83 |           return null;
84 |         }
85 |       })
86 |       .filter(Boolean);
87 | 
88 |     return trackingEvents;
89 |   }
90 | }
91 | 
92 | module.exports = {
93 |   AdCreativeSignalingMapper,
94 |   TrackingEvent,
95 | };
96 | 


--------------------------------------------------------------------------------
/src/utils/jwt.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config({ path: "src/.env" });
 2 | const jwt = require("jsonwebtoken");
 3 | 
 4 | const SECRET_KEY = process.env.JWT_SECRET_KEY;
 5 | const BYPASS_VALIDATION = process.env.JWT_BYPASS_VALIDATION == "true";
 6 | const EXPIRES_IN = process.env.JWT_EXPIRES_IN || "100y";
 7 | 
 8 | function signJWT(payload, options = {}) {
 9 |   const opt = { ...options, expiresIn: EXPIRES_IN };
10 |   return jwt.sign(payload, SECRET_KEY, opt);
11 | }
12 | 
13 | function getJWT(token) {
14 |   if (BYPASS_VALIDATION) return jwt.decode(token);
15 |   try {
16 |     return jwt.verify(token, SECRET_KEY);
17 |   } catch (error) {
18 |     throw new Error("Invalid token: " + error);
19 |   }
20 | }
21 | 
22 | function middlewareJWTHeader(req, res, next) {
23 |   const token = req.headers["authorization"]?.split(" ")[1];
24 |   if (!token) {
25 |     return res.status(401).json({ error: "Token not found" });
26 |   }
27 |   try {
28 |     req.jwtPayload = getJWT(token);
29 |     next();
30 |   } catch {
31 |     return res.status(403).json({ error: "Invalid token" });
32 |   }
33 | }
34 | 
35 | function middlewareJWTQuery(req, res, next) {
36 |   const token = req.query.jwt;
37 | 
38 |   if (!token)
39 |     return res.status(401).json({ error: "jwt query parameter not found" });
40 |   try {
41 |     req.jwtPayload = getJWT(token);
42 |   } catch {
43 |     return res.status(403).json({ error: "Invalid token" });
44 |   }
45 | 
46 |   if (!req.jwtPayload.url)
47 |     return res.status(401).json({ error: "url not found in jwt" });
48 | 
49 |   next();
50 | }
51 | 
52 | module.exports = { signJWT, getJWT, middlewareJWTHeader, middlewareJWTQuery };
53 | 


--------------------------------------------------------------------------------
/src/utils/list-mpd-generator.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const DASH_MIN_BUFFER_TIME = "PT1S";
 3 | const DASH_RESOLUTION_TIME_OFFSET = "10"; 
 4 | 
 5 | function getListMPD(ads){
 6 |   const publishTime = new Date().toISOString(); // Current publish time
 7 |     
 8 |   // Initialize MPD XML structure
 9 |   let mpdXml = `<?xml version="1.0" encoding="UTF-8"?>
10 |   <MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
11 |     xmlns="urn:mpeg:dash:schema:mpd:2011"
12 |     xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
13 |     type="list" minBufferTime="${DASH_MIN_BUFFER_TIME}"
14 |     profiles="urn:mpeg:dash:profile:list:2024"
15 |     publishTime="${publishTime}">\n`;
16 |   
17 |   // Generate Period and ImportedMPD elements
18 |   ads.forEach((ad, index) => {
19 |     const earliestResolutionTimeOffset = index === 0 ? 0 : DASH_RESOLUTION_TIME_OFFSET;
20 |     mpdXml += `  <Period id="${index + 1}" duration="PT${ad.duration}S">
21 |       <ImportedMPD uri="${ad.fileURL}" earliestResolutionTimeOffset="${earliestResolutionTimeOffset}"/>
22 |     </Period>\n`;
23 |   });
24 |   
25 |   // Close MPD element
26 |   mpdXml += "</MPD>";
27 |   return mpdXml;
28 | };
29 | 
30 | module.exports = getListMPD;


--------------------------------------------------------------------------------
/src/utils/logger.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config();
 2 | const pino = require("pino");
 3 | const pinoHttp = require("pino-http");
 4 | 
 5 | const logger = pino({
 6 |   level: process.env.PINO_LOG_LEVEL || "info",
 7 |   ...(process.env.PINO_LOG_LEVEL === "debug" ? {
 8 |     transport: {
 9 |       target: "pino-pretty",
10 |     },
11 |   } : {})
12 | });
13 | 
14 | const httpLogger = pinoHttp({
15 |   logger,
16 |   serializers: {
17 |     req: pino.stdSerializers.wrapRequestSerializer((req) => {
18 |       return {
19 |         id: req.raw.id,
20 |         method: req.raw.method,
21 |         path: req.raw.url.split("?")[0], // Remove query params which might be sensitive
22 |         // Allowlist useful headers
23 |         headers: {
24 |           host: req.raw.headers.host,
25 |           "user-agent": req.raw.headers["user-agent"],
26 |           referer: req.raw.headers.referer,
27 |         },
28 |       };
29 |     }),
30 |     res: pino.stdSerializers.wrapResponseSerializer((res) => {
31 |       return {
32 |         statusCode: res.raw.statusCode,
33 |         // Allowlist useful headers
34 |         headers: {
35 |           "content-type": res.raw.headers["content-type"],
36 |           "content-length": res.raw.headers["content-length"],
37 |         },
38 |       };
39 |     }),
40 |   },
41 | });
42 | 
43 | module.exports = { httpLogger, logger };
44 | 


--------------------------------------------------------------------------------
/src/utils/replace-queryparams.js:
--------------------------------------------------------------------------------
 1 | function updateQueryParams(url, params) {
 2 |   const urlObj = new URL(url);
 3 |   // Update or add the params
 4 |   for (const [key, value] of Object.entries(params)) {
 5 |     urlObj.searchParams.set(key, value);
 6 |   }
 7 | 
 8 |   // Update or add the params
 9 |   for (const [key, value] of Object.entries(params)) {
10 |     urlObj.searchParams.set(key, value);
11 |   }
12 | 
13 |   return urlObj.toString();
14 | }
15 | 
16 | module.exports = updateQueryParams;
17 | 


--------------------------------------------------------------------------------
/src/utils/vast-parser.js:
--------------------------------------------------------------------------------
 1 | const VAST = require("@dailymotion/vast-client");
 2 | const { logger } = require("./logger.js");
 3 | /**
 4 |  * Fetches video manifests from a VAST URL.
 5 |  *
 6 |  * @param {string} vastUrl - The URL of the VAST XML. It should be a valid URL string.
 7 |  * @param {string} manifestType - The type of manifest to filter. It can be either '.mpd' or '.m3u8'.
 8 |  * @returns {Promise<Array>} A promise that resolves to an array of objects containing file URLs and durations.
 9 |  */
10 | async function getVideoManifests(vastUrl, manifestType) {
11 |   const vastClient = new VAST.VASTClient();
12 |   let parsedVast;
13 |   try {
14 |     parsedVast = await vastClient.get(vastUrl, { resolveAll: true });
15 |   } catch (error) {
16 |     logger.error(
17 |       "Failed to fetch VAST XML",
18 |       error
19 |     );
20 |     throw new Error(error.message);
21 |   }
22 | 
23 |   const result = [];
24 | 
25 |   if (parsedVast.ads) {
26 |     for (let i = 0; i < parsedVast.ads.length; i++) {
27 |       const ad = parsedVast.ads[i];
28 |       const { impressionURLTemplates } = ad;
29 |       if (ad.creatives) {
30 |         for (let j = 0; j < ad.creatives.length; j++) {
31 |           const creative = ad.creatives[j];
32 |           const duration = creative.duration;
33 |           if (creative.mediaFiles) {
34 |             for (let k = 0; k < creative.mediaFiles.length; k++) {
35 |               const mediaFile = creative.mediaFiles[k];
36 |               if (
37 |                 mediaFile.fileURL &&
38 |                 mediaFile.fileURL.includes(manifestType)
39 |               ) {
40 |                 result.push({
41 |                   fileURL: mediaFile.fileURL,
42 |                   duration,
43 |                   trackingEvents: creative.trackingEvents,
44 |                   videoClicks: {
45 |                     clickThrough: creative.videoClickThroughURLTemplate,
46 |                     clickTracking: creative.videoClickTrackingURLTemplates,
47 |                     customClick: creative.videoCustomClickURLTemplates
48 |                   },
49 |                   impressions: impressionURLTemplates,
50 |                 });
51 |               }
52 |             }
53 |           }
54 |  
55 |         }
56 |       }
57 |     }
58 |   }
59 | 
60 |   return result;
61 | }
62 | 
63 | module.exports = getVideoManifests;
64 | 


--------------------------------------------------------------------------------