mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
74 lines
4.4 KiB
HTML
74 lines
4.4 KiB
HTML
<body>
|
|
<video id="player" controls style="display:none"></video>
|
|
<div id="info">
|
|
<h3>This tool can be used to convert WebM videos of dynamic resolution to MP4 files of a fixed 1280x720 resolution.</h3> Just select a video file and wait. It takes about 60-seconds to transcode 1-second of video. Very sloowww...<br />
|
|
<p>You can use FFMpeg locally to achieve much faster results.</p>
|
|
<p>This tool performs the following action in your browser: <i>fmpeg -i input.webm -vf scale=1280:720 output.mp4</i><p>
|
|
<input type="file" id="uploader" title="Convert WebM to MP4">
|
|
<hr>
|
|
<h3>Bonus: This option converts MKV files to MP4 files without transcoding.</h3> </p><i>fmpeg -i INPUTFILE -vcodec copy -acodec copy output.mp4</i>
|
|
<br /><br /><input type="file" id="uploader2" accept=".mkv" title="Convert MKV to MP4">
|
|
<p>You can use FFMpeg locally to achieve much faster results with either option.</p>
|
|
<h3>This option converts WebM files to MP4 files without transcoding, and attempting to force high resolutions.
|
|
<br /><br /><input type="file" id="uploader3" accept=".webm" title="Convert WebM to MP4">
|
|
|
|
</div>
|
|
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.6/dist/ffmpeg.min.js"></script>
|
|
<script>
|
|
const { createFFmpeg, fetchFile } = FFmpeg;
|
|
const ffmpeg = createFFmpeg({ log: true });
|
|
const transcode = async ({ target: { files } }) => {
|
|
const { name } = files[0];
|
|
document.getElementById('uploader').style.display="none";
|
|
document.getElementById('uploader2').style.display="none";
|
|
document.getElementById('uploader3').style.display="none";
|
|
document.getElementById('info').innerText = "Transcoding file... this will take a while";
|
|
await ffmpeg.load();
|
|
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
|
|
await ffmpeg.run('-i', name, '-vf', 'scale=1280:720', 'output.mp4');
|
|
const data = ffmpeg.FS('readFile', 'output.mp4');
|
|
const video = document.getElementById('player');
|
|
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
|
|
video.style.display="block";
|
|
document.getElementById('info').innerText = "Operation Done. Play video or download it.";
|
|
}
|
|
const transmux = async ({ target: { files } }) => {
|
|
const { name } = files[0];
|
|
document.getElementById('uploader').style.display="none";
|
|
document.getElementById('uploader2').style.display="none";
|
|
document.getElementById('uploader3').style.display="none";
|
|
document.getElementById('info').innerText = "Transcoding file... this will take a while";
|
|
await ffmpeg.load();
|
|
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
|
|
await ffmpeg.run('-i', name, '-vcodec', 'copy', '-acodec', 'copy', 'output.mp4');
|
|
const data = ffmpeg.FS('readFile', 'output.mp4');
|
|
const video = document.getElementById('player');
|
|
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
|
|
video.style.display="block";
|
|
document.getElementById('info').innerText = "Operation Done. Play video or download it.";
|
|
}
|
|
|
|
const force1080 = async ({ target: { files } }) => {
|
|
const { name } = files[0];
|
|
const sourceBuffer = await fetch("cap.webm").then(r => r.arrayBuffer());
|
|
document.getElementById('uploader').style.display="none";
|
|
document.getElementById('uploader2').style.display="none";
|
|
document.getElementById('uploader3').style.display="none";
|
|
document.getElementById('info').innerText = "Tweaking file... this will take a moment";
|
|
await ffmpeg.load();
|
|
ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
|
|
ffmpeg.FS("writeFile","cap.webm", new Uint8Array(sourceBuffer, 0, sourceBuffer.byteLength));
|
|
|
|
await ffmpeg.run("-i", "concat:cap.webm|"+name, "-safe", "0", "-c", "copy", "-avoid_negative_ts", "1", "-strict", "experimental", "output.mp4");
|
|
const data = ffmpeg.FS('readFile', 'output.mp4');
|
|
const video = document.getElementById('player');
|
|
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
|
|
video.style.display="block";
|
|
document.getElementById('info').innerText = "Operation Done. Play video or download it.";
|
|
}
|
|
|
|
document.getElementById('uploader').addEventListener('change', transcode);
|
|
document.getElementById('uploader2').addEventListener('change', transmux);
|
|
document.getElementById('uploader3').addEventListener('change', force1080);
|
|
</script>
|
|
</body> |