Add util and rewrite examples (WIP)
This commit is contained in:
Jerome Wu
22
apps/browser/README.md
Normal file
22
apps/browser/README.md
Normal file
@@ -0,0 +1,22 @@
|
||||
Browser Examples
|
||||
==================
|
||||
|
||||
To run this example, execute:
|
||||
|
||||
```
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Visit http://localhost:3000/examples/browser/transcode.html
|
||||
|
||||
|
||||
Web Worker Examples
|
||||
==================
|
||||
|
||||
To run the webworker example, execute:
|
||||
|
||||
```
|
||||
$ npm run start:worker
|
||||
```
|
||||
|
||||
Visit http://localhost:3000/examples/browser/transcode.worker.html
|
||||
55
apps/browser/concatDemuxer.html
Normal file
55
apps/browser/concatDemuxer.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="/dist/ffmpeg.dev.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3>Select multiple video files to Concatenate</h3>
|
||||
<video id="output-video" controls></video><br />
|
||||
<input type="file" id="uploader" multiple />
|
||||
<p id="message"></p>
|
||||
<script>
|
||||
const { createFFmpeg, fetchFile } = FFmpeg;
|
||||
const ffmpeg = createFFmpeg({ log: true });
|
||||
|
||||
const transcode = async ({ target: { files } }) => {
|
||||
const message = document.getElementById("message");
|
||||
message.innerHTML = "Loading ffmpeg-core.js";
|
||||
await ffmpeg.load();
|
||||
message.innerHTML = "Start Concating";
|
||||
const inputPaths = [];
|
||||
for (const file of files) {
|
||||
const { name } = file;
|
||||
ffmpeg.FS('writeFile', name, await fetchFile(file));
|
||||
inputPaths.push(`file ${name}`);
|
||||
}
|
||||
ffmpeg.FS('writeFile', 'concat_list.txt', inputPaths.join('\n'));
|
||||
await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'concat_list.txt', 'output.mp4');
|
||||
message.innerHTML = "Complete Concating";
|
||||
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>
|
||||
53
apps/browser/image2video.html
Normal file
53
apps/browser/image2video.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="/dist/ffmpeg.dev.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Click start to transcode images to mp4 (x264) and play!</h3>
|
||||
<video id="output-video" controls></video><br/>
|
||||
<button id="start-btn">Start</button>
|
||||
<p id="message"></p>
|
||||
<a href="https://github.com/ffmpegjs/ffmpeg.js/tree/master/examples/assets/triangle">Data Set</a>
|
||||
<script>
|
||||
const { createFFmpeg, fetchFile } = FFmpeg;
|
||||
const ffmpeg = createFFmpeg({ log: true });
|
||||
|
||||
const image2video = async () => {
|
||||
const message = document.getElementById('message');
|
||||
message.innerHTML = 'Loading ffmpeg-core.js';
|
||||
await ffmpeg.load();
|
||||
message.innerHTML = 'Loading data';
|
||||
ffmpeg.FS('writeFile', 'audio.ogg', await fetchFile('../assets/triangle/audio.ogg'));
|
||||
for (let i = 0; i < 60; i += 1) {
|
||||
const num = `00${i}`.slice(-3);
|
||||
ffmpeg.FS('writeFile', `tmp.${num}.png`, await fetchFile(`../assets/triangle/tmp.${num}.png`));
|
||||
}
|
||||
message.innerHTML = 'Start transcoding';
|
||||
await ffmpeg.run('-framerate', '30', '-pattern_type', 'glob', '-i', '*.png', '-i', 'audio.ogg', '-c:a', 'copy', '-shortest', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', 'out.mp4');
|
||||
const data = ffmpeg.FS('readFile', 'out.mp4');
|
||||
ffmpeg.FS('unlink', 'audio.ogg')
|
||||
for (let i = 0; i < 60; i += 1) {
|
||||
const num = `00${i}`.slice(-3);
|
||||
ffmpeg.FS('unlink', `tmp.${num}.png`);
|
||||
}
|
||||
|
||||
const video = document.getElementById('output-video');
|
||||
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
|
||||
}
|
||||
const elm = document.getElementById('start-btn');
|
||||
elm.addEventListener('click', image2video);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
10
apps/browser/package.json
Normal file
10
apps/browser/package.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "browser",
|
||||
"version": "0.0.1",
|
||||
"description": "browser example",
|
||||
"scripts": {
|
||||
"start": "npx http-server ../../"
|
||||
},
|
||||
"author": "Jerome Wu <jeromewus@gmail.com>",
|
||||
"license": "MIT"
|
||||
}
|
||||
10
apps/browser/style.css
Normal file
10
apps/browser/style.css
Normal file
@@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
35
apps/browser/transcode.html
Normal file
35
apps/browser/transcode.html
Normal 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>
|
||||
48
apps/browser/transcode.worker.html
Normal file
48
apps/browser/transcode.worker.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</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">
|
||||
const worker = new Worker(new URL('./transcode.worker.js', import.meta.url).href);
|
||||
worker.onmessage = (event) => {
|
||||
const {data} = event;
|
||||
message.innerHTML = 'Complete transcoding';
|
||||
const video = document.getElementById('output-video');
|
||||
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
|
||||
}
|
||||
worker.onerror = (error) => console.log(error);
|
||||
const transcode = async ({ target: { files } }) => {
|
||||
const message = document.getElementById('message');
|
||||
const [file] = files;
|
||||
|
||||
let name = file.name.split('.');
|
||||
const inType = name.pop();
|
||||
name = name.join();
|
||||
const buffer = await file.arrayBuffer();
|
||||
const outType = 'mp4';
|
||||
|
||||
worker.postMessage({name, inType, outType, buffer}, [buffer]);
|
||||
|
||||
message.innerHTML = 'Start transcoding';
|
||||
}
|
||||
const elm = document.getElementById('uploader');
|
||||
elm.addEventListener('change', transcode);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
24
apps/browser/transcode.worker.js
Normal file
24
apps/browser/transcode.worker.js
Normal file
@@ -0,0 +1,24 @@
|
||||
importScripts('/dist/ffmpeg.dev.js');
|
||||
const ffmpeg = self.FFmpeg.createFFmpeg({log: true});
|
||||
|
||||
onmessage = async (event) => {
|
||||
try {
|
||||
const {buffer, name, inType, outType} = event.data;
|
||||
if (!ffmpeg.isLoaded()) {
|
||||
await ffmpeg.load();
|
||||
}
|
||||
|
||||
ffmpeg.FS('writeFile', `${name}.${inType}`, new Uint8Array(buffer));
|
||||
await ffmpeg.run('-i', `${name}.${inType}`, `${name}.${outType}`);
|
||||
const data = ffmpeg.FS('readFile', `${name}.${outType}`);
|
||||
|
||||
postMessage({buffer: data.buffer, type: "result"}, [data.buffer]);
|
||||
|
||||
// delete files from memory
|
||||
ffmpeg.FS('unlink', `${name}.${inType}`);
|
||||
ffmpeg.FS('unlink', `${name}.${outType}`);
|
||||
} catch (e) {
|
||||
postMessage({type: "error", error: e});
|
||||
}
|
||||
}
|
||||
|
||||
44
apps/browser/trim.html
Normal file
44
apps/browser/trim.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="/dist/ffmpeg.dev.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Upload a mp4 (x264) video and trim its first 1 seconds and play!</h3>
|
||||
<video id="output-video" controls></video><br/>
|
||||
<input type="file" id="uploader">
|
||||
<p id="message"></p>
|
||||
<script>
|
||||
const { createFFmpeg, fetchFile } = FFmpeg;
|
||||
const ffmpeg = createFFmpeg({ log: true });
|
||||
|
||||
const trim = async ({ target: { files } }) => {
|
||||
const message = document.getElementById('message');
|
||||
const { name } = files[0];
|
||||
message.innerHTML = 'Loading ffmpeg-core.js';
|
||||
await ffmpeg.load();
|
||||
message.innerHTML = 'Start trimming';
|
||||
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
|
||||
await ffmpeg.run('-i', name, '-ss', '0', '-to', '1', 'output.mp4');
|
||||
message.innerHTML = 'Complete trimming';
|
||||
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', trim);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
72
apps/browser/webcam.html
Normal file
72
apps/browser/webcam.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="/dist/ffmpeg.dev.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h3>Record video from webcam and transcode to mp4 (x264) and play!</h3>
|
||||
<div>
|
||||
<video id="webcam" width="320px" height="180px"></video>
|
||||
<video id="output-video" width="320px" height="180px" controls></video>
|
||||
</div>
|
||||
<button id="record" disabled>Start Recording</button>
|
||||
<p id="message"></p>
|
||||
<script>
|
||||
const { createFFmpeg, fetchFile } = FFmpeg;
|
||||
const ffmpeg = createFFmpeg({ log: true });
|
||||
|
||||
const webcam = document.getElementById('webcam');
|
||||
const recordBtn = document.getElementById('record');
|
||||
const startRecording = () => {
|
||||
const rec = new MediaRecorder(webcam.srcObject);
|
||||
const chunks = [];
|
||||
|
||||
recordBtn.textContent = 'Stop Recording';
|
||||
recordBtn.onclick = () => {
|
||||
rec.stop();
|
||||
recordBtn.textContent = 'Start Recording';
|
||||
recordBtn.onclick = startRecording;
|
||||
}
|
||||
|
||||
rec.ondataavailable = e => chunks.push(e.data);
|
||||
rec.onstop = async () => {
|
||||
transcode(new Uint8Array(await (new Blob(chunks)).arrayBuffer()));
|
||||
};
|
||||
rec.start();
|
||||
};
|
||||
|
||||
(async () => {
|
||||
webcam.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
|
||||
await webcam.play();
|
||||
recordBtn.disabled = false;
|
||||
recordBtn.onclick = startRecording;
|
||||
})();
|
||||
|
||||
const transcode = async (webcamData) => {
|
||||
const message = document.getElementById('message');
|
||||
const name = 'record.webm';
|
||||
message.innerHTML = 'Loading ffmpeg-core.js';
|
||||
await ffmpeg.load();
|
||||
message.innerHTML = 'Start transcoding';
|
||||
ffmpeg.FS('writeFile', name, await fetchFile(webcamData));
|
||||
await ffmpeg.run('-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' }));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user