Skip to content

F
ffmpeg.wasm-core
Commit 1c825870 authored by Jerome Wu's avatar Jerome Wu
Browse files
Options

Refactor browser examples

parent 58470441
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 219 deletions
wasm/examples/transcode.js → wasm/examples/browser/js/utils.js
View file @ 1c825870
const path = require('path');
const fs = require('fs');
const createFFmpegCore = require('../dist/ffmpeg-core');
const readFromBlobOrFile = (blob) => (
new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = ({ target: { error: { code } } }) => {
reject(Error(`File could not be read! Code=${code}`));
};
fileReader.readAsArrayBuffer(blob);
})
);
(async () => {
const parseArgs = (Core, args) => {
const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
args.forEach((s, idx) => {
const buf = Core._malloc(s.length + 1);
Core.writeAsciiToMemory(s, buf);
Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
});
return [args.length, argsPtr];
};
const ffmpeg = (Core, args) => {
Core.ccall(
'proxy_main',
'number',
['number', 'number'],
parseArgs(Core, ['ffmpeg', '-nostdin', ...args]),
);
};
const runFFmpeg = async (ifilename, data, args, ofilename) => {
let resolve = null;
let file = null;
const Core = await createFFmpegCore({
printErr: (m) => console.log(m),
print: (m) => {
printErr: (m) => {
console.log(m);
},
print: (m) => {
if (m.startsWith('FFMPEG_END')) {
resolve();
}
}
});
const filePath = path.join(__dirname, '..', 'tests', 'data', 'video-3s.avi');
const data = Uint8Array.from(fs.readFileSync(filePath));
Core.FS.writeFile('video.avi', data);
const ffmpeg = Core.cwrap('proxy_main', 'number', ['number', 'number']);
const args = ['ffmpeg', '-hide_banner', '-report', '-i', 'video.avi', 'video.mp4'];
const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
args.forEach((s, idx) => {
const buf = Core._malloc(s.length + 1);
Core.writeAsciiToMemory(s, buf);
Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
},
});
console.time('execution time');
ffmpeg(args.length, argsPtr);
Core.FS.writeFile(ifilename, data);
ffmpeg(Core, args);
await new Promise((_resolve) => { resolve = _resolve });
const output = Core.FS.readFile('video.mp4');
fs.writeFileSync(path.join(__dirname, 'video.mp4'), output);
console.timeEnd('execution time');
process.exit(1);
})();
if (typeof ofilename !== 'undefined') {
file = Core.FS.readFile(ofilename);
Core.FS.unlink(ofilename);
}
return { Core, file };
};
wasm/examples/browser/libvpx.html 0 → 100644
View file @ 1c825870
<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 webm (vp9) and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message">Upload a video</p>
<script type="text/javascript" src="./js/utils.js"></script>
<script type="text/javascript">
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
const IN_FILE_NAME = 'video.avi';
const OUT_FILE_NAME = 'video.webm';
const args = ['-i', IN_FILE_NAME, OUT_FILE_NAME];
message.innerHTML = 'Writing file to MEMFS';
const data = new Uint8Array(await readFromBlobOrFile(files[0]));
const now = Date.now();
console.time(`[${now}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
const { file } = await runFFmpeg(IN_FILE_NAME, data, args, OUT_FILE_NAME)
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([file.buffer], { type: 'video/webm' }));
console.timeEnd(`[${now}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../../dist/ffmpeg-core.js"></script>
</body>
</html>
wasm/examples/browser/next/x265.html 0 → 100644
View file @ 1c825870
<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 (x265) and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message">Upload a video</p>
<script type="text/javascript" src="./js/utils.js"></script>
<script type="text/javascript">
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
const IN_FILE_NAME = 'video.avi';
const OUT_FILE_NAME = 'video.mp4';
const args = ['-i', IN_FILE_NAME, '-c:v', 'libx265', '-c:a', 'copy', OUT_FILE_NAME];
message.innerHTML = 'Writing file to MEMFS';
const data = new Uint8Array(await readFromBlobOrFile(files[0]));
const now = Date.now();
console.time(`[${now}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
const { file } = await runFFmpeg(IN_FILE_NAME, data, args, OUT_FILE_NAME)
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([file.buffer], { type: 'video/mp4' }));
console.timeEnd(`[${now}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../../dist/ffmpeg-core.js"></script>
</body>
</html>
wasm/examples/browser/x264.html 0 → 100644
View file @ 1c825870
<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">Upload a video</p>
<script type="text/javascript" src="./js/utils.js"></script>
<script type="text/javascript">
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
const IN_FILE_NAME = 'video.avi';
const OUT_FILE_NAME = 'video.mp4';
const args = ['-i', IN_FILE_NAME, OUT_FILE_NAME];
message.innerHTML = 'Writing file to MEMFS';
const data = new Uint8Array(await readFromBlobOrFile(files[0]));
const now = Date.now();
console.time(`[${now}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
const { file } = await runFFmpeg(IN_FILE_NAME, data, args, OUT_FILE_NAME)
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([file.buffer], { type: 'video/mp4' }));
console.timeEnd(`[${now}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../../dist/ffmpeg-core.js"></script>
</body>
</html>
wasm/examples/transcode-webm.html deleted 100644 → 0
View file @ 58470441
<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 webm and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message">Update a video</p>
<script type="text/javascript">
const readFromBlobOrFile = (blob) => (
new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = ({ target: { error: { code } } }) => {
reject(Error(`File could not be read! Code=${code}`));
};
fileReader.readAsArrayBuffer(blob);
})
);
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
let resolve = null;
const Core = await createFFmpegCore({
printErr: (m) => console.log(m),
print: (m) => {
console.log(m);
if (m.startsWith('FFMPEG_END')) {
resolve();
}
}
});
message.innerHTML = 'Writing file to MEMFS';
const data = await readFromBlobOrFile(files[0]);
Core.FS.writeFile('video.avi', new Uint8Array(data));
const ffmpeg = Core.cwrap('proxy_main', 'number', ['number', 'number']);
// const args = ['ffmpeg', '-hide_banner', '-nostdin', '-i', 'video.mp4', '-vf', 'scale=512:-1', '-vcodec', 'h264', '-acodec', 'copy', 'scaled.mp4'];
const args = ['ffmpeg', '-hide_banner', '-nostdin', '-threads', '0', '-i', 'video.avi', '-acodec', 'copy', '-row-mt', '1', 'video.webm'];
const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
args.forEach((s, idx) => {
const buf = Core._malloc(s.length + 1);
Core.writeAsciiToMemory(s, buf);
Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
});
const d = Date.now();
console.time(`[${d}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
ffmpeg(args.length, argsPtr);
await new Promise((_resolve) => { resolve = _resolve });
const output = Core.FS.readFile('video.webm');
Core.FS.unlink('video.webm');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([output.buffer], { type: 'video/mp4' }));
console.timeEnd(`[${d}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../dist/ffmpeg-core.js"></script>
</body>
</html>
wasm/examples/transcode-x264.html deleted 100644 → 0
View file @ 58470441
<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">Update a video</p>
<script type="text/javascript">
const readFromBlobOrFile = (blob) => (
new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = ({ target: { error: { code } } }) => {
reject(Error(`File could not be read! Code=${code}`));
};
fileReader.readAsArrayBuffer(blob);
})
);
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
let resolve = null;
const Core = await createFFmpegCore({
printErr: (m) => console.log(m),
print: (m) => {
console.log(m);
if (m.startsWith('FFMPEG_END')) {
resolve();
}
}
});
message.innerHTML = 'Writing file to MEMFS';
const data = await readFromBlobOrFile(files[0]);
Core.FS.writeFile('video.avi', new Uint8Array(data));
const ffmpeg = Core.cwrap('proxy_main', 'number', ['number', 'number']);
// const args = ['ffmpeg', '-hide_banner', '-nostdin', '-i', 'video.mp4', '-vf', 'scale=512:-1', '-vcodec', 'h264', '-acodec', 'copy', 'scaled.mp4'];
const args = ['ffmpeg', '-hide_banner', '-nostdin', '-i', 'video.avi', '-acodec', 'copy', 'video.mp4'];
const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
args.forEach((s, idx) => {
const buf = Core._malloc(s.length + 1);
Core.writeAsciiToMemory(s, buf);
Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
});
const d = Date.now();
console.time(`[${d}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
ffmpeg(args.length, argsPtr);
await new Promise((_resolve) => { resolve = _resolve });
const output = Core.FS.readFile('video.mp4');
Core.FS.unlink('video.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([output.buffer], { type: 'video/mp4' }));
console.timeEnd(`[${d}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../dist/ffmpeg-core.js"></script>
</body>
</html>
wasm/examples/transcode-x265.html deleted 100644 → 0
View file @ 58470441
<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 (x265) and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message">Update a video</p>
<script type="text/javascript">
const readFromBlobOrFile = (blob) => (
new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = ({ target: { error: { code } } }) => {
reject(Error(`File could not be read! Code=${code}`));
};
fileReader.readAsArrayBuffer(blob);
})
);
const message = document.getElementById('message');
const transcode = async ({ target: { files } }) => {
let resolve = null;
const Core = await createFFmpegCore({
printErr: (m) => console.log(m),
print: (m) => {
console.log(m);
if (m.startsWith('FFMPEG_END')) {
resolve();
}
}
});
message.innerHTML = 'Writing file to MEMFS';
const data = await readFromBlobOrFile(files[0]);
Core.FS.writeFile('video.avi', new Uint8Array(data));
const ffmpeg = Core.cwrap('proxy_main', 'number', ['number', 'number']);
// const args = ['ffmpeg', '-hide_banner', '-nostdin', '-i', 'video.mp4', '-vf', 'scale=512:-1', '-vcodec', 'h264', '-acodec', 'copy', 'scaled.mp4'];
const args = ['ffmpeg', '-hide_banner', '-nostdin', '-i', 'video.avi', '-c:v', 'libx265', '-acodec', 'copy', 'video.mp4'];
const argsPtr = Core._malloc(args.length * Uint32Array.BYTES_PER_ELEMENT);
args.forEach((s, idx) => {
const buf = Core._malloc(s.length + 1);
Core.writeAsciiToMemory(s, buf);
Core.setValue(argsPtr + (Uint32Array.BYTES_PER_ELEMENT * idx), buf, 'i32');
});
const d = Date.now();
console.time(`[${d}] ${files[0].name} execution time`);
message.innerHTML = 'Start to transcode';
ffmpeg(args.length, argsPtr);
await new Promise((_resolve) => { resolve = _resolve });
const output = Core.FS.readFile('video.mp4');
Core.FS.unlink('video.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([output.buffer], { type: 'video/mp4' }));
console.timeEnd(`[${d}] ${files[0].name} execution time`);
};
document.getElementById('uploader').addEventListener('change', transcode);
</script>
<script type="text/javascript" src="../dist/ffmpeg-core.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment