What is ffmpeg.wasms
ffmpeg.wasm is a library that allows you to use FFmpeg directly in your browser without any backend services.
Implementation
You can use this example to convert .mov files to .mp4 files (x264).
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/@ffmpeg/[email protected]/dist/ffmpeg.min.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 video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls muted autoplay></video>
<br />
<br>
<input type="file" id="uploader">
<p id="message"></p>
<br>
<div>
<textarea id='log' rows=30 cols=100 autofocus></textarea>
</div>
<br>
<script>
var txt = document.getElementById('log');
const {
createFFmpeg
} = FFmpeg;
const ffmpeg = createFFmpeg({
log: true,
logger: ({
message
}) => {
txt.value += "\n" + message;
}
});
const transcode = async ({
target: {
files
}
}) => {
const message = document.getElementById('message');
const {
name
} = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await ffmpeg.load();
await ffmpeg.write(name, files[0]);
message.innerHTML = 'Start transcoding';
await ffmpeg.transcode(name, 'output.mp4');
message.innerHTML = 'Transcoding completed';
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'
}));
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
</script>
</body>
</html>
Demo
You can use this codepen to convert .mov files to .mp4 files (x264).
Here is small .mov file for testing.
Information sources
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/docs/api.md
https://github.com/ffmpegwasm/ffmpeg.wasm
