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

Update documents

Browse Source
This commit is contained in:
Jerome Wu
2020-04-28 19:36:33 +08:00
parent b36360f16f
commit 55cbf63fb1
14 changed files with 202 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
examples/browser/concatDemuxer.html
View File

@@ -23,33 +23,29 @@
<input type="file" id="uploader" multiple />
<p id="message"></p>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: "../../node_modules/@ffmpeg/core/ffmpeg-core.js",
logger: ({ message }) => console.log(message)
});
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const transcode = async ({ target: { files } }) => {
const message = document.getElementById("message");
message.innerHTML = "Loading ffmpeg-core.js";
await worker.load();
await ffmpeg.load();
message.innerHTML = "Start Concating";
const inputPaths = [];
for (const file of files) {
const { name } = file;
await worker.write(name, file);
await ffmpeg.write(name, file);
inputPaths.push(name);
}
await worker.concatDemuxer(inputPaths, "output.mp4");
await ffmpeg.concatDemuxer(inputPaths, "output.mp4");
message.innerHTML = "Complete Concating";
const { data } = await worker.read("output.mp4");
const data = await ffmpeg.read("output.mp4");
const video = document.getElementById("output-video");
video.src = URL.createObjectURL(
new Blob([data.buffer], {
type: "video/mp4"
})
);
await worker.terminate();
};
const elm = document.getElementById("uploader");
elm.addEventListener("change", transcode);

22
examples/browser/image2video.html
View File

@@ -21,34 +21,30 @@
<p id="message"></p>
<a href="https://github.com/ffmpegjs/ffmpeg.js/tree/master/tests/assets/triangle">Data Set</a>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
progress: (p) => console.log(p),
});
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const image2video = async () => {
const message = document.getElementById('message');
message.innerHTML = 'Loading ffmpeg-core.js';
await worker.load();
await ffmpeg.load();
message.innerHTML = 'Loading data';
await worker.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
await ffmpeg.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
for (let i = 0; i < 60; i += 1) {
const num = `00${i}`.slice(-3);
await worker.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
await ffmpeg.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
}
message.innerHTML = 'Start transcoding';
await worker.run('-framerate 30 -pattern_type glob -i /data/*.png -i /data/audio.ogg -c:a copy -shortest -c:v libx264 -pix_fmt yuv420p out.mp4', { output: 'out.mp4' });
const { data } = await worker.read('out.mp4');
await worker.remove('audio.ogg');
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', { output: 'out.mp4' });
const data = await ffmpeg.read('out.mp4');
await ffmpeg.remove('audio.ogg');
for (let i = 0; i < 60; i += 1) {
const num = `00${i}`.slice(-3);
await worker.remove(`tmp.${num}.png`);
await ffmpeg.remove(`tmp.${num}.png`);
}
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
await worker.terminate();
}
const elm = document.getElementById('start-btn');
elm.addEventListener('click', image2video);

20
examples/browser/run.html
View File

