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:
@ -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 |

10
apps/browser/concatDemuxer.html
View File

@ -1,8 +1,8 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script>
<script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="/assets/util/package/dist/umd/index.js"></script>
</head>
<body>
@ -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";

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",
"private": true,
"scripts": {
"start": "npx http-server -c-1 ../../"
"download": "node download-assets.js",
"start": "npx http-server -c-1"
},
"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">
<p id="message"></p>
<script type="module">
import { FFmpeg } from "../../packages/ffmpeg/dist/esm/index.js";
import { fetchFile } from "../../packages/util/dist/esm/index.js";
import { FFmpeg } from "/assets/ffmpeg/package/dist/esm/index.js";
import { fetchFile } from "/assets/util/package/dist/esm/index.js";
let ffmpeg = null;
const transcode = async ({ target: { files } }) => {
@ -23,7 +23,7 @@
message.innerHTML = `${progress * 100} %`;
});
await ffmpeg.load({
coreURL: "/packages/core/dist/esm/ffmpeg-core.js",
coreURL: "/assets/core/package/dist/esm/ffmpeg-core.js",
});
}
const { name } = files[0];

6
apps/browser/transcode.html
View File

@ -1,8 +1,8 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script>
<script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="/assets/util/package/dist/umd/index.js"></script>
</head>
<body>
<h3>Upload a video to transcode to mp4 (x264) and play!</h3>
@ -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];

6
apps/browser/trim.html
View File

@ -1,8 +1,8 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script>
<script src="../../packages/util/dist/umd/index.js"></script>
<script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="/assets/util/package/dist/umd/index.js"></script>
</head>
<body>
<h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
@ -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];

106
package-lock.json generated
View File

@ -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"

3
packages/ffmpeg/package.json
View File

@ -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"