Constrain video aspect ratio on client instead of resizing on server

Bump vite to version 4
Switch from hls.js to video.js for better live ui
2024-11-10 18:45:08 -05:00 · 2023-01-12 01:48:15 -05:00 · 2023-01-12 01:39:57 -05:00 · 2023-01-12 01:39:57 -05:00 · 2023-01-12 00:07:33 -05:00
7 changed files with 697 additions and 529 deletions
--- a/package.json
+++ b/package.json
@ -3,18 +3,19 @@
  "version": "0.0.0",
  "type": "module",
  "devDependencies": {
-    "@vitejs/plugin-vue": "^3.1.2",
-    "sass": "^1.55.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.1.8",
-    "vue-tsc": "^1.0.9"
+    "@types/video.js": "^7.3.50",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "sass": "^1.57.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vue-tsc": "^1.0.24"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.2",
-    "hls.js": "^1.2.4",
+    "bootstrap": "^5.2.3",
    "pretty-ms": "^8.0.0",
-    "vue": "^3.2.41"
+    "video.js": "^7.20.3",
+    "vue": "^3.2.45"
  },
  "scripts": {
    "start": "pnpm run -r --include-workspace-root --parallel dev",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/server/package.json
+++ b/server/package.json
@ -1,16 +1,16 @@
 {
  "type": "module",
  "devDependencies": {
-    "@types/express": "^4.17.14",
+    "@types/express": "^4.17.15",
    "@types/express-ws": "^3.0.1",
    "@types/fluent-ffmpeg": "^2.1.20",
    "@types/js-yaml": "^4.0.5",
    "@types/mp4frag": "^0.6.1",
-    "@types/node": "^18.11.4",
+    "@types/node": "^18.11.18",
    "@types/node-fetch": "^2.6.2",
-    "@types/ws": "^8.5.3",
-    "tsx": "^3.11.0",
-    "typescript": "^4.8.4"
+    "@types/ws": "^8.5.4",
+    "tsx": "^3.12.2",
+    "typescript": "^4.9.4"
  },
  "dependencies": {
    "express": "^4.18.2",
@ -18,8 +18,8 @@
    "fluent-ffmpeg": "^2.1.2",
    "js-yaml": "^4.1.0",
    "mp4frag": "^0.6.0",
-    "node-fetch": "^3.2.10",
-    "ws": "^8.10.0"
+    "node-fetch": "^3.3.0",
+    "ws": "^8.12.0"
  },
  "scripts": {
    "start": "npm run dev",
--- a/server/pnpm-lock.yaml
+++ b/server/pnpm-lock.yaml
@ -1,23 +1,23 @@
 lockfileVersion: 5.4

 specifiers:
-  '@types/express': ^4.17.14
+  '@types/express': ^4.17.15
  '@types/express-ws': ^3.0.1
  '@types/fluent-ffmpeg': ^2.1.20
  '@types/js-yaml': ^4.0.5
  '@types/mp4frag': ^0.6.1
-  '@types/node': ^18.11.4
+  '@types/node': ^18.11.18
  '@types/node-fetch': ^2.6.2
-  '@types/ws': ^8.5.3
+  '@types/ws': ^8.5.4
  express: ^4.18.2
  express-ws: ^5.0.2
  fluent-ffmpeg: ^2.1.2
  js-yaml: ^4.1.0
  mp4frag: ^0.6.0
-  node-fetch: ^3.2.10
-  tsx: ^3.11.0
-  typescript: ^4.8.4
-  ws: ^8.10.0
+  node-fetch: ^3.3.0
+  tsx: ^3.12.2
+  typescript: ^4.9.4
+  ws: ^8.12.0

 dependencies:
  express: 4.18.2
@ -25,46 +25,46 @@ dependencies:
  fluent-ffmpeg: 2.1.2
  js-yaml: 4.1.0
  mp4frag: 0.6.0
-  node-fetch: 3.2.10
-  ws: 8.10.0
+  node-fetch: 3.3.0
+  ws: 8.12.0

 devDependencies:
-  '@types/express': 4.17.14
+  '@types/express': 4.17.15
  '@types/express-ws': 3.0.1
  '@types/fluent-ffmpeg': 2.1.20
  '@types/js-yaml': 4.0.5
  '@types/mp4frag': 0.6.1
-  '@types/node': 18.11.4
+  '@types/node': 18.11.18
  '@types/node-fetch': 2.6.2
-  '@types/ws': 8.5.3
-  tsx: 3.11.0
-  typescript: 4.8.4
+  '@types/ws': 8.5.4
+  tsx: 3.12.2
+  typescript: 4.9.4

 packages:

-  /@esbuild-kit/cjs-loader/2.4.0:
-    resolution: {integrity: sha512-DBBCiHPgL2B/elUpvCDhNHXnlZQ9sfO2uyt1OJyAXKT41beQEFY4OxZ6gwS+ZesRCbZ6JV8M7GEyOPkjv8kdIw==}
+  /@esbuild-kit/cjs-loader/2.4.1:
+    resolution: {integrity: sha512-lhc/XLith28QdW0HpHZvZKkorWgmCNT7sVelMHDj3HFdTfdqkwEKvT+aXVQtNAmCC39VJhunDkWhONWB7335mg==}
    dependencies:
      '@esbuild-kit/core-utils': 3.0.0
-      get-tsconfig: 4.2.0
+      get-tsconfig: 4.3.0
    dev: true

  /@esbuild-kit/core-utils/3.0.0:
    resolution: {integrity: sha512-TXmwH9EFS3DC2sI2YJWJBgHGhlteK0Xyu1VabwetMULfm3oYhbrsWV5yaSr2NTWZIgDGVLHbRf0inxbjXqAcmQ==}
    dependencies:
-      esbuild: 0.15.12
+      esbuild: 0.15.18
      source-map-support: 0.5.21
    dev: true

-  /@esbuild-kit/esm-loader/2.5.0:
-    resolution: {integrity: sha512-ySs0qOsiwj+hsgZM9/MniGdvfa9/WzqfFuIia8/5gSUPeIQIX2/tG91QakxPFOR35VFiwTB7wCiHtiS6dc6SkA==}
+  /@esbuild-kit/esm-loader/2.5.4:
+    resolution: {integrity: sha512-afmtLf6uqxD5IgwCzomtqCYIgz/sjHzCWZFvfS5+FzeYxOURPUo4QcHtqJxbxWOMOogKriZanN/1bJQE/ZL93A==}
    dependencies:
      '@esbuild-kit/core-utils': 3.0.0
-      get-tsconfig: 4.2.0
+      get-tsconfig: 4.3.0
    dev: true

-  /@esbuild/android-arm/0.15.12:
-    resolution: {integrity: sha512-IC7TqIqiyE0MmvAhWkl/8AEzpOtbhRNDo7aph47We1NbE5w2bt/Q+giAhe0YYeVpYnIhGMcuZY92qDK6dQauvA==}
+  /@esbuild/android-arm/0.15.18:
+    resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [android]
@ -72,8 +72,8 @@ packages:
    dev: true
    optional: true

-  /@esbuild/linux-loong64/0.15.12:
-    resolution: {integrity: sha512-tZEowDjvU7O7I04GYvWQOS4yyP9E/7YlsB0jjw1Ycukgr2ycEzKyIk5tms5WnLBymaewc6VmRKnn5IJWgK4eFw==}
+  /@esbuild/linux-loong64/0.15.18:
+    resolution: {integrity: sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==}
    engines: {node: '>=12'}
    cpu: [loong64]
    os: [linux]
@ -85,19 +85,19 @@ packages:
    resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
    dependencies:
      '@types/connect': 3.4.35
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
    dev: true

  /@types/connect/3.4.35:
    resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
    dependencies:
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
    dev: true

-  /@types/express-serve-static-core/4.17.31:
-    resolution: {integrity: sha512-DxMhY+NAsTwMMFHBTtJFNp5qiHKJ7TeqOo23zVEM9alT1Ml27Q3xcTH0xwxn7Q0BbMcVEJOs/7aQtUWupUQN3Q==}
+  /@types/express-serve-static-core/4.17.32:
+    resolution: {integrity: sha512-aI5h/VOkxOF2Z1saPy0Zsxs5avets/iaiAJYznQFm5By/pamU31xWKL//epiF4OfUA2qTOc9PV6tCUjhO8wlZA==}
    dependencies:
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
      '@types/qs': 6.9.7
      '@types/range-parser': 1.2.4
    dev: true
@ -105,16 +105,16 @@ packages:
  /@types/express-ws/3.0.1:
    resolution: {integrity: sha512-VguRXzcpPBF0IggIGpUoM65cZJDfMQxoc6dKoCz1yLzcwcXW7ft60yhq3ygKhyEhEIQFtLrWjyz4AJ1qjmzCFw==}
    dependencies:
-      '@types/express': 4.17.14
-      '@types/express-serve-static-core': 4.17.31
-      '@types/ws': 8.5.3
+      '@types/express': 4.17.15
+      '@types/express-serve-static-core': 4.17.32
+      '@types/ws': 8.5.4
    dev: true

-  /@types/express/4.17.14:
-    resolution: {integrity: sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==}
+  /@types/express/4.17.15:
+    resolution: {integrity: sha512-Yv0k4bXGOH+8a+7bELd2PqHQsuiANB+A8a4gnQrkRWzrkKlb6KHaVvyXhqs04sVW/OWlbPyYxRgYlIXLfrufMQ==}
    dependencies:
      '@types/body-parser': 1.19.2
-      '@types/express-serve-static-core': 4.17.31
+      '@types/express-serve-static-core': 4.17.32
      '@types/qs': 6.9.7
      '@types/serve-static': 1.15.0
    dev: true
@ -122,7 +122,7 @@ packages:
  /@types/fluent-ffmpeg/2.1.20:
    resolution: {integrity: sha512-B+OvhCdJ3LgEq2PhvWNOiB/EfwnXLElfMCgc4Z1K5zXgSfo9I6uGKwR/lqmNPFQuebNnes7re3gqkV77SyypLg==}
    dependencies:
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
    dev: true

  /@types/js-yaml/4.0.5:
@ -136,18 +136,18 @@ packages:
  /@types/mp4frag/0.6.1:
    resolution: {integrity: sha512-t5VL9dPiMmFwClo4j6tdVUhlflWtC3JKR046u/gOj7cNuCBR2DpmntMteiqOsFK2Ac5pMybShlHrPIPNQTWqKQ==}
    dependencies:
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
    dev: true

  /@types/node-fetch/2.6.2:
    resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
    dependencies:
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
      form-data: 3.0.1
    dev: true

-  /@types/node/18.11.4:
-    resolution: {integrity: sha512-BxcJpBu8D3kv/GZkx/gSMz6VnTJREBj/4lbzYOQueUOELkt8WrO6zAcSPmp9uRPEW/d+lUO8QK0W2xnS1hEU0A==}
+  /@types/node/18.11.18:
+    resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
    dev: true

  /@types/qs/6.9.7:
@ -162,13 +162,13 @@ packages:
    resolution: {integrity: sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==}
    dependencies:
      '@types/mime': 3.0.1
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
    dev: true

-  /@types/ws/8.5.3:
-    resolution: {integrity: sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==}
+  /@types/ws/8.5.4:
+    resolution: {integrity: sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==}
    dependencies:
-      '@types/node': 18.11.4
+      '@types/node': 18.11.18
    dev: true

  /accepts/1.3.8:
@ -251,7 +251,7 @@ packages:
    dev: false

  /cookie-signature/1.0.6:
-    resolution: {integrity: sha1-4wOogrNCzD7oylE6eZmXNNqzriw=}
+    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
    dev: false

  /cookie/0.5.0:
@ -291,7 +291,7 @@ packages:
    dev: false

  /ee-first/1.1.1:
-    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
    dev: false

  /encodeurl/1.0.2:
@ -299,8 +299,8 @@ packages:
    engines: {node: '>= 0.8'}
    dev: false

-  /esbuild-android-64/0.15.12:
-    resolution: {integrity: sha512-MJKXwvPY9g0rGps0+U65HlTsM1wUs9lbjt5CU19RESqycGFDRijMDQsh68MtbzkqWSRdEtiKS1mtPzKneaAI0Q==}
+  /esbuild-android-64/0.15.18:
+    resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [android]
@ -308,8 +308,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-android-arm64/0.15.12:
-    resolution: {integrity: sha512-Hc9SEcZbIMhhLcvhr1DH+lrrec9SFTiRzfJ7EGSBZiiw994gfkVV6vG0sLWqQQ6DD7V4+OggB+Hn0IRUdDUqvA==}
+  /esbuild-android-arm64/0.15.18:
+    resolution: {integrity: sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [android]
@ -317,8 +317,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-darwin-64/0.15.12:
-    resolution: {integrity: sha512-qkmqrTVYPFiePt5qFjP8w/S+GIUMbt6k8qmiPraECUWfPptaPJUGkCKrWEfYFRWB7bY23FV95rhvPyh/KARP8Q==}
+  /esbuild-darwin-64/0.15.18:
+    resolution: {integrity: sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [darwin]
@ -326,8 +326,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-darwin-arm64/0.15.12:
-    resolution: {integrity: sha512-z4zPX02tQ41kcXMyN3c/GfZpIjKoI/BzHrdKUwhC/Ki5BAhWv59A9M8H+iqaRbwpzYrYidTybBwiZAIWCLJAkw==}
+  /esbuild-darwin-arm64/0.15.18:
+    resolution: {integrity: sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [darwin]
@ -335,8 +335,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-freebsd-64/0.15.12:
-    resolution: {integrity: sha512-XFL7gKMCKXLDiAiBjhLG0XECliXaRLTZh6hsyzqUqPUf/PY4C6EJDTKIeqqPKXaVJ8+fzNek88285krSz1QECw==}
+  /esbuild-freebsd-64/0.15.18:
+    resolution: {integrity: sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [freebsd]
@ -344,8 +344,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-freebsd-arm64/0.15.12:
-    resolution: {integrity: sha512-jwEIu5UCUk6TjiG1X+KQnCGISI+ILnXzIzt9yDVrhjug2fkYzlLbl0K43q96Q3KB66v6N1UFF0r5Ks4Xo7i72g==}
+  /esbuild-freebsd-arm64/0.15.18:
+    resolution: {integrity: sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [freebsd]
@ -353,8 +353,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-32/0.15.12:
-    resolution: {integrity: sha512-uSQuSEyF1kVzGzuIr4XM+v7TPKxHjBnLcwv2yPyCz8riV8VUCnO/C4BF3w5dHiVpCd5Z1cebBtZJNlC4anWpwA==}
+  /esbuild-linux-32/0.15.18:
+    resolution: {integrity: sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [linux]
@ -362,8 +362,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-64/0.15.12:
-    resolution: {integrity: sha512-QcgCKb7zfJxqT9o5z9ZUeGH1k8N6iX1Y7VNsEi5F9+HzN1OIx7ESxtQXDN9jbeUSPiRH1n9cw6gFT3H4qbdvcA==}
+  /esbuild-linux-64/0.15.18:
+    resolution: {integrity: sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [linux]
@ -371,8 +371,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-arm/0.15.12:
-    resolution: {integrity: sha512-Wf7T0aNylGcLu7hBnzMvsTfEXdEdJY/hY3u36Vla21aY66xR0MS5I1Hw8nVquXjTN0A6fk/vnr32tkC/C2lb0A==}
+  /esbuild-linux-arm/0.15.18:
+    resolution: {integrity: sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==}
    engines: {node: '>=12'}
    cpu: [arm]
    os: [linux]
@ -380,8 +380,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-arm64/0.15.12:
-    resolution: {integrity: sha512-HtNq5xm8fUpZKwWKS2/YGwSfTF+339L4aIA8yphNKYJckd5hVdhfdl6GM2P3HwLSCORS++++7++//ApEwXEuAQ==}
+  /esbuild-linux-arm64/0.15.18:
+    resolution: {integrity: sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [linux]
@ -389,8 +389,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-mips64le/0.15.12:
-    resolution: {integrity: sha512-Qol3+AvivngUZkTVFgLpb0H6DT+N5/zM3V1YgTkryPYFeUvuT5JFNDR3ZiS6LxhyF8EE+fiNtzwlPqMDqVcc6A==}
+  /esbuild-linux-mips64le/0.15.18:
+    resolution: {integrity: sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==}
    engines: {node: '>=12'}
    cpu: [mips64el]
    os: [linux]
@ -398,8 +398,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-ppc64le/0.15.12:
-    resolution: {integrity: sha512-4D8qUCo+CFKaR0cGXtGyVsOI7w7k93Qxb3KFXWr75An0DHamYzq8lt7TNZKoOq/Gh8c40/aKaxvcZnTgQ0TJNg==}
+  /esbuild-linux-ppc64le/0.15.18:
+    resolution: {integrity: sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==}
    engines: {node: '>=12'}
    cpu: [ppc64]
    os: [linux]
@ -407,8 +407,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-riscv64/0.15.12:
-    resolution: {integrity: sha512-G9w6NcuuCI6TUUxe6ka0enjZHDnSVK8bO+1qDhMOCtl7Tr78CcZilJj8SGLN00zO5iIlwNRZKHjdMpfFgNn1VA==}
+  /esbuild-linux-riscv64/0.15.18:
+    resolution: {integrity: sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==}
    engines: {node: '>=12'}
    cpu: [riscv64]
    os: [linux]
@ -416,8 +416,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-linux-s390x/0.15.12:
-    resolution: {integrity: sha512-Lt6BDnuXbXeqSlVuuUM5z18GkJAZf3ERskGZbAWjrQoi9xbEIsj/hEzVnSAFLtkfLuy2DE4RwTcX02tZFunXww==}
+  /esbuild-linux-s390x/0.15.18:
+    resolution: {integrity: sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==}
    engines: {node: '>=12'}
    cpu: [s390x]
    os: [linux]
@ -425,8 +425,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-netbsd-64/0.15.12:
-    resolution: {integrity: sha512-jlUxCiHO1dsqoURZDQts+HK100o0hXfi4t54MNRMCAqKGAV33JCVvMplLAa2FwviSojT/5ZG5HUfG3gstwAG8w==}
+  /esbuild-netbsd-64/0.15.18:
+    resolution: {integrity: sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [netbsd]
@ -434,8 +434,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-openbsd-64/0.15.12:
-    resolution: {integrity: sha512-1o1uAfRTMIWNOmpf8v7iudND0L6zRBYSH45sofCZywrcf7NcZA+c7aFsS1YryU+yN7aRppTqdUK1PgbZVaB1Dw==}
+  /esbuild-openbsd-64/0.15.18:
+    resolution: {integrity: sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [openbsd]
@ -443,8 +443,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-sunos-64/0.15.12:
-    resolution: {integrity: sha512-nkl251DpoWoBO9Eq9aFdoIt2yYmp4I3kvQjba3jFKlMXuqQ9A4q+JaqdkCouG3DHgAGnzshzaGu6xofGcXyPXg==}
+  /esbuild-sunos-64/0.15.18:
+    resolution: {integrity: sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [sunos]
@ -452,8 +452,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-windows-32/0.15.12:
-    resolution: {integrity: sha512-WlGeBZHgPC00O08luIp5B2SP4cNCp/PcS+3Pcg31kdcJPopHxLkdCXtadLU9J82LCfw4TVls21A6lilQ9mzHrw==}
+  /esbuild-windows-32/0.15.18:
+    resolution: {integrity: sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==}
    engines: {node: '>=12'}
    cpu: [ia32]
    os: [win32]
@ -461,8 +461,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-windows-64/0.15.12:
-    resolution: {integrity: sha512-VActO3WnWZSN//xjSfbiGOSyC+wkZtI8I4KlgrTo5oHJM6z3MZZBCuFaZHd8hzf/W9KPhF0lY8OqlmWC9HO5AA==}
+  /esbuild-windows-64/0.15.18:
+    resolution: {integrity: sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==}
    engines: {node: '>=12'}
    cpu: [x64]
    os: [win32]
@ -470,8 +470,8 @@ packages:
    dev: true
    optional: true

-  /esbuild-windows-arm64/0.15.12:
-    resolution: {integrity: sha512-Of3MIacva1OK/m4zCNIvBfz8VVROBmQT+gRX6pFTLPngFYcj6TFH/12VveAqq1k9VB2l28EoVMNMUCcmsfwyuA==}
+  /esbuild-windows-arm64/0.15.18:
+    resolution: {integrity: sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==}
    engines: {node: '>=12'}
    cpu: [arm64]
    os: [win32]
@ -479,34 +479,34 @@ packages:
    dev: true
    optional: true

-  /esbuild/0.15.12:
-    resolution: {integrity: sha512-PcT+/wyDqJQsRVhaE9uX/Oq4XLrFh0ce/bs2TJh4CSaw9xuvI+xFrH2nAYOADbhQjUgAhNWC5LKoUsakm4dxng==}
+  /esbuild/0.15.18:
+    resolution: {integrity: sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==}
    engines: {node: '>=12'}
    hasBin: true
    requiresBuild: true
    optionalDependencies:
-      '@esbuild/android-arm': 0.15.12
-      '@esbuild/linux-loong64': 0.15.12
-      esbuild-android-64: 0.15.12
-      esbuild-android-arm64: 0.15.12
-      esbuild-darwin-64: 0.15.12
-      esbuild-darwin-arm64: 0.15.12
-      esbuild-freebsd-64: 0.15.12
-      esbuild-freebsd-arm64: 0.15.12
-      esbuild-linux-32: 0.15.12
-      esbuild-linux-64: 0.15.12
-      esbuild-linux-arm: 0.15.12
-      esbuild-linux-arm64: 0.15.12
-      esbuild-linux-mips64le: 0.15.12
-      esbuild-linux-ppc64le: 0.15.12
-      esbuild-linux-riscv64: 0.15.12
-      esbuild-linux-s390x: 0.15.12
-      esbuild-netbsd-64: 0.15.12
-      esbuild-openbsd-64: 0.15.12
-      esbuild-sunos-64: 0.15.12
-      esbuild-windows-32: 0.15.12
-      esbuild-windows-64: 0.15.12
-      esbuild-windows-arm64: 0.15.12
+      '@esbuild/android-arm': 0.15.18
+      '@esbuild/linux-loong64': 0.15.18
+      esbuild-android-64: 0.15.18
+      esbuild-android-arm64: 0.15.18
+      esbuild-darwin-64: 0.15.18
+      esbuild-darwin-arm64: 0.15.18
+      esbuild-freebsd-64: 0.15.18
+      esbuild-freebsd-arm64: 0.15.18
+      esbuild-linux-32: 0.15.18
+      esbuild-linux-64: 0.15.18
+      esbuild-linux-arm: 0.15.18
+      esbuild-linux-arm64: 0.15.18
+      esbuild-linux-mips64le: 0.15.18
+      esbuild-linux-ppc64le: 0.15.18
+      esbuild-linux-riscv64: 0.15.18
+      esbuild-linux-s390x: 0.15.18
+      esbuild-netbsd-64: 0.15.18
+      esbuild-openbsd-64: 0.15.18
+      esbuild-sunos-64: 0.15.18
+      esbuild-windows-32: 0.15.18
+      esbuild-windows-64: 0.15.18
+      esbuild-windows-arm64: 0.15.18
    dev: true

  /escape-html/1.0.3:
@ -623,7 +623,7 @@ packages:
    dev: false

  /fresh/0.5.2:
-    resolution: {integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=}
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
    engines: {node: '>= 0.6'}
    dev: false

@ -647,8 +647,8 @@ packages:
      has-symbols: 1.0.3
    dev: false

-  /get-tsconfig/4.2.0:
-    resolution: {integrity: sha512-X8u8fREiYOE6S8hLbq99PeykTDoLVnxvF4DjWKJmz9xy2nNRdUcV8ZN9tniJFeKyTU3qnC9lL8n4Chd6LmVKHg==}
+  /get-tsconfig/4.3.0:
+    resolution: {integrity: sha512-YCcF28IqSay3fqpIu5y3Krg/utCBHBeoflkZyHj/QcqI2nrLPC3ZegS9CmIo+hJb8K7aiGsuUl7PwWVjNG2HQQ==}
    dev: true

  /has-symbols/1.0.3:
@ -702,12 +702,12 @@ packages:
    dev: false

  /media-typer/0.3.0:
-    resolution: {integrity: sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=}
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
    engines: {node: '>= 0.6'}
    dev: false

  /merge-descriptors/1.0.1:
-    resolution: {integrity: sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=}
+    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
    dev: false

  /methods/1.1.2:
@ -754,8 +754,8 @@ packages:
    engines: {node: '>=10.5.0'}
    dev: false

-  /node-fetch/3.2.10:
-    resolution: {integrity: sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==}
+  /node-fetch/3.3.0:
+    resolution: {integrity: sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
    dependencies:
      data-uri-to-buffer: 4.0.0
@ -780,7 +780,7 @@ packages:
    dev: false

  /path-to-regexp/0.1.7:
-    resolution: {integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=}
+    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
    dev: false

  /proxy-addr/2.0.7:
@ -888,13 +888,13 @@ packages:
    engines: {node: '>=0.6'}
    dev: false

-  /tsx/3.11.0:
-    resolution: {integrity: sha512-q+q4xxu41+AafVwvAGqtNJ1ekPFd33ZhTMXvgIpHMqv/W89efwDRE9IyjhEAZm5iTHsshKaf1BYWSk789BrNCA==}
+  /tsx/3.12.2:
+    resolution: {integrity: sha512-ykAEkoBg30RXxeOMVeZwar+JH632dZn9EUJVyJwhfag62k6UO/dIyJEV58YuLF6e5BTdV/qmbQrpkWqjq9cUnQ==}
    hasBin: true
    dependencies:
-      '@esbuild-kit/cjs-loader': 2.4.0
+      '@esbuild-kit/cjs-loader': 2.4.1
      '@esbuild-kit/core-utils': 3.0.0
-      '@esbuild-kit/esm-loader': 2.5.0
+      '@esbuild-kit/esm-loader': 2.5.4
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
@ -907,8 +907,8 @@ packages:
      mime-types: 2.1.35
    dev: false

-  /typescript/4.8.4:
-    resolution: {integrity: sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==}
+  /typescript/4.9.4:
+    resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
    engines: {node: '>=4.2.0'}
    hasBin: true
    dev: true
@ -919,7 +919,7 @@ packages:
    dev: false

  /utils-merge/1.0.1:
-    resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
    engines: {node: '>= 0.4.0'}
    dev: false

@ -953,12 +953,12 @@ packages:
        optional: true
    dev: false

-  /ws/8.10.0:
-    resolution: {integrity: sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==}
+  /ws/8.12.0:
+    resolution: {integrity: sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==}
    engines: {node: '>=10.0.0'}
    peerDependencies:
      bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
+      utf-8-validate: '>=5.0.2'
    peerDependenciesMeta:
      bufferutil:
        optional: true
--- a/server/src/camera-stream.ts
+++ b/server/src/camera-stream.ts
@ -36,8 +36,6 @@ function start_ffmpeg(
    ])
    .noAudio()
    .videoCodec('libx264')
-    .size('640x480')
-    .autopad()
    .videoFilter('hqdn3d')
    .videoFilters(transforms)
    .format('mp4')
--- a/src/PrinterCard.vue
+++ b/src/PrinterCard.vue
@ -3,7 +3,17 @@
    <h3 class="card-header" :data-color="color">
      {{ name || 'Unknown' }}
    </h3>
-    <video muted class="card-img webcam" controls autoplay ref="video"></video>
+    <video-js
+      ref="video"
+      class="card-img vjs-4-3"
+      controls
+      autoplay
+      muted
+      preload="auto"
+    >
+      <source :src="`/webcam/${slug}.m3u8`" />
+    </video-js>
+
    <div class="card-body" v-if="status">
      <div>{{ status.state.text }}</div>
      <div>
@ -44,8 +54,9 @@
 </template>

 <script setup lang="ts">
-import Hls from 'hls.js';
-import { computed, onMounted, Ref, ref, watchEffect } from 'vue';
+import videojs from 'video.js';
+import 'video.js/dist/video-js.css';
+import { computed, Ref, ref, watchEffect } from 'vue';
 import prettyMilliseconds from 'pretty-ms';

 import { CurrentOrHistoryPayload } from '../types/octoprint';
@ -63,34 +74,9 @@ export interface Props {
 export type PrinterInfo = Omit<Props, 'slug' | 'now'>;

 const props = defineProps<Props>();
+
 const video: Ref<HTMLMediaElement | null> = ref(null);

-const hls: Ref<Hls | null> = ref(null);
-
-if (Hls.isSupported()) {
-  hls.value = new Hls({
-    liveDurationInfinity: true,
-    backBufferLength: 30,
-    manifestLoadingTimeOut: 1000,
-    manifestLoadingMaxRetry: 30,
-    manifestLoadingRetryDelay: 500,
-    //debug: true,
-  });
-  hls.value.on(Hls.Events.MEDIA_ATTACHED, () => {
-    hls.value!.loadSource(`/webcam/${props.slug}.m3u8`);
-    hls.value!.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
-      video.value?.play();
-      console.log(
-        'manifest loaded, found ' + data.levels.length + ' quality level'
-      );
-    });
-  });
-
-  hls.value.on(Hls.Events.ERROR, (event, data) => {
-    console.log(data);
-  });
-}
-
 function formatDuration(seconds: number): string {
  return prettyMilliseconds(seconds * 1000);
 }
@ -111,11 +97,12 @@ const lastUpdateString = computed(() => {
 });

 watchEffect(() => {
-  console.log(video.value, hls.value);
-  if (hls.value && video.value) {
-    // if hls and video element are valid, bind them together
-    hls.value.attachMedia(video.value);
-    console.log('video and hls.js are now bound together !');
+  if (video.value) {
+    // if video element valid, bind to videojs
+    videojs(video.value, {
+      liveui: true,
+      liveTracker: { trackingThreshold: 0 },
+    });
  }
 });
 </script>
@ -147,8 +134,4 @@ $bs-colors: ('red', 'orange', 'yellow', 'green', 'blue', 'white');
    color: var(--bs-light);
  }
 }
-
-.webcam {
-  background-color: black;
-}
 </style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -3,7 +3,15 @@ import vue from '@vitejs/plugin-vue';

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag == 'video-js',
+        },
+      },
+    }),
+  ],
  server: {
    proxy: {
      '/ws': {
Author	SHA1	Message	Date
Adam Goldsmith	a6a097a7f7	Constrain video aspect ratio on client instead of resizing on server	2023-01-12 01:48:15 -05:00
Adam Goldsmith	7e8583f8ed	Bump vite to version 4	2023-01-12 01:39:57 -05:00
Adam Goldsmith	2782a02954	Switch from hls.js to video.js for better live ui	2023-01-12 01:39:57 -05:00
Adam Goldsmith	6c53556c27	Bump dependencies	2023-01-12 00:07:33 -05:00