dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add browser examples

Browse Source
This commit is contained in:
jeromewu 2023-08-03 08:49:38 +00:00
parent 40a97e32c6
commit 57a029afa9
10 changed files with 155 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
*.tgz
assets

32
apps/browser/README.md
View File

@ -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: To run this example, execute:
@ -7,16 +16,13 @@ To run this example, execute:
$ npm start $ npm start
``` ```
Visit http://localhost:3000/examples/browser/transcode.html Visit http://localhost:8080 to check avaiable examples.
## Examples
Web Worker Examples | Example | Description |
================== | ------- | ----------- |
| transcode.html | Transcoding example |
To run the webworker example, execute: | transcode.esm.html | Transcoding example using module |
| trim.html | Video trimming exmple |
``` | concatDemuxer.html | Video concat exmple |
$ npm run start:worker
```
Visit http://localhost:3000/examples/browser/transcode.worker.html

10
apps/browser/concatDemuxer.html
View File

@ -1,8 +1,8 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script> <script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script> <script src="/assets/util/package/dist/umd/index.js"></script>
</head> </head>
<body> <body>
@ -22,11 +22,11 @@
ffmpeg.on("log", ({ message }) => { ffmpeg.on("log", ({ message }) => {
console.log(message); console.log(message);
}) })
ffmpeg.on("progress", ({ progress }) => { ffmpeg.on("progress", ({ progress, time }) => {
message.innerHTML = `${progress * 100} %`; message.innerHTML = `${time / 1000000} s`;
}); });
await ffmpeg.load({ await ffmpeg.load({
coreURL: "/packages/core/dist/umd/ffmpeg-core.js", coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
}); });
} }
message.innerHTML = "Start Concating"; message.innerHTML = "Start Concating";

31
apps/browser/download-assets.js Normal file
View File

@ -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');
})();

8
apps/browser/package.json
View File

@ -4,8 +4,12 @@
"description": "browser example", "description": "browser example",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "npx http-server -c-1 ../../" "download": "node download-assets.js",
"start": "npx http-server -c-1"
}, },
"author": "Jerome Wu <jeromewus@gmail.com>", "author": "Jerome Wu <jeromewus@gmail.com>",
"license": "MIT" "license": "MIT",
"dependencies": {
"tar": "^6.1.15"
}
} }

6
apps/browser/transcode.esm.html
View File

@ -8,8 +8,8 @@
<input type="file" id="uploader"> <input type="file" id="uploader">
<p id="message"></p> <p id="message"></p>
<script type="module"> <script type="module">
import { FFmpeg } from "../../packages/ffmpeg/dist/esm/index.js"; import { FFmpeg } from "/assets/ffmpeg/package/dist/esm/index.js";
import { fetchFile } from "../../packages/util/dist/esm/index.js"; import { fetchFile } from "/assets/util/package/dist/esm/index.js";
let ffmpeg = null; let ffmpeg = null;
const transcode = async ({ target: { files } }) => { const transcode = async ({ target: { files } }) => {
@ -23,7 +23,7 @@
message.innerHTML = `${progress * 100} %`; message.innerHTML = `${progress * 100} %`;
}); });
await ffmpeg.load({ await ffmpeg.load({
coreURL: "/packages/core/dist/esm/ffmpeg-core.js", coreURL: "/assets/core/package/dist/esm/ffmpeg-core.js",
}); });
} }
const { name } = files[0]; const { name } = files[0];

6
apps/browser/transcode.html
View File

@ -1,8 +1,8 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script> <script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script> <script src="/assets/util/package/dist/umd/index.js"></script>
</head> </head>
<body> <body>
<h3>Upload a video to transcode to mp4 (x264) and play!</h3> <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
@ -25,7 +25,7 @@
message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`; message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
}); });
await ffmpeg.load({ await ffmpeg.load({
coreURL: "/packages/core/dist/umd/ffmpeg-core.js", coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
}); });
} }
const { name } = files[0]; const { name } = files[0];

6
apps/browser/trim.html
View File

@ -1,8 +1,8 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script> <script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script> <script src="/assets/util/package/dist/umd/index.js"></script>
</head> </head>
<body> <body>
<h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3> <h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
@ -25,7 +25,7 @@
message.innerHTML = `${progress * 100} %`; message.innerHTML = `${progress * 100} %`;
}); });
await ffmpeg.load({ await ffmpeg.load({
coreURL: "/packages/core/dist/umd/ffmpeg-core.js", coreURL: "/assets/core/package/dist/umd/ffmpeg-core.js",
}); });
} }
const { name } = files[0]; const { name } = files[0];

106
package-lock.json generated
View File

@ -5,7 +5,6 @@
"packages": { "packages": {
"": { "": {
"name": "root", "name": "root",
"hasInstallScript": true,
"workspaces": [ "workspaces": [
"packages/*", "packages/*",
"apps/*" "apps/*"
@ -21,7 +20,10 @@
}, },
"apps/browser": { "apps/browser": {
"version": "0.12.0-alpha.0", "version": "0.12.0-alpha.0",
"license": "MIT" "license": "MIT",
"dependencies": {
"tar": "^6.1.15"
}
}, },
"apps/react-vite-app": { "apps/react-vite-app": {
"version": "0.0.0", "version": "0.0.0",
@ -7056,6 +7058,14 @@
"fsevents": "~2.3.2" "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": { "node_modules/chrome-trace-event": {
"version": "1.0.3", "version": "1.0.3",
"license": "MIT", "license": "MIT",
@ -9685,6 +9695,28 @@
"node": ">=10" "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": { "node_modules/fs-monkey": {
"version": "1.0.3", "version": "1.0.3",
"license": "Unlicense" "license": "Unlicense"
@ -11924,9 +11956,31 @@
"node": ">=16 || 14 >=14.17" "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": { "node_modules/mkdirp": {
"version": "1.0.4", "version": "1.0.4",
"dev": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
"mkdirp": "bin/cmd.js" "mkdirp": "bin/cmd.js"
@ -15779,6 +15833,22 @@
"node": ">=6" "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": { "node_modules/tar-fs": {
"version": "2.1.1", "version": "2.1.1",
"dev": true, "dev": true,
@ -15823,6 +15893,14 @@
"node": ">= 6" "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": { "node_modules/terser": {
"version": "5.19.2", "version": "5.19.2",
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
@ -17634,25 +17712,6 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/workerpool": {
"version": "6.2.1", "version": "6.2.1",
"dev": true, "dev": true,
@ -17929,8 +17988,7 @@
"rimraf": "^5.0.1", "rimraf": "^5.0.1",
"ts-loader": "^9.4.4", "ts-loader": "^9.4.4",
"typescript": "^5.1.6", "typescript": "^5.1.6",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4"
"worker-loader": "^3.0.8"
}, },
"engines": { "engines": {
"node": ">=18.17.0" "node": ">=18.17.0"

3
packages/ffmpeg/package.json
View File

@ -54,8 +54,7 @@
"rimraf": "^5.0.1", "rimraf": "^5.0.1",
"ts-loader": "^9.4.4", "ts-loader": "^9.4.4",
"typescript": "^5.1.6", "typescript": "^5.1.6",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4"
"worker-loader": "^3.0.8"
}, },
"dependencies": { "dependencies": {
"@ffmpeg/types": "^0.12.0" "@ffmpeg/types": "^0.12.0"