From 57a029afa9c4147a55c833b0616abf65fe06fcd6 Mon Sep 17 00:00:00 2001 From: jeromewu Date: Thu, 3 Aug 2023 08:49:38 +0000 Subject: [PATCH] Add browser examples --- apps/browser/.gitignore | 2 + apps/browser/README.md | 32 ++++++---- apps/browser/concatDemuxer.html | 10 +-- apps/browser/download-assets.js | 31 ++++++++++ apps/browser/package.json | 8 ++- apps/browser/transcode.esm.html | 6 +- apps/browser/transcode.html | 6 +- apps/browser/trim.html | 6 +- package-lock.json | 106 ++++++++++++++++++++++++-------- packages/ffmpeg/package.json | 3 +- 10 files changed, 155 insertions(+), 55 deletions(-) create mode 100644 apps/browser/.gitignore create mode 100644 apps/browser/download-assets.js diff --git a/apps/browser/.gitignore b/apps/browser/.gitignore new file mode 100644 index 0000000..29d5e43 --- /dev/null +++ b/apps/browser/.gitignore @@ -0,0 +1,2 @@ +*.tgz +assets diff --git a/apps/browser/README.md b/apps/browser/README.md index cb6b78d..d7d2a76 100644 --- a/apps/browser/README.md +++ b/apps/browser/README.md @@ -1,5 +1,14 @@ -Browser Examples -================== +# Browser Examples + +## Setup + +You need to download assets from npm before running the examples: + +```bash +$ npm run download +``` + +## Run To run this example, execute: @@ -7,16 +16,13 @@ To run this example, execute: $ npm start ``` -Visit http://localhost:3000/examples/browser/transcode.html +Visit http://localhost:8080 to check avaiable examples. +## Examples -Web Worker Examples -================== - -To run the webworker example, execute: - -``` -$ npm run start:worker -``` - -Visit http://localhost:3000/examples/browser/transcode.worker.html +| Example | Description | +| ------- | ----------- | +| transcode.html | Transcoding example | +| transcode.esm.html | Transcoding example using module | +| trim.html | Video trimming exmple | +| concatDemuxer.html | Video concat exmple | diff --git a/apps/browser/concatDemuxer.html b/apps/browser/concatDemuxer.html index 1f13bcf..2335b8e 100644 --- a/apps/browser/concatDemuxer.html +++ b/apps/browser/concatDemuxer.html @@ -1,8 +1,8 @@ - - + + @@ -22,11 +22,11 @@ ffmpeg.on("log", ({ message }) => { console.log(message); }) - ffmpeg.on("progress", ({ progress }) => { - message.innerHTML = `${progress * 100} %`; + ffmpeg.on("progress", ({ progress, time }) => { + message.innerHTML = `${time / 1000000} s`; }); await ffmpeg.load({ - coreURL: "/packages/core/dist/umd/ffmpeg-core.js", + coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js", }); } message.innerHTML = "Start Concating"; diff --git a/apps/browser/download-assets.js b/apps/browser/download-assets.js new file mode 100644 index 0000000..c83fd66 --- /dev/null +++ b/apps/browser/download-assets.js @@ -0,0 +1,31 @@ +const tar = require('tar'); +const fs = require('fs'); + +const NPM_URL = 'https://registry.npmjs.org'; + +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 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 downloadAndUntar = async (url, tgzName, dst) => { + console.log(`download and untar ${url}`); + fs.mkdirSync(dst); + const data = Buffer.from(await (await fetch(url)).arrayBuffer()); + fs.writeFileSync(tgzName, data); + + await tar.x({ file: tgzName, C: dst }); +}; + +(async () => { + await downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, 'assets/ffmpeg'); + await downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, 'assets/util'); + await downloadAndUntar(CORE_TGZ_URL, CORE_TGZ, 'assets/core'); +})(); diff --git a/apps/browser/package.json b/apps/browser/package.json index 3edeb17..ade7d89 100644 --- a/apps/browser/package.json +++ b/apps/browser/package.json @@ -4,8 +4,12 @@ "description": "browser example", "private": true, "scripts": { - "start": "npx http-server -c-1 ../../" + "download": "node download-assets.js", + "start": "npx http-server -c-1" }, "author": "Jerome Wu ", - "license": "MIT" + "license": "MIT", + "dependencies": { + "tar": "^6.1.15" + } } diff --git a/apps/browser/transcode.esm.html b/apps/browser/transcode.esm.html index b797f9d..59df21a 100644 --- a/apps/browser/transcode.esm.html +++ b/apps/browser/transcode.esm.html @@ -8,8 +8,8 @@

