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
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];