From a0f60a6e47dd5254107effb8cf975c29fa9bbd21 Mon Sep 17 00:00:00 2001
From: Joe Turki <git@joeturki.com>
Date: Tue, 11 Feb 2025 05:29:54 -0600
Subject: [PATCH 1/4] chore(deps): relax video.js version constraint from 8.7.0
 to ^8.20.0 and bump minor version

---
 package-lock.json | 188 ++++++++++++----------------------------------
 package.json      |   2 +-
 2 files changed, 51 insertions(+), 139 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7cdde63..92cd86b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "eslint-config-videojs": "^6.1.0",
         "eslint-plugin-jsdoc": "^46.9.0",
         "global": "^4.4.0",
-        "video.js": "8.7.0"
+        "video.js": "^8.20.0"
       },
       "devDependencies": {
         "@commitlint/cli": "^19.5.0",
@@ -4160,17 +4160,18 @@
       }
     },
     "node_modules/@videojs/http-streaming": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.8.0.tgz",
-      "integrity": "sha512-sZ5xM6XQdAPSxXKm767J28OLCJKY5mMxu7LVAqlyEJommECylm5D/RtzqAyIWM6u4V85qsJR4Zn9k6yzAhEDOw==",
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.17.0.tgz",
+      "integrity": "sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "4.0.0",
-        "aes-decrypter": "4.0.1",
+        "@videojs/vhs-utils": "^4.1.1",
+        "aes-decrypter": "^4.0.2",
         "global": "^4.4.0",
-        "m3u8-parser": "^7.1.0",
-        "mpd-parser": "^1.2.2",
-        "mux.js": "7.0.2",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
+        "mux.js": "7.1.0",
         "video.js": "^7 || ^8"
       },
       "engines": {
@@ -4178,48 +4179,7 @@
         "npm": ">=5"
       },
       "peerDependencies": {
-        "video.js": "^7 || ^8"
-      }
-    },
-    "node_modules/@videojs/http-streaming/node_modules/aes-decrypter": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
-      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0",
-        "pkcs7": "^1.0.4"
-      }
-    },
-    "node_modules/@videojs/http-streaming/node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
-    "node_modules/@videojs/http-streaming/node_modules/mux.js": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.2.tgz",
-      "integrity": "sha512-CM6+QuyDbc0qW1OfEjkd2+jVKzTXF+z5VOKH0eZxtZtnrG/ilkW/U7l7IXGtBNLASF9sKZMcK1u669cq50Qq0A==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "muxjs-transmux": "bin/transmux.js"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
+        "video.js": "^8.19.0"
       }
     },
     "node_modules/@videojs/update-changelog": {
@@ -4242,13 +4202,13 @@
       }
     },
     "node_modules/@videojs/vhs-utils": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
-      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
+      "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
+        "global": "^4.4.0"
       },
       "engines": {
         "node": ">=8",
@@ -4256,9 +4216,10 @@
       }
     },
     "node_modules/@videojs/xhr": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
-      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.7.0.tgz",
+      "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "global": "~4.4.0",
@@ -4269,6 +4230,7 @@
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       }
@@ -4315,6 +4277,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.2.tgz",
       "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@videojs/vhs-utils": "^4.1.1",
@@ -4322,19 +4285,6 @@
         "pkcs7": "^1.0.4"
       }
     },
-    "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
-      "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/agent-base": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
@@ -9308,11 +9258,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/individual": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
-      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
-    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -9729,7 +9674,8 @@
     "node_modules/is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "license": "MIT"
     },
     "node_modules/is-generator-function": {
       "version": "1.1.0",
@@ -10647,11 +10593,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
-      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -11511,25 +11452,13 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.2.0.tgz",
       "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@videojs/vhs-utils": "^4.1.1",
         "global": "^4.4.0"
       }
     },
-    "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
-      "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -12369,6 +12298,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.1.tgz",
       "integrity": "sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@videojs/vhs-utils": "^4.0.0",
@@ -12394,6 +12324,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.1.0.tgz",
       "integrity": "sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "global": "^4.4.0"
@@ -16075,6 +16006,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
       "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.5.5"
       },
@@ -17810,14 +17742,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rust-result": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
-      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
-      "dependencies": {
-        "individual": "^2.0.0"
-      }
-    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -17866,14 +17790,6 @@
         }
       ]
     },
-    "node_modules/safe-json-parse": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
-      "dependencies": {
-        "rust-result": "^1.0.0"
-      }
-    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -20166,11 +20082,6 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
-    "node_modules/url-toolkit": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
-      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -20262,45 +20173,46 @@
       }
     },
     "node_modules/video.js": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.7.0.tgz",
-      "integrity": "sha512-QAYQKsqyO/jxDed1AYdD4cEYQIuxGuqzMmfyyL3ZTgbCjo+f/XF+1Hw9aC1SZN6Wx3qDVLWKF7oB22uWST0N9w==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.20.0.tgz",
+      "integrity": "sha512-VyXY/DbtfaI22gpWJdo8bmTcpPRfKg0SeQJBusRdIJF1RMI+er1BHpRreg67s5Qfd9ZeSbfKShUOwaxRft/tBw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/http-streaming": "3.8.0",
-        "@videojs/vhs-utils": "^4.0.0",
-        "@videojs/xhr": "2.6.0",
-        "aes-decrypter": "^4.0.1",
+        "@videojs/http-streaming": "^3.16.0",
+        "@videojs/vhs-utils": "^4.1.1",
+        "@videojs/xhr": "2.7.0",
+        "aes-decrypter": "^4.0.2",
         "global": "4.4.0",
