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

concatDemuxer with example

Browse Source
This commit is contained in:
santosh898 2019-12-16 15:32:28 +05:30
parent 68fd03d55d
commit bfdb83b41b
1 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
examples/browser/concatDemuxer.html Normal file
View File

@ -0,0 +1,57 @@
<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 { createWorker } = FFmpeg;
const worker = createWorker({
corePath: "../../node_modules/@ffmpeg/core/ffmpeg-core.js",
logger: ({ message }) => console.log(message)
});
const transcode = async ({ target: { files } }) => {
const message = document.getElementById("message");
message.innerHTML = "Loading ffmpeg-core.js";
await worker.load();
message.innerHTML = "Start Concating";
const inputPaths = [];
for (const file of files) {
const { name } = file;
await worker.write(name, file);
inputPaths.push(name);
}
await worker.concatDemuxer(inputPaths, "output.mp4");
message.innerHTML = "Complete Concating";
const { data } = await worker.read("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>