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

Add umd output and update browser apps

Browse Source
This commit is contained in:
Jerome Wu 2022-09-23 18:16:34 +08:00
parent edb05a6572
commit c38ab7551b
11 changed files with 1377 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -40,7 +40,7 @@ FROM ffmpeg-builder AS ffmpeg-wasm-builder
COPY src/bind /src/wasm/bind COPY src/bind /src/wasm/bind
COPY src/fftools /src/wasm/fftools COPY src/fftools /src/wasm/fftools
COPY build/ffmpeg-wasm.sh build.sh COPY build/ffmpeg-wasm.sh build.sh
RUN mkdir -p /src/dist/cjs && bash -x /src/build.sh -o dist/cjs/ffmpeg.js RUN mkdir -p /src/dist/umd && bash -x /src/build.sh -o dist/umd/ffmpeg.js
RUN mkdir -p /src/dist/esm && bash -x /src/build.sh -sEXPORT_ES6 -o dist/esm/ffmpeg.js RUN mkdir -p /src/dist/esm && bash -x /src/build.sh -sEXPORT_ES6 -o dist/esm/ffmpeg.js
# Export ffmpeg-core.wasm to dist/, use `docker buildx build -o . .` to get assets # Export ffmpeg-core.wasm to dist/, use `docker buildx build -o . .` to get assets

35
apps/browser/transcode.esm.html Normal file
View File