- + +

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

@@ -25,7 +25,7 @@ message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`; }); await ffmpeg.load({ - coreURL: "/packages/core/dist/umd/ffmpeg-core.js", + coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js", }); } const { name } = files[0]; diff --git a/apps/browser/trim.html b/apps/browser/trim.html index 3c229bc..a0aa2bf 100644 --- a/apps/browser/trim.html +++ b/apps/browser/trim.html @@ -1,8 +1,8 @@ - - + +

Upload a mp4 (x264) video and trim its first 1 seconds and play!

@@ -25,7 +25,7 @@ message.innerHTML = `${progress * 100} %`; }); await ffmpeg.load({ - coreURL: "/packages/core/dist/umd/ffmpeg-core.js", + coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js", }); } const { name } = files[0]; diff --git a/package-lock.json b/package-lock.json index 377b61e..85171c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "packages": { "": { "name": "root", - "hasInstallScript": true, "workspaces": [ "packages/*", "apps/*" @@ -21,7 +20,10 @@ }, "apps/browser": { "version": "0.12.0-alpha.0", - "license": "MIT" + "license": "MIT", + "dependencies": { + "tar": "^6.1.15" + } }, "apps/react-vite-app": { "version": "0.0.0", @@ -7056,6 +7058,14 @@ "fsevents": "~2.3.2" } }, + "node_modules/chownr": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", + "engines": { + "node": ">=10" + } + }, "node_modules/chrome-trace-event": { "version": "1.0.3", "license": "MIT", @@ -9685,6 +9695,28 @@ "node": ">=10" } }, + "node_modules/fs-minipass": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", + "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", + "dependencies": { + "minipass": "^3.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/fs-minipass/node_modules/minipass": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/fs-monkey": { "version": "1.0.3", "license": "Unlicense" @@ -11924,9 +11956,31 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/minizlib": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", + "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", + "dependencies": { + "minipass": "^3.0.0", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/minizlib/node_modules/minipass": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/mkdirp": { "version": "1.0.4", - "dev": true, "license": "MIT", "bin": { "mkdirp": "bin/cmd.js" @@ -15779,6 +15833,22 @@ "node": ">=6" } }, + "node_modules/tar": { + "version": "6.1.15", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz", + "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==", + "dependencies": { + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "minipass": "^5.0.0", + "minizlib": "^2.1.1", + "mkdirp": "^1.0.3", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/tar-fs": { "version": "2.1.1", "dev": true, @@ -15823,6 +15893,14 @@ "node": ">= 6" } }, + "node_modules/tar/node_modules/minipass": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", + "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/terser": { "version": "5.19.2", "license": "BSD-2-Clause", @@ -17634,25 +17712,6 @@ "dev": true, "license": "MIT" }, - "node_modules/worker-loader": { - "version": "3.0.8", - "dev": true, - "license": "MIT", - "dependencies": { - "loader-utils": "^2.0.0", - "schema-utils": "^3.0.0" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" - } - }, "node_modules/workerpool": { "version": "6.2.1", "dev": true, @@ -17929,8 +17988,7 @@ "rimraf": "^5.0.1", "ts-loader": "^9.4.4", "typescript": "^5.1.6", - "webpack-cli": "^5.1.4", - "worker-loader": "^3.0.8" + "webpack-cli": "^5.1.4" }, "engines": { "node": ">=18.17.0" diff --git a/packages/ffmpeg/package.json b/packages/ffmpeg/package.json index d7644fc..3822dec 100644 --- a/packages/ffmpeg/package.json +++ b/packages/ffmpeg/package.json @@ -54,8 +54,7 @@ "rimraf": "^5.0.1", "ts-loader": "^9.4.4", "typescript": "^5.1.6", - "webpack-cli": "^5.1.4", - "worker-loader": "^3.0.8" + "webpack-cli": "^5.1.4" }, "dependencies": { "@ffmpeg/types": "^0.12.0"