-        "keycode": "2.2.0",
-        "m3u8-parser": "^7.1.0",
-        "mpd-parser": "^1.2.2",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
         "mux.js": "^7.0.1",
-        "safe-json-parse": "4.0.0",
-        "videojs-contrib-quality-levels": "4.0.0",
-        "videojs-font": "4.1.0",
+        "videojs-contrib-quality-levels": "4.1.0",
+        "videojs-font": "4.2.0",
         "videojs-vtt.js": "0.15.5"
       }
     },
     "node_modules/videojs-contrib-quality-levels": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
-      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+      "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+      "license": "Apache-2.0",
       "dependencies": {
         "global": "^4.4.0"
       },
       "engines": {
-        "node": ">=14",
-        "npm": ">=6"
+        "node": ">=16",
+        "npm": ">=8"
       },
       "peerDependencies": {
         "video.js": "^8"
       }
     },
     "node_modules/videojs-font": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
-      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.2.0.tgz",
+      "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==",
+      "license": "Apache-2.0"
     },
     "node_modules/videojs-generate-karma-config": {
       "version": "8.1.0",
diff --git a/package.json b/package.json
index 08b579c..1de8ce5 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "eslint-config-videojs": "^6.1.0",
     "eslint-plugin-jsdoc": "^46.9.0",
     "global": "^4.4.0",
-    "video.js": "8.7.0"
+    "video.js": "^8.20.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",

From e4175fdcecfee47ee4050be9694903e27f84d3f3 Mon Sep 17 00:00:00 2001
From: Joe Turki <git@joeturki.com>
Date: Tue, 11 Feb 2025 10:14:45 -0600
Subject: [PATCH 2/4] chore(examples): update video.js to 8.20.0, update code

---
 README.md                   |  2 +-
 examples/player.html        | 38 ++++++++++++++++++-------------------
 examples/simple-player.html | 10 +++++-----
 examples/webrtc-player.html | 20 +++++++++----------
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index d726a90..f01ddc6 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,7 @@ Include [@ceeblue/videojs-plugins][npm-url] in your HTML code as usual with the
 Example:
 
 ```html
-<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
+<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
 <script src="./dist/videojs-plugins.js"></script>
 ```
 
diff --git a/examples/player.html b/examples/player.html
index 5a3d01f..cc34f1f 100644
--- a/examples/player.html
+++ b/examples/player.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<!-- 
+<!--
 	Copyright 2023 Ceeblue B.V.
 -->
 <html lang="en">
@@ -19,9 +19,9 @@
 		integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" rel="stylesheet">
 	<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css"
 		integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" rel="stylesheet">
-	<link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
+	<link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
 	<link href="../dist/videojs-plugins.css" rel="stylesheet">
-	
+
 	<style>
 		body {
 			margin-top: 1em;
@@ -59,7 +59,7 @@
 					<video ref="videoPlayer" class="video-js vjs-default-skin vjs-fluid" playsinline controls autoplay></video>
 				</div>
 			</div>
-			
+
 			<div class="form-row" v-if="dataMessages.length > 0" disabled>
 				<div class="col-12">
 					<h5>Timed Metadatas</h5>
@@ -76,7 +76,7 @@ <h5>Timed Metadatas</h5>
 							{{ option }}
 						</option>
 					</select>
-				</div>								
+				</div>
 				<div class="form-group col-6 col-sm-4">
 					<input :disabled="isPlaying()" class="form-control"
 						placeholder="Node host" type="text"
@@ -88,8 +88,8 @@ <h5>Timed Metadatas</h5>
 						v-model="quality" title="Stream quality">
 				</div>
 			</div>
-		
-			<div class="form-row">				
+
+			<div class="form-row">
 				<div class="form-group col-6">
 					<input :disabled="isPlaying()" class="form-control"
 						placeholder="Stream name" type="text"
@@ -119,21 +119,21 @@ <h5>Timed Metadatas</h5>
 		// import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
 		// production version, optimized for size and speed
 		import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
-		import {} from 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
-		import {} from 'https://vjs.zencdn.net/8.7.0/video.min.js';
-		import {} from '../dist/videojs-plugins.js';
-		import { Player } from './js/Player.js';
+		import 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
+		import 'https://vjs.zencdn.net/8.20.0/video.min.js';
+		import '../dist/videojs-plugins.js';
+    import { Player } from './js/Player.js';
 
 		const SourceType = videojs.getPlugin('SourceController').SourceType;
-        const WebRTCSourceHandler = videojs.getTech('Html5').sourceHandlers.find((value) => value.name == 'ceeblue/videojs-plugins');
-		
+    const WebRTCSourceHandler = videojs.getTech('Html5').sourceHandlers.find((value) => value.name == 'ceeblue/videojs-plugins');
+
 		const {
         	Util,
 			NetAddress,
 			Connect,
 		} = WebRTCSourceHandler.webrtcClient.utils;
 		console.log('webrtc-client version:', WebRTCSourceHandler.webrtcClient.VERSION);
-	
+
 		const PlayState = {
 			PLAYING: 'PLAYING',
 			STARTING: 'STARTING',
@@ -200,7 +200,7 @@ <h5>Timed Metadatas</h5>
 						const playerOptions = {
 							responsive: true,
 							html5: {
-								nativeControlsForTouch: false, 
+								nativeControlsForTouch: false,
 								vhs: {overrideNative: true},
 								nativeAudioTracks: false,
 								nativeVideoTracks: false,
@@ -229,8 +229,8 @@ <h5>Timed Metadatas</h5>
 									src: Connect.buildURL(Connect.Type.WEBRTC, connectParams, protocol).toString(),
 									// Ceeblue specific options
 									iceserver: {
-										urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'], 
-										username: 'ceeblue', 
+										urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'],
+										username: 'ceeblue',
 										credential: 'ceeblue'
 									},
 									audiobutton: this.audiobutton,
@@ -239,7 +239,7 @@ <h5>Timed Metadatas</h5>
 							}
 							sources.push(source);
 						}
-						
+
 						player = new Player(this.$refs.videoPlayer, connectParams, sources, playerOptions);
 						player.on('sourcechanged', (source) => {
 							console.log('sourcechanged', source);
@@ -328,4 +328,4 @@ <h5>Timed Metadatas</h5>
 	</script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/simple-player.html b/examples/simple-player.html
index 1be4eb0..43bdc81 100644
--- a/examples/simple-player.html
+++ b/examples/simple-player.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
   <title>WebRTC Playback demo</title>
-  <link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
+  <link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
   <link href="../dist/videojs-plugins.css" rel="stylesheet">
 </head>
 <body>
 <script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
-<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
+<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
 <script src="../dist/videojs-plugins.js"></script>
 
 <div id="video_container">
@@ -17,8 +17,8 @@
   import { Player } from "./js/Player.js";
 
   // Replace the source url with host and stream name from query string
-  var url = new URL(window.location.href);
-  var connectParams = {
+  const url = new URL(window.location.href);
+  const connectParams = {
     endPoint: url.searchParams.get("host"),
     streamName: url.searchParams.get("stream"),
     accessToken: url.searchParams.get("accesstoken") || url.searchParams.get("token")
@@ -26,7 +26,7 @@
   if (!connectParams.endPoint || !connectParams.streamName) {
     throw new Error("host and stream parameters are required");
   }
-  
+
   // Initialize the video player
   var player = new Player("video-player");
   player.start(connectParams);
diff --git a/examples/webrtc-player.html b/examples/webrtc-player.html
index 5dbf7cf..ed6d212 100644
--- a/examples/webrtc-player.html
+++ b/examples/webrtc-player.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
   <title>WebRTC Playback demo</title>
-  <link href="https://vjs.zencdn.net/8.7.0/video-js.css" rel="stylesheet">
+  <link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
   <link href="../dist/videojs-plugins.css" rel="stylesheet">
 </head>
 <body>
 <script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
-<script src="https://vjs.zencdn.net/8.7.0/video.min.js"></script>
+<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
 <script src="../dist/videojs-plugins.js"></script>
 
 <div id="video_container">
@@ -17,14 +17,14 @@
     </video>
 </div>
 <script>
-
   // Replace the source url with host and stream name from query string
-  var url = new URL(window.location.href);
-  var host = url.searchParams.get("host");
-  var stream = url.searchParams.get("stream");
-  var accessToken = url.searchParams.get("accesstoken") || url.searchParams.get("token");
+  const url = new URL(window.location.href);
+  const host = url.searchParams.get("host");
+  const stream = url.searchParams.get("stream");
+  const accessToken = url.searchParams.get("accesstoken") || url.searchParams.get("token");
   if (host && stream) {
-    var source = "wss://" + host + "/" + stream;
+    const source = "wss://" + host + "/" + stream;
+
     if (accessToken) {
       source += "?id=" + accessToken;
     }
@@ -32,9 +32,9 @@
   } else {
     throw new Error("host and stream parameters are required");
   }
-  
+
   // Initialize the video player
-  var player = videojs("video-player");
+  const player = videojs("video-player");
   player.qualityButton();
 </script>
 </body>

From 93de258cfd0d92d8b359e2ddb0f13d0e7b8ba1ac Mon Sep 17 00:00:00 2001
From: Joe Turki <git@joeturki.com>
Date: Tue, 11 Feb 2025 10:14:57 -0600
Subject: [PATCH 3/4] fix(examples): use the new ceeblue plugin API

---
 examples/simple-player.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/simple-player.html b/examples/simple-player.html
index 43bdc81..e2c60e7 100644
--- a/examples/simple-player.html
+++ b/examples/simple-player.html
@@ -27,9 +27,9 @@
     throw new Error("host and stream parameters are required");
   }
 
-  // Initialize the video player
-  var player = new Player("video-player");
-  player.start(connectParams);
-</script>
+    // Initialize the video player
+    const player = new Player("video-player", connectParams);
+    player.start();
+  </script>
 </body>
 </html>

From c934f4fb62937674df2d5269f705e5c5f0bb275e Mon Sep 17 00:00:00 2001
From: Joe Turki <git@joeturki.com>
Date: Tue, 11 Feb 2025 10:26:41 -0600
Subject: [PATCH 4/4] chore(examples): fix lint

---
 examples/player.html        | 582 ++++++++++++++++++------------------
 examples/simple-player.html |  34 +--
 examples/webrtc-player.html |  47 ++-
 3 files changed, 331 insertions(+), 332 deletions(-)

diff --git a/examples/player.html b/examples/player.html
index cc34f1f..5c6ef1e 100644
--- a/examples/player.html
+++ b/examples/player.html
@@ -1,331 +1,331 @@
 <!doctype html>
 <!--
-	Copyright 2023 Ceeblue B.V.
+  Copyright 2023 Ceeblue B.V.
 -->
 <html lang="en">
 
 <head>
-	<title>Ceeblue Videojs Player</title>
-	<meta charset="utf-8">
-	<meta content="Ceeblue" name="author">
-	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <title>Ceeblue Videojs Player</title>
+  <meta charset="utf-8">
+  <meta content="Ceeblue" name="author">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 
-	<link href="assets/ceeblue-logo-32x32.png" rel="icon" sizes="32x32">
+  <link href="assets/ceeblue-logo-32x32.png" rel="icon" sizes="32x32">
     <link href="assets/ceeblue-logo-192x192.png" rel="icon" sizes="192x192">
 
-	<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
-	<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css"
-		integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" rel="stylesheet">
-	<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css"
-		integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" rel="stylesheet">
-	<link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
-	<link href="../dist/videojs-plugins.css" rel="stylesheet">
+  <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet">
+  <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css"
+    integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" rel="stylesheet">
+  <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css"
+    integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" rel="stylesheet">
+  <link href="https://vjs.zencdn.net/8.20.0/video-js.css" rel="stylesheet">
+  <link href="../dist/videojs-plugins.css" rel="stylesheet">
 
-	<style>
-		body {
-			margin-top: 1em;
-			margin-bottom: 3em;
-		}
+  <style>
+    body {
+      margin-top: 1em;
+      margin-bottom: 3em;
+    }
 
-		[v-cloak] {
-			display: none;
-		}
-	</style>
+    [v-cloak] {
+      display: none;
+    }
+  </style>
 </head>
 
 <body class="container">
-	<div class="row">
-		<div class="row col-12">
-			<div class="col-12 col-md-6">
-				<a href="https://ceeblue.net"><img alt="CEEBLUE Media Services" class="rounded mx-auto d-block" src="assets/ceeblue-logo.png"/></a>
-			</div>
-			<div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
-				<a href="https://videojs.com" id="videojs-logo"><img src="assets/videojs-logo-black.svg"></img></a>
-			</div>
-		</div>
+  <div class="row">
+    <div class="row col-12">
+      <div class="col-12 col-md-6">
+        <a href="https://ceeblue.net"><img alt="CEEBLUE Media Services" class="rounded mx-auto d-block" src="assets/ceeblue-logo.png"/></a>
+      </div>
+      <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
+        <a href="https://videojs.com" id="videojs-logo"><img src="assets/videojs-logo-black.svg"></img></a>
+      </div>
+    </div>
 
-		<div class="col-md-12 mt-4" id="main">
-			<div class="col-12">
-				<ul class="nav nav-pills nav-fill">
-					<li v-for="value in sources" class="nav-item">
-						<a class="nav-link" href="#" :class="{ active: value == source}" v-on:click.stop.prevent="changeSource">{{ value }}</a>
-					</li>
-				</ul>
-			</div>
+    <div class="col-md-12 mt-4" id="main">
+      <div class="col-12">
+        <ul class="nav nav-pills nav-fill">
+          <li v-for="value in sources" class="nav-item">
+            <a class="nav-link" href="#" :class="{ active: value == source}" v-on:click.stop.prevent="changeSource">{{ value }}</a>
+          </li>
+        </ul>
+      </div>
 
-			<div class="card text-center border-0">
-				<div class="card-body">
-					<video ref="videoPlayer" class="video-js vjs-default-skin vjs-fluid" playsinline controls autoplay></video>
-				</div>
-			</div>
+      <div class="card text-center border-0">
+        <div class="card-body">
+          <video ref="videoPlayer" class="video-js vjs-default-skin vjs-fluid" playsinline controls autoplay></video>
+        </div>
+      </div>
 
-			<div class="form-row" v-if="dataMessages.length > 0" disabled>
-				<div class="col-12">
-					<h5>Timed Metadatas</h5>
-				</div>
-				<div class="form-group col-12 text-left border rounded overflow-auto" style="white-space: pre;">{{ dataMessages }}</div>
-			</div>
+      <div class="form-row" v-if="dataMessages.length > 0" disabled>
+        <div class="col-12">
+          <h5>Timed Metadatas</h5>
+        </div>
+        <div class="form-group col-12 text-left border rounded overflow-auto" style="white-space: pre;">{{ dataMessages }}</div>
+      </div>
 
-			<div class="form-row">
-				<div class="form-group col-6 col-sm-4">
-					<select class="custom-select" id="signaling-selection"
-						:disabled="playState !== PlayState.STOPPED"
-						v-model="connectorType" title="Signaling">
-						<option v-bind:value="option" v-for="option in connectorTypes">
-							{{ option }}
-						</option>
-					</select>
-				</div>
-				<div class="form-group col-6 col-sm-4">
-					<input :disabled="isPlaying()" class="form-control"
-						placeholder="Node host" type="text"
-						v-model="host" title="Ceeblue node host">
-				</div>
-				<div class="form-group col-6 col-sm-4">
-					<input disabled class="form-control"
-						placeholder="Video quality" type="text"
-						v-model="quality" title="Stream quality">
-				</div>
-			</div>
+      <div class="form-row">
+        <div class="form-group col-6 col-sm-4">
+          <select class="custom-select" id="signaling-selection"
+            :disabled="playState !== PlayState.STOPPED"
+            v-model="connectorType" title="Signaling">
+            <option v-bind:value="option" v-for="option in connectorTypes">
+              {{ option }}
+            </option>
+          </select>
+        </div>
+        <div class="form-group col-6 col-sm-4">
+          <input :disabled="isPlaying()" class="form-control"
+            placeholder="Node host" type="text"
+            v-model="host" title="Ceeblue node host">
+        </div>
+        <div class="form-group col-6 col-sm-4">
+          <input disabled class="form-control"
+            placeholder="Video quality" type="text"
+            v-model="quality" title="Stream quality">
+        </div>
+      </div>
 
-			<div class="form-row">
-				<div class="form-group col-6">
-					<input :disabled="isPlaying()" class="form-control"
-						placeholder="Stream name" type="text"
-						v-model="streamName" title="Stream name">
-				</div>
+      <div class="form-row">
+        <div class="form-group col-6">
+          <input :disabled="isPlaying()" class="form-control"
+            placeholder="Stream name" type="text"
+            v-model="streamName" title="Stream name">
+        </div>
 
-				<div class="form-group col-6">
-					<input :disabled="isPlaying()" class="form-control"
-						placeholder="Access token cc0f52bb-92bb-462b-8218-88c3febe8533" type="text"
-						v-model="accessToken" title="Private stream token">
-				</div>
-			</div>
+        <div class="form-group col-6">
+          <input :disabled="isPlaying()" class="form-control"
+            placeholder="Access token cc0f52bb-92bb-462b-8218-88c3febe8533" type="text"
+            v-model="accessToken" title="Private stream token">
+        </div>
+      </div>
 
-			<div class="d-flex justify-content-center" v-cloak>
-				<button class="btn" type="button"
-					v-bind:class="{ 'btn-danger': isPlaying(), 'btn-success': isStopped(), 'btn-secondary': isStarting() }"
-					v-on:click="play">
-					<span>{{ playButtonCaption() }} <i class="fas fa-spinner fa-pulse"
-							v-if="isStarting()"></i></span>
-				</button>
-			</div>
-		</div>
-	</div>
+      <div class="d-flex justify-content-center" v-cloak>
+        <button class="btn" type="button"
+          v-bind:class="{ 'btn-danger': isPlaying(), 'btn-success': isStopped(), 'btn-secondary': isStarting() }"
+          v-on:click="play">
+          <span>{{ playButtonCaption() }} <i class="fas fa-spinner fa-pulse"
+              v-if="isStarting()"></i></span>
+        </button>
+      </div>
+    </div>
+  </div>
 
-	<script type="module">
-		// development version, includes helpful console warnings
-		// import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
-		// production version, optimized for size and speed
-		import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
-		import 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
-		import 'https://vjs.zencdn.net/8.20.0/video.min.js';
-		import '../dist/videojs-plugins.js';
+  <script type="module">
+    // development version, includes helpful console warnings
+    // import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js';
+    // production version, optimized for size and speed
+    import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js';
+    import 'https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js';
+    import 'https://vjs.zencdn.net/8.20.0/video.min.js';
+    import '../dist/videojs-plugins.js';
     import { Player } from './js/Player.js';
 
-		const SourceType = videojs.getPlugin('SourceController').SourceType;
+    const SourceType = videojs.getPlugin('SourceController').SourceType;
     const WebRTCSourceHandler = videojs.getTech('Html5').sourceHandlers.find((value) => value.name == 'ceeblue/videojs-plugins');
 
-		const {
-        	Util,
-			NetAddress,
-			Connect,
-		} = WebRTCSourceHandler.webrtcClient.utils;
-		console.log('webrtc-client version:', WebRTCSourceHandler.webrtcClient.VERSION);
+    const {
+          Util,
+      NetAddress,
+      Connect,
+    } = WebRTCSourceHandler.webrtcClient.utils;
+    console.log('webrtc-client version:', WebRTCSourceHandler.webrtcClient.VERSION);
 
-		const PlayState = {
-			PLAYING: 'PLAYING',
-			STARTING: 'STARTING',
-			STOPPED: 'STOPPED'
-		};
-		// /!\ keep this outside of the app to avoid issues with vuejs proxying)
-		let player = null; // the videojs Player
+    const PlayState = {
+      PLAYING: 'PLAYING',
+      STARTING: 'STARTING',
+      STOPPED: 'STOPPED'
+    };
+    // /!\ keep this outside of the app to avoid issues with vuejs proxying)
+    let player = null; // the videojs Player
 
-		createApp({
-			data() {
-				return {
-					PlayState: PlayState,
-					playState: PlayState.STOPPED,
+    createApp({
+      data() {
+        return {
+          PlayState: PlayState,
+          playState: PlayState.STOPPED,
 
-					streamName: '',
-					accessToken: null,
-					host: null,
+          streamName: '',
+          accessToken: null,
+          host: null,
 
-					audio: null,
-					video: null,
-					audiobutton: true,
-					videobutton: true,
-					retryCount: 0,
-					auto: true,
+          audio: null,
+          video: null,
+          audiobutton: true,
+          videobutton: true,
+          retryCount: 0,
+          auto: true,
 
-					connectorTypes: ['WebSocket (WS)', 'HTTP (WHEP)'],
-					connectorType: 'WebSocket (WS)',
-					sources: [SourceType.WEBRTC, SourceType.LLHLS, SourceType.DASH, SourceType.HLS],
-					source: '',
+          connectorTypes: ['WebSocket (WS)', 'HTTP (WHEP)'],
+          connectorType: 'WebSocket (WS)',
+          sources: [SourceType.WEBRTC, SourceType.LLHLS, SourceType.DASH, SourceType.HLS],
+          source: '',
 
-					dataMessages: '',
-					quality: '',
-				}
-			},
-			created() {
-				const options = Util.options();
-				// init values
-				const host = options.host;
-				this.host = new NetAddress(host || location.host, 443);
-				this.streamName = options.stream;
-				this.accessToken = options.accesstoken || options.token;
+          dataMessages: '',
+          quality: '',
+        }
+      },
+      created() {
+        const options = Util.options();
+        // init values
+        const host = options.host;
+        this.host = new NetAddress(host || location.host, 443);
+        this.streamName = options.stream;
+        this.accessToken = options.accesstoken || options.token;
 
-				this.audioTrack = options.audio;
-				this.videoTrack = options.video;
-				this.audiobutton = options.audiobutton;
-				this.videobutton = options.videobutton;
-				this.retryCount = options.retryCount;
-				this.auto = options.auto !== false;
-				this.connectorType = host && host.toLowerCase().startsWith('http')? this.connectorTypes[1] : this.connectorTypes[0];
-			},
-			methods: {
-				startPlayback(selectedSource) {
-					this.playState = PlayState.STARTING;
+        this.audioTrack = options.audio;
+        this.videoTrack = options.video;
+        this.audiobutton = options.audiobutton;
+        this.videobutton = options.videobutton;
+        this.retryCount = options.retryCount;
+        this.auto = options.auto !== false;
+        this.connectorType = host && host.toLowerCase().startsWith('http')? this.connectorTypes[1] : this.connectorTypes[0];
+      },
+      methods: {
+        startPlayback(selectedSource) {
+          this.playState = PlayState.STARTING;
 
-					// filter query params
-					const query = {};
-					if (this.audioTrack) {
-						query.audio=this.audioTrack;
-					}
-					if (this.videoTrack) {
-						query.video=this.videoTrack;
-					}
-					if (!player) {
-						const playerOptions = {
-							responsive: true,
-							html5: {
-								nativeControlsForTouch: false,
-								vhs: {overrideNative: true},
-								nativeAudioTracks: false,
-								nativeVideoTracks: false,
-							},
-							// Ceeblue specific options
-							qualityButton: this.videobutton,
-							retryCount: this.retryCount,
-							auto: this.auto
-						}
+          // filter query params
+          const query = {};
+          if (this.audioTrack) {
+            query.audio=this.audioTrack;
+          }
+          if (this.videoTrack) {
+            query.video=this.videoTrack;
+          }
+          if (!player) {
+            const playerOptions = {
+              responsive: true,
+              html5: {
+                nativeControlsForTouch: false,
+                vhs: {overrideNative: true},
+                nativeAudioTracks: false,
+                nativeVideoTracks: false,
+              },
+              // Ceeblue specific options
+              qualityButton: this.videobutton,
+              retryCount: this.retryCount,
+              auto: this.auto
+            }
 
-						// Build the sources list with custom options for WebRTC
-						const protocol = this.connectorType === this.connectorTypes[1]? 'https' : 'wss';
-						const connectParams = {
-							endPoint: protocol + '://' + this.host.toString(),
-							streamName:this.streamName,
-							accessToken:this.accessToken,
-							query
-						};
-						const sources = [];
-						for (let i = 0; i < this.sources.length; i++) {
-							let source = this.sources[i];
-							if (source == SourceType.WEBRTC) {
-								// This is an example of custom Source Object to pass options to the WebRTC source handler
-								// You can also customize every source type in the same way
-								source = {
-									src: Connect.buildURL(Connect.Type.WEBRTC, connectParams, protocol).toString(),
-									// Ceeblue specific options
-									iceserver: {
-										urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'],
-										username: 'ceeblue',
-										credential: 'ceeblue'
-									},
-									audiobutton: this.audiobutton,
-									data: true
-								};
-							}
-							sources.push(source);
-						}
+            // Build the sources list with custom options for WebRTC
+            const protocol = this.connectorType === this.connectorTypes[1]? 'https' : 'wss';
+            const connectParams = {
+              endPoint: protocol + '://' + this.host.toString(),
+              streamName:this.streamName,
+              accessToken:this.accessToken,
+              query
+            };
+            const sources = [];
+            for (let i = 0; i < this.sources.length; i++) {
+              let source = this.sources[i];
+              if (source == SourceType.WEBRTC) {
+                // This is an example of custom Source Object to pass options to the WebRTC source handler
+                // You can also customize every source type in the same way
+                source = {
+                  src: Connect.buildURL(Connect.Type.WEBRTC, connectParams, protocol).toString(),
+                  // Ceeblue specific options
+                  iceserver: {
+                    urls: ['turn:' + this.host.domain + ':3478?transport=tcp', 'turn:' + this.host.domain + ':3478'],
+                    username: 'ceeblue',
+                    credential: 'ceeblue'
+                  },
+                  audiobutton: this.audiobutton,
+                  data: true
+                };
+              }
+              sources.push(source);
+            }
 
-						player = new Player(this.$refs.videoPlayer, connectParams, sources, playerOptions);
-						player.on('sourcechanged', (source) => {
-							console.log('sourcechanged', source);
-							this.dataMessages = '';
-							if (source == null) {
-								this.stopPlayback();
-							} else {
-								const qualityLevels = player.player.qualityLevels();
-								qualityLevels.on('change', (e) => {
-									if (qualityLevels.selectedIndex < 0)
-										return;
-									const quality = qualityLevels[qualityLevels.selectedIndex];
-									this.quality = quality.width + 'x' + quality.height + ' ' + Math.floor(quality.bitrate/1000) + 'kbps';
-								});
-								if (qualityLevels.selectedIndex >= 0) {
-									const quality = qualityLevels[qualityLevels.selectedIndex];
-									this.quality = quality.width + 'x' + quality.height + ' ' + Math.floor(quality.bitrate/1000) + 'kbps';
-								}
-								this.source = source;
-								this.playState = PlayState.PLAYING;
-							}
-						});
-						// Listen to timed metadatas
-						player.player.textTracks().on('addtrack', (e) => {
-							console.log('New text track', e);
-							const track = e.track;
-							track.on('cuechange', () => {
-								const cue = track.activeCues[0];
-								if (!cue)
-									return;
-								// If the message has more than 3 rows, remove the first one
-								if (this.dataMessages.split(/\r\n|\r|\n/).length > 3) {
-									this.dataMessages = this.dataMessages.substring(this.dataMessages.indexOf('\n') + 1);
-								}
-								this.dataMessages += "[" + cue.startTime.toFixed(3) + "] " + cue.text + '\n';
-							});
-						});
-					}
-					player.start(selectedSource);
-				},
-				stopPlayback() {
-					console.log('StopPlayback');
-					player.stop();
-					player = null;
-					this.dataMessages = '';
-					this.source = '';
-					this.quality = '';
-					this.playState = PlayState.STOPPED;
-				},
-				changeSource(e) {
-					if (this.source == e.target.text)
-						return;
-					if (!player) {
-						this.startPlayback(e.target.text);
-					} else {
-						player.source = e.target.text;
-					}
-				},
-				play() {
-					if(this.playState === PlayState.STOPPED) {
-						this.startPlayback();
-					} else {
-						this.stopPlayback();
-					}
-				},
+            player = new Player(this.$refs.videoPlayer, connectParams, sources, playerOptions);
+            player.on('sourcechanged', (source) => {
+              console.log('sourcechanged', source);
+              this.dataMessages = '';
+              if (source == null) {
+                this.stopPlayback();
+              } else {
+                const qualityLevels = player.player.qualityLevels();
+                qualityLevels.on('change', (e) => {
+                  if (qualityLevels.selectedIndex < 0)
+                    return;
+                  const quality = qualityLevels[qualityLevels.selectedIndex];
+                  this.quality = quality.width + 'x' + quality.height + ' ' + Math.floor(quality.bitrate/1000) + 'kbps';
+                });
+                if (qualityLevels.selectedIndex >= 0) {
+                  const quality = qualityLevels[qualityLevels.selectedIndex];
+                  this.quality = quality.width + 'x' + quality.height + ' ' + Math.floor(quality.bitrate/1000) + 'kbps';
+                }
+                this.source = source;
+                this.playState = PlayState.PLAYING;
+              }
+            });
+            // Listen to timed metadatas
+            player.player.textTracks().on('addtrack', (e) => {
+              console.log('New text track', e);
+              const track = e.track;
+              track.on('cuechange', () => {
+                const cue = track.activeCues[0];
+                if (!cue)
+                  return;
+                // If the message has more than 3 rows, remove the first one
+                if (this.dataMessages.split(/\r\n|\r|\n/).length > 3) {
+                  this.dataMessages = this.dataMessages.substring(this.dataMessages.indexOf('\n') + 1);
+                }
+                this.dataMessages += "[" + cue.startTime.toFixed(3) + "] " + cue.text + '\n';
+              });
+            });
+          }
+          player.start(selectedSource);
+        },
+        stopPlayback() {
+          console.log('StopPlayback');
+          player.stop();
+          player = null;
+          this.dataMessages = '';
+          this.source = '';
+          this.quality = '';
+          this.playState = PlayState.STOPPED;
+        },
+        changeSource(e) {
+          if (this.source == e.target.text)
+            return;
+          if (!player) {
+            this.startPlayback(e.target.text);
+          } else {
+            player.source = e.target.text;
+          }
+        },
+        play() {
+          if(this.playState === PlayState.STOPPED) {
+            this.startPlayback();
+          } else {
+            this.stopPlayback();
+          }
+        },
 
-				playButtonCaption() {
-					if (this.isStopped())
-						return 'Play';
-					if (this.isStarting())
-						return 'Starting... ';
-					if (this.isPlaying())
-						return 'Stop';
-				},
-				isPlaying() {
-					return this.playState === PlayState.PLAYING;
-				},
-				isStarting() {
-					return this.playState === PlayState.STARTING;
-				},
-				isStopped() {
-					return this.playState === PlayState.STOPPED;
-				}
-			},
-		}).mount('#main');
-	</script>
+        playButtonCaption() {
+          if (this.isStopped())
+            return 'Play';
+          if (this.isStarting())
+            return 'Starting... ';
+          if (this.isPlaying())
+            return 'Stop';
+        },
+        isPlaying() {
+          return this.playState === PlayState.PLAYING;
+        },
+        isStarting() {
+          return this.playState === PlayState.STARTING;
+        },
+        isStopped() {
+          return this.playState === PlayState.STOPPED;
+        }
+      },
+    }).mount('#main');
+  </script>
 </body>
 
 </html>
diff --git a/examples/simple-player.html b/examples/simple-player.html
index e2c60e7..6b79dd6 100644
--- a/examples/simple-player.html
+++ b/examples/simple-player.html
@@ -6,26 +6,26 @@
   <link href="../dist/videojs-plugins.css" rel="stylesheet">
 </head>
 <body>
-<script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
-<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
-<script src="../dist/videojs-plugins.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
+  <script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
+  <script src="../dist/videojs-plugins.js"></script>
 
-<div id="video_container">
+  <div id="video_container">
     <video id=video-player width=960 height=540 class="video-js vjs-default-skin" controls autoplay muted></video>
-</div>
-<script type="module">
-  import { Player } from "./js/Player.js";
+  </div>
+  <script type="module">
+    import { Player } from "./js/Player.js";
 
-  // Replace the source url with host and stream name from query string
-  const url = new URL(window.location.href);
-  const connectParams = {
-    endPoint: url.searchParams.get("host"),
-    streamName: url.searchParams.get("stream"),
-    accessToken: url.searchParams.get("accesstoken") || url.searchParams.get("token")
-  };
-  if (!connectParams.endPoint || !connectParams.streamName) {
-    throw new Error("host and stream parameters are required");
-  }
+    // Replace the source url with host and stream name from query string
+    const url = new URL(window.location.href);
+    const connectParams = {
+      endPoint: url.searchParams.get("host"),
+      streamName: url.searchParams.get("stream"),
+      accessToken: url.searchParams.get("accesstoken") || url.searchParams.get("token")
+    };
+    if (!connectParams.endPoint || !connectParams.streamName) {
+      throw new Error("host and stream parameters are required");
+    }
 
     // Initialize the video player
     const player = new Player("video-player", connectParams);
diff --git a/examples/webrtc-player.html b/examples/webrtc-player.html
index ed6d212..017695c 100644
--- a/examples/webrtc-player.html
+++ b/examples/webrtc-player.html
@@ -6,36 +6,35 @@
   <link href="../dist/videojs-plugins.css" rel="stylesheet">
 </head>
 <body>
-<script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
-<script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
-<script src="../dist/videojs-plugins.js"></script>
-
-<div id="video_container">
+  <script src="https://cdn.jsdelivr.net/npm/webrtc-adapter/out/adapter.js"></script>
+  <script src="https://vjs.zencdn.net/8.20.0/video.min.js"></script>
+  <script src="../dist/videojs-plugins.js"></script>
+  <div id="video_container">
     <video id=video-player width=960 height=540 class="video-js vjs-default-skin" controls autoplay muted>
       <!-- The following src is a sample URL that will be replaced with "host" and "stream" query parameters -->
       <source src="wss://host/streamName">
     </video>
-</div>
-<script>
-  // Replace the source url with host and stream name from query string
-  const url = new URL(window.location.href);
-  const host = url.searchParams.get("host");
-  const stream = url.searchParams.get("stream");
-  const accessToken = url.searchParams.get("accesstoken") || url.searchParams.get("token");
-  if (host && stream) {
-    const source = "wss://" + host + "/" + stream;
+  </div>
+  <script>
+    // Replace the source url with host and stream name from query string
+    const url = new URL(window.location.href);
+    const host = url.searchParams.get("host");
+    const stream = url.searchParams.get("stream");
+    const accessToken = url.searchParams.get("accesstoken") || url.searchParams.get("token");
+    if (host && stream) {
+      const source = "wss://" + host + "/" + stream;
 
-    if (accessToken) {
-      source += "?id=" + accessToken;
+      if (accessToken) {
+        source += "?id=" + accessToken;
+      }
+      document.getElementById("video-player").getElementsByTagName("source")[0].src = source;
+    } else {
+      throw new Error("host and stream parameters are required");
     }
-    document.getElementById("video-player").getElementsByTagName("source")[0].src = source;
-  } else {
-    throw new Error("host and stream parameters are required");
-  }
 
-  // Initialize the video player
-  const player = videojs("video-player");
-  player.qualityButton();
-</script>
+    // Initialize the video player
+    const player = videojs("video-player");
+    player.qualityButton();
+  </script>
 </body>
 </html>