@ -0,0 +1,35 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Upload a video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message"></p>
<script type="module">
import createFFmpeg from "../../packages/ffmpeg/dist/esm/ffmpeg.js";
import { fetchFile } from "../../packages/util/dist/esm/index.js";
let ffmpeg = null;
const transcode = async ({ target: { files } }) => {
const message = document.getElementById('message');
if (ffmpeg === null) {
ffmpeg = await createFFmpeg();
ffmpeg.setProgress((progress) => { console.log(progress * 100); });
}
const { name } = files[0];
ffmpeg.FS.writeFile(name, await fetchFile(files[0]));
message.innerHTML = 'Start transcoding';
await ffmpeg.exec('-i', name, 'output.mp4');
message.innerHTML = 'Complete transcoding';
const data = ffmpeg.FS.readFile('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
</script>
</body>
</html>

5
apps/browser/transcode.html
View File

@ -1,6 +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="../../packages/util/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>
@ -8,8 +10,7 @@
<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 createFFmpeg from "../../packages/ffmpeg/dist/esm/ffmpeg.js"; const { fetchFile } = FFmpegUtil;
import { fetchFile } from "../../packages/util/dist/esm/index.js";
let ffmpeg = null; let ffmpeg = null;
const transcode = async ({ target: { files } }) => { const transcode = async ({ target: { files } }) => {

31
apps/browser/trim.html
View File

@ -1,18 +1,8 @@
<html> <html>
<head> <head>
<script src="/dist/ffmpeg.dev.js"></script> <link rel="stylesheet" href="style.css">
<style> <script src="../../packages/ffmpeg/dist/umd/ffmpeg.js"></script>
html, body { <script src="../../packages/util/dist/umd/index.js"></script>
margin: 0;
width: 100%;
height: 100%
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</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>
@ -20,19 +10,22 @@
<input type="file" id="uploader"> <input type="file" id="uploader">
<p id="message"></p> <p id="message"></p>
<script> <script>
const { createFFmpeg, fetchFile } = FFmpeg; const { fetchFile } = FFmpegUtil;
const ffmpeg = createFFmpeg({ log: true }); let ffmpeg = null;
const trim = async ({ target: { files } }) => { const trim = async ({ target: { files } }) => {
const message = document.getElementById('message'); const message = document.getElementById('message');
if (ffmpeg === null) {
ffmpeg = await createFFmpeg();
ffmpeg.setProgress((progress) => { console.log(progress * 100) });
}
const { name } = files[0]; const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js'; message.innerHTML = 'Loading ffmpeg-core.js';
await ffmpeg.load();
message.innerHTML = 'Start trimming'; message.innerHTML = 'Start trimming';
ffmpeg.FS('writeFile', name, await fetchFile(files[0])); ffmpeg.FS.writeFile(name, await fetchFile(files[0]));
await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4'); await ffmpeg.exec('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
message.innerHTML = 'Complete trimming'; message.innerHTML = 'Complete trimming';
const data = ffmpeg.FS('readFile', 'output.mp4'); const data = ffmpeg.FS.readFile('output.mp4');
const video = document.getElementById('output-video'); const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' })); video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

1307
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
packages/ffmpeg-mt/package.json
View File

@ -2,13 +2,13 @@
"name": "@ffmpeg/ffmpeg-mt", "name": "@ffmpeg/ffmpeg-mt",
"version": "0.11.5", "version": "0.11.5",
"description": "FFmpeg WebAssembly version w/ multi-thread", "description": "FFmpeg WebAssembly version w/ multi-thread",
"main": "./dist/cjs/ffmpeg.js", "main": "./dist/umd/ffmpeg.js",
"types": "./types/ffmpeg.d.ts", "types": "./types/ffmpeg.d.ts",
"exports": { "exports": {
".": { ".": {
"types": "./types/ffmpeg.d.ts", "types": "./types/ffmpeg.d.ts",
"import": "./dist/esm/ffmpeg.js", "import": "./dist/esm/ffmpeg.js",
"require": "./dist/cjs/ffmpeg.js" "require": "./dist/umd/ffmpeg.js"
} }
}, },
"scripts": { "scripts": {

2
packages/ffmpeg-mt/tests/ffmpeg.test.html
View File

@ -9,7 +9,7 @@
<div id="mocha"></div> <div id="mocha"></div>
<script src="../../../node_modules/mocha/mocha.js"></script> <script src="../../../node_modules/mocha/mocha.js"></script>
<script src="../../../node_modules/chai/chai.js"></script> <script src="../../../node_modules/chai/chai.js"></script>
<script src="../dist/cjs/ffmpeg.js"></script> <script src="../dist/umd/ffmpeg.js"></script>
<script src="./constants.js"></script> <script src="./constants.js"></script>
<script>mocha.setup('bdd');</script> <script>mocha.setup('bdd');</script>
<script src="./ffmpeg.test.js"></script> <script src="./ffmpeg.test.js"></script>

4
packages/ffmpeg/package.json
View File

@ -2,13 +2,13 @@
"name": "@ffmpeg/ffmpeg", "name": "@ffmpeg/ffmpeg",
"version": "0.11.5", "version": "0.11.5",
"description": "FFmpeg WebAssembly version", "description": "FFmpeg WebAssembly version",
"main": "./dist/cjs/ffmpeg.js", "main": "./dist/umd/ffmpeg.js",
"types": "./types/ffmpeg.d.ts", "types": "./types/ffmpeg.d.ts",
"exports": { "exports": {
".": { ".": {
"types": "./types/ffmpeg.d.ts", "types": "./types/ffmpeg.d.ts",
"import": "./dist/esm/ffmpeg.js", "import": "./dist/esm/ffmpeg.js",
"require": "./dist/cjs/ffmpeg.js" "require": "./dist/umd/ffmpeg.js"
} }
}, },
"scripts": { "scripts": {

2
packages/ffmpeg/tests/ffmpeg.test.html
View File

@ -9,7 +9,7 @@
<div id="mocha"></div> <div id="mocha"></div>
<script src="../../../node_modules/mocha/mocha.js"></script> <script src="../../../node_modules/mocha/mocha.js"></script>
<script src="../../../node_modules/chai/chai.js"></script> <script src="../../../node_modules/chai/chai.js"></script>
<script src="../dist/cjs/ffmpeg.js"></script> <script src="../dist/umd/ffmpeg.js"></script>
<script src="./constants.js"></script> <script src="./constants.js"></script>
<script>mocha.setup('bdd');</script> <script>mocha.setup('bdd');</script>
<script src="./ffmpeg.test.js"></script> <script src="./ffmpeg.test.js"></script>

5
packages/util/package.json
View File

@ -13,7 +13,7 @@
}, },
"scripts": { "scripts": {
"dev": "tsc -p tsconfig-esm.json --watch", "dev": "tsc -p tsconfig-esm.json --watch",
"build": "rimraf dist && tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json", "build": "rimraf dist && tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && webpack",
"lint": "eslint src" "lint": "eslint src"
}, },
"files": [ "files": [
@ -46,6 +46,7 @@
"@typescript-eslint/parser": "^5.37.0", "@typescript-eslint/parser": "^5.37.0",
"eslint": "^8.23.1", "eslint": "^8.23.1",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "^4.8.3" "typescript": "^4.8.3",
"webpack-cli": "^4.10.0"
} }
} }

12
packages/util/webpack.config.cjs Normal file
View File

@ -0,0 +1,12 @@
const path = require("path");
module.exports = {
mode: "production",
entry: "./dist/cjs/index.js",
output: {
library: "FFmpegUtil",
libraryTarget: "umd",
filename: "index.js",
path: path.resolve(__dirname, "dist", "umd"),
},
};