From 4d559bd2670bea59fca8bcb3fdee709855c9f091 Mon Sep 17 00:00:00 2001 From: Jerome Wu Date: Sat, 5 Aug 2023 14:41:45 +0800 Subject: [PATCH] Revamp vanilla-app --- apps/vanilla-app/.gitignore | 2 +- apps/vanilla-app/README.md | 1 + apps/vanilla-app/download-assets.js | 32 ++++--- apps/vanilla-app/package.json | 4 +- .../{ => public}/concatDemuxer.html | 0 apps/vanilla-app/{ => public}/style.css | 0 apps/vanilla-app/public/transcode-mt.html | 45 +++++++++ .../{ => public}/transcode.esm.html | 0 apps/vanilla-app/{ => public}/transcode.html | 0 apps/vanilla-app/{ => public}/trim.html | 0 apps/vanilla-app/server.js | 19 ++++ package-lock.json | 91 +++++++++---------- 12 files changed, 133 insertions(+), 61 deletions(-) rename apps/vanilla-app/{ => public}/concatDemuxer.html (100%) rename apps/vanilla-app/{ => public}/style.css (100%) create mode 100644 apps/vanilla-app/public/transcode-mt.html rename apps/vanilla-app/{ => public}/transcode.esm.html (100%) rename apps/vanilla-app/{ => public}/transcode.html (100%) rename apps/vanilla-app/{ => public}/trim.html (100%) create mode 100644 apps/vanilla-app/server.js diff --git a/apps/vanilla-app/.gitignore b/apps/vanilla-app/.gitignore index 29d5e43..5d59ce3 100644 --- a/apps/vanilla-app/.gitignore +++ b/apps/vanilla-app/.gitignore @@ -1,2 +1,2 @@ *.tgz -assets +public/assets diff --git a/apps/vanilla-app/README.md b/apps/vanilla-app/README.md index 8783380..c9d8306 100644 --- a/apps/vanilla-app/README.md +++ b/apps/vanilla-app/README.md @@ -23,6 +23,7 @@ Visit http://localhost:8080 to check avaiable examples. | Example | Description | | ------- | ----------- | | transcode.html | Transcoding example | +| transcode-mt.html | Transcoding example using multi-thread | | transcode.esm.html | Transcoding example using module | | trim.html | Video trimming exmple | | concatDemuxer.html | Video concat exmple | diff --git a/apps/vanilla-app/download-assets.js b/apps/vanilla-app/download-assets.js index 1ace8b5..8ca1851 100644 --- a/apps/vanilla-app/download-assets.js +++ b/apps/vanilla-app/download-assets.js @@ -1,30 +1,38 @@ -const tar = require('tar'); -const fs = require('fs'); +const tar = require("tar"); +const fs = require("fs"); -const NPM_URL = 'https://registry.npmjs.org'; +const NPM_URL = "https://registry.npmjs.org"; +const ROOT = "public/assets"; -const FFMPEG_VERSION = '0.12.2'; -const UTIL_VERSION = '0.12.0'; -const CORE_VERSION = '0.12.1'; +const FFMPEG_VERSION = "0.12.2"; +const UTIL_VERSION = "0.12.0"; +const CORE_VERSION = "0.12.1"; const FFMPEG_TGZ = `ffmpeg-${FFMPEG_VERSION}.tgz`; const UTIL_TGZ = `util-${UTIL_VERSION}.tgz`; const CORE_TGZ = `core-${CORE_VERSION}.tgz`; +const CORE_MT_TGZ = `core-mt-${CORE_VERSION}.tgz`; const FFMPEG_TGZ_URL = `${NPM_URL}/@ffmpeg/ffmpeg/-/${FFMPEG_TGZ}`; const UTIL_TGZ_URL = `${NPM_URL}/@ffmpeg/util/-/${UTIL_TGZ}`; const CORE_TGZ_URL = `${NPM_URL}/@ffmpeg/core/-/${CORE_TGZ}`; +const CORE_MT_TGZ_URL = `${NPM_URL}/@ffmpeg/core-mt/-/${CORE_MT_TGZ}`; + +const mkdir = (dir) => { + !fs.existsSync(dir) && fs.mkdirSync(dir); +}; const downloadAndUntar = async (url, tgzName, dst) => { console.log(`download and untar ${url}`); - fs.mkdirSync(dst); + mkdir(`${ROOT}/${dst}`); const data = Buffer.from(await (await fetch(url)).arrayBuffer()); fs.writeFileSync(tgzName, data); - await tar.x({ file: tgzName, C: dst }); + await tar.x({ file: tgzName, C: `${ROOT}/${dst}` }); }; -fs.mkdirSync('assets'); -downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, 'assets/ffmpeg'); -downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, 'assets/util'); -downloadAndUntar(CORE_TGZ_URL, CORE_TGZ, 'assets/core'); +mkdir(ROOT); +downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, "ffmpeg"); +downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, "util"); +downloadAndUntar(CORE_TGZ_URL, CORE_TGZ, "core"); +downloadAndUntar(CORE_MT_TGZ_URL, CORE_MT_TGZ, "core-mt"); diff --git a/apps/vanilla-app/package.json b/apps/vanilla-app/package.json index ade7d89..63b8b02 100644 --- a/apps/vanilla-app/package.json +++ b/apps/vanilla-app/package.json @@ -5,11 +5,13 @@ "private": true, "scripts": { "download": "node download-assets.js", - "start": "npx http-server -c-1" + "start": "node server.js" }, "author": "Jerome Wu ", "license": "MIT", "dependencies": { + "express": "^4.18.2", + "serve-index": "^1.9.1", "tar": "^6.1.15" } } diff --git a/apps/vanilla-app/concatDemuxer.html b/apps/vanilla-app/public/concatDemuxer.html similarity index 100% rename from apps/vanilla-app/concatDemuxer.html rename to apps/vanilla-app/public/concatDemuxer.html diff --git a/apps/vanilla-app/style.css b/apps/vanilla-app/public/style.css similarity index 100% rename from apps/vanilla-app/style.css rename to apps/vanilla-app/public/style.css diff --git a/apps/vanilla-app/public/transcode-mt.html b/apps/vanilla-app/public/transcode-mt.html new file mode 100644 index 0000000..68be0c1 --- /dev/null +++ b/apps/vanilla-app/public/transcode-mt.html @@ -0,0 +1,45 @@ + + + + + + + +