@@ -20,29 +20,25 @@
<input type="file" id="uploader">
<p id="message"></p>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
logger: ({ message }) => console.log(message),
});
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const transcode = async ({ target: { files } }) => {
const doRun = async ({ target: { files } }) => {
const message = document.getElementById('message');
const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await worker.load();
await ffmpeg.load();
message.innerHTML = 'Start transcoding';
await worker.write(name, files[0]);
await worker.run(`-i /data/${name} output.mp4`);
await ffmpeg.write(name, files[0]);
await ffmpeg.run(`-i ${name} output.mp4`);
message.innerHTML = 'Complete transcoding';
const { data } = await worker.read('output.mp4');
const data = ffmpeg.read('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
await worker.terminate();
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
elm.addEventListener('change', doRun);
</script>
</body>
</html>

18
examples/browser/transcode.html
View File

@@ -20,27 +20,23 @@
<input type="file" id="uploader">
<p id="message"></p>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
logger: ({ message }) => console.log(message),
progress: p => console.log(p),
});
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const transcode = async ({ target: { files } }) => {
const message = document.getElementById('message');
const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await worker.load();
await worker.write(name, files[0]);
await ffmpeg.load();
await ffmpeg.write(name, files[0]);
message.innerHTML = 'Start transcoding';
await worker.transcode(name, 'output.mp4');
await ffmpeg.transcode(name, 'output.mp4');
message.innerHTML = 'Complete transcoding';
const { data } = await worker.read('output.mp4');
const data = ffmpeg.read('output.mp4');
ffmpeg.remove('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
await worker.terminate();
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);

20
examples/browser/trim.html
View File

@@ -20,29 +20,25 @@
<input type="file" id="uploader">
<p id="message"></p>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
logger: ({ message }) => console.log(message),
});
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const transcode = async ({ target: { files } }) => {
const trim = async ({ target: { files } }) => {
const message = document.getElementById('message');
const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await worker.load();
await ffmpeg.load();
message.innerHTML = 'Start trimming';
await worker.write(name, files[0]);
await worker.trim(name, 'output.mp4', 0, 10);
await ffmpeg.write(name, files[0]);
await ffmpeg.trim(name, 'output.mp4', 0, 10);
message.innerHTML = 'Complete trimming';
const { data } = await worker.read('output.mp4');
const data = ffmpeg.read('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
await worker.terminate();
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
elm.addEventListener('change', trim);
</script>
</body>
</html>

16
examples/browser/webcam.html
View File

@@ -23,11 +23,8 @@
<button id="record" disabled>Start Recording</button>
<p id="message"></p>
<script>
const { createWorker } = FFmpeg;
const worker = createWorker({
corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
logger: ({ message }) => console.log(message),
});
const { createFFmpeg } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
const webcam = document.getElementById('webcam');
const recordBtn = document.getElementById('record');
@@ -60,16 +57,15 @@
const message = document.getElementById('message');
const name = 'record.webm';
message.innerHTML = 'Loading ffmpeg-core.js';
await worker.load();
await ffmpeg.load();
message.innerHTML = 'Start transcoding';
await worker.write(name, webcamData);
await worker.transcode(name, 'output.mp4');
await ffmpeg.write(name, webcamData);
await ffmpeg.transcode(name, 'output.mp4');
message.innerHTML = 'Complete transcoding';
const { data } = await worker.read('output.mp4');
const data = ffmpeg.read('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
await worker.terminate();
}
</script>
</body>

19
examples/node/concatDemuxer.js
View File

@@ -1,17 +1,12 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { createFFmpeg } = require('../../src');
const worker = createWorker({
logger: ({ message }) => console.log(message),
});
const ffmpeg = createFFmpeg({ log: true });
(async () => {
await worker.load();
console.log('Start to concat');
await worker.write('flame.avi', '../../tests/assets/flame.avi');
await worker.concatDemuxer(['flame.avi', 'flame.avi'], 'flame.mp4');
const { data } = await worker.read('flame.mp4');
console.log('Complete concat');
fs.writeFileSync('flame.mp4', Buffer.from(data));
await worker.terminate();
await ffmpeg.load();
await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
await ffmpeg.concatDemuxer(['flame.avi', 'flame.avi'], 'flame.mp4');
fs.writeFileSync('flame.mp4', ffmpeg.read('flame.mp4'));
process.exit(0);
})();

19
examples/node/hstack.js
View File

@@ -1,17 +1,12 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { createFFmpeg } = require('../../src');
const worker = createWorker({
logger: ({ message }) => console.log(message),
});
const ffmpeg = createFFmpeg({ log: true });
(async () => {
await worker.load();
console.log('Start hstack');
await worker.write('flame.avi', '../../tests/assets/flame.avi');
await worker.run('-i flame.avi -i flame.avi -filter_complex hstack flame.mp4');
const { data } = await worker.read('flame.mp4');
console.log('Complete hstack');
fs.writeFileSync('flame.mp4', Buffer.from(data));
await worker.terminate();
await ffmpeg.load();
await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
await ffmpeg.run('-i flame.avi -i flame.avi -filter_complex hstack flame.mp4');
fs.writeFileSync('flame.mp4', ffmpeg.read('flame.mp4'));
process.exit(0);
})();

27
examples/node/image2video.js
View File

@@ -1,28 +1,21 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { createFFmpeg } = require('../../src');
const worker = createWorker({
progress: (p) => console.log(p),
});
const ffmpeg = createFFmpeg({ log: true });
(async () => {
console.log('Loading ffmpeg-core.js');
await worker.load();
console.log('Loading data');
await worker.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
await ffmpeg.load();
await ffmpeg.write('audio.ogg', '../../tests/assets/triangle/audio.ogg');
for (let i = 0; i < 60; i += 1) {
const num = `00${i}`.slice(-3);
await worker.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
await ffmpeg.write(`tmp.${num}.png`, `../../tests/assets/triangle/tmp.${num}.png`);
}
console.log('Start transcoding');
await worker.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 } = await worker.read('out.mp4');
console.log('Complete transcoding');
await worker.remove('audio.ogg');
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');
await ffmpeg.remove('audio.ogg');
for (let i = 0; i < 60; i += 1) {
const num = `00${i}`.slice(-3);
await worker.remove(`tmp.${num}.png`);
await ffmpeg.remove(`tmp.${num}.png`);
}
fs.writeFileSync('out.mp4', Buffer.from(data));
await worker.terminate();
fs.writeFileSync('out.mp4', ffmpeg.read('out.mp4'));
process.exit(0);
})();

19
examples/node/run.js
View File

@@ -1,17 +1,12 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { createFFmpeg } = require('../../src');
const worker = createWorker({
logger: ({ message }) => console.log(message),
});
const ffmpeg = createFFmpeg({ log: true });
(async () => {
await worker.load();
console.log('Start transcoding');
await worker.write('flame.avi', '../../tests/assets/flame.avi');
await worker.run('-i flame.avi flame.mp4');
const { data } = await worker.read('flame.mp4');
console.log('Complete transcoding');
fs.writeFileSync('flame.mp4', Buffer.from(data));
await worker.terminate();
await ffmpeg.load();
await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
await ffmpeg.run('-i flame.avi flame.mp4');
fs.writeFileSync('flame.mp4', ffmpeg.read('flame.mp4'));
process.exit(0);
})();

18
examples/node/transcode.js
View File

@@ -1,17 +1,15 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { createFFmpeg } = require('../../src');
const worker = createWorker({
logger: ({ message }) => console.log(message),
const ffmpeg = createFFmpeg({
log: true,
});
(async () => {
await worker.load();
console.log('Start transcoding');
await worker.write('flame.avi', '../../tests/assets/flame.avi');
await worker.transcode('flame.avi', 'flame.mp4');
const { data } = await worker.read('flame.mp4');
console.log('Complete transcoding');
await ffmpeg.load();
await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
await ffmpeg.transcode('flame.avi', 'flame.mp4', '-threads 2');
const data = ffmpeg.read('flame.mp4');
fs.writeFileSync('flame.mp4', Buffer.from(data));
await worker.terminate();
process.exit(0);
})();

19
examples/node/trim.js
View File

@@ -1,17 +1,12 @@
const fs = require('fs');
const { createWorker } = require('../../src');
const { createFFmpeg } = require('../../src');
const worker = createWorker({
logger: ({ message }) => console.log(message),
});
const ffmpeg = createFFmpeg({ log: true });
(async () => {
await worker.load();
console.log('Start trimming');
await worker.write('flame.avi', '../../tests/assets/flame.avi');
await worker.trim('flame.avi', 'flame_trim.avi', 0, 10);
const { data } = await worker.read('flame_trim.avi');
console.log('Complete trimming');
fs.writeFileSync('flame_trim.avi', Buffer.from(data));
await worker.terminate();
await ffmpeg.load();
await ffmpeg.write('flame.avi', '../../tests/assets/flame.avi');
await ffmpeg.trim('flame.avi', 'flame_trim.avi', 0, 10);
fs.writeFileSync('flame_trim.avi', ffmpeg.read('flame_trim.avi'));
process.exit(0);
})();