Upload a video to transcode to mp4 (x264) and play!

+
+ +

+ + + diff --git a/apps/vanilla-app/transcode.esm.html b/apps/vanilla-app/public/transcode.esm.html similarity index 100% rename from apps/vanilla-app/transcode.esm.html rename to apps/vanilla-app/public/transcode.esm.html diff --git a/apps/vanilla-app/transcode.html b/apps/vanilla-app/public/transcode.html similarity index 100% rename from apps/vanilla-app/transcode.html rename to apps/vanilla-app/public/transcode.html diff --git a/apps/vanilla-app/trim.html b/apps/vanilla-app/public/trim.html similarity index 100% rename from apps/vanilla-app/trim.html rename to apps/vanilla-app/public/trim.html diff --git a/apps/vanilla-app/server.js b/apps/vanilla-app/server.js new file mode 100644 index 0000000..bc59adf --- /dev/null +++ b/apps/vanilla-app/server.js @@ -0,0 +1,19 @@ +const path = require("path"); +const express = require("express"); +const serveIndex = require("serve-index"); +const app = express(); +const PORT = 8080; +const ROOT = path.join(__dirname, "public"); + +app.use((_, res, next) => { + res.append("Cross-Origin-Opener-Policy", "same-origin"); + res.append("Cross-Origin-Embedder-Policy", "require-corp"); + next(); +}); + +app.use(express.static(ROOT)); +app.use("/", serveIndex(ROOT)); + +app.listen(PORT, () => { + console.log(`Listening on port ${PORT}`); +}); diff --git a/package-lock.json b/package-lock.json index 85171c4..950e709 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ }, "apps/browser": { "version": "0.12.0-alpha.0", + "extraneous": true, "license": "MIT", "dependencies": { "tar": "^6.1.15" @@ -280,6 +281,16 @@ "node": ">=14.17" } }, + "apps/vanilla-app": { + "name": "browser", + "version": "0.12.0-alpha.0", + "license": "MIT", + "dependencies": { + "express": "^4.18.2", + "serve-index": "^1.9.1", + "tar": "^6.1.15" + } + }, "apps/vue-vite-app": { "version": "0.0.0", "dependencies": { @@ -6391,8 +6402,9 @@ "license": "MIT" }, "node_modules/body-parser": { - "version": "1.20.0", - "license": "MIT", + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", + "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", "dependencies": { "bytes": "3.1.2", "content-type": "~1.0.4", @@ -6402,7 +6414,7 @@ "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.10.3", + "qs": "6.11.0", "raw-body": "2.5.1", "type-is": "~1.6.18", "unpipe": "1.0.0" @@ -6414,41 +6426,32 @@ }, "node_modules/body-parser/node_modules/bytes": { "version": "3.1.2", - "license": "MIT", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", "engines": { "node": ">= 0.8" } }, "node_modules/body-parser/node_modules/debug": { "version": "2.6.9", - "license": "MIT", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "dependencies": { "ms": "2.0.0" } }, "node_modules/body-parser/node_modules/depd": { "version": "2.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", "engines": { "node": ">= 0.8" } }, "node_modules/body-parser/node_modules/ms": { "version": "2.0.0", - "license": "MIT" - }, - "node_modules/body-parser/node_modules/qs": { - "version": "6.10.3", - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, "node_modules/bonjour-service": { "version": "1.0.14", @@ -6650,7 +6653,7 @@ } }, "node_modules/browser": { - "resolved": "apps/browser", + "resolved": "apps/vanilla-app", "link": true }, "node_modules/browser-stdout": { @@ -7352,8 +7355,9 @@ } }, "node_modules/content-type": { - "version": "1.0.4", - "license": "MIT", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", "engines": { "node": ">= 0.6" } @@ -9013,12 +9017,13 @@ } }, "node_modules/express": { - "version": "4.18.1", - "license": "MIT", + "version": "4.18.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", + "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.0", + "body-parser": "1.20.1", "content-disposition": "0.5.4", "content-type": "~1.0.4", "cookie": "0.5.0", @@ -9037,7 +9042,7 @@ "parseurl": "~1.3.3", "path-to-regexp": "0.1.7", "proxy-addr": "~2.0.7", - "qs": "6.10.3", + "qs": "6.11.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", "send": "0.18.0", @@ -9088,19 +9093,6 @@ "version": "0.1.7", "license": "MIT" }, - "node_modules/express/node_modules/qs": { - "version": "6.10.3", - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/express/node_modules/range-parser": { "version": "1.2.1", "license": "MIT", @@ -10546,7 +10538,8 @@ }, "node_modules/iconv-lite": { "version": "0.4.24", - "license": "MIT", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dependencies": { "safer-buffer": ">= 2.1.2 < 3" }, @@ -11769,7 +11762,8 @@ }, "node_modules/media-typer": { "version": "0.3.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", "engines": { "node": ">= 0.6" } @@ -13737,7 +13731,6 @@ }, "node_modules/qs": { "version": "6.11.0", - "dev": true, "license": "BSD-3-Clause", "dependencies": { "side-channel": "^1.0.4" @@ -13790,7 +13783,8 @@ }, "node_modules/raw-body": { "version": "2.5.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", + "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -13803,7 +13797,8 @@ }, "node_modules/raw-body/node_modules/bytes": { "version": "3.1.2", - "license": "MIT", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", "engines": { "node": ">= 0.8" } @@ -15138,7 +15133,8 @@ }, "node_modules/serve-index": { "version": "1.9.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", + "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==", "dependencies": { "accepts": "~1.3.4", "batch": "0.6.1", @@ -16244,7 +16240,8 @@ }, "node_modules/type-is": { "version": "1.6.18", - "license": "MIT", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", "dependencies": { "media-typer": "0.3.0", "mime-types": "~2.1.24"