|
| 1 | +<html> |
| 2 | + <head> |
| 3 | + <script src="/dist/ffmpeg.dev.js"></script> |
| 4 | + <style> |
| 5 | + html, |
| 6 | + body { |
| 7 | + margin: 0; |
| 8 | + width: 100%; |
| 9 | + height: 100%; |
| 10 | + } |
| 11 | + |
| 12 | + body { |
| 13 | + display: flex; |
| 14 | + flex-direction: column; |
| 15 | + align-items: center; |
| 16 | + } |
| 17 | + </style> |
| 18 | + </head> |
| 19 | + |
| 20 | + <body> |
| 21 | + <h3>Upload a Video File</h3> |
| 22 | + <video id="output-video" controls></video><br /> |
| 23 | + <input type="file" id="uploader" /> |
| 24 | + <p id="message"></p> |
| 25 | + <script> |
| 26 | + const { createWorker } = FFmpeg; |
| 27 | + const worker = createWorker({ |
| 28 | + corePath: "../../node_modules/@ffmpeg/core/ffmpeg-core.js", |
| 29 | + logger: ({ message }) => console.log(message) |
| 30 | + }); |
| 31 | + |
| 32 | + const transcode = async ({ target: { files } }) => { |
| 33 | + const message = document.getElementById("message"); |
| 34 | + const { name } = files[0]; |
| 35 | + message.innerHTML = "Loading ffmpeg-core.js"; |
| 36 | + await worker.load(); |
| 37 | + message.innerHTML = "Start Concating"; |
| 38 | + await worker.write(name, files[0]); |
| 39 | + const textFileName = "list.txt"; |
| 40 | + await worker.writeText(textFileName, `file ${name}\nfile ${name}`); |
| 41 | + await worker.concatDemux(textFileName, "output.mp4"); |
| 42 | + message.innerHTML = "Complete Concating"; |
| 43 | + const { data } = await worker.read("output.mp4"); |
| 44 | + const video = document.getElementById("output-video"); |
| 45 | + video.src = URL.createObjectURL( |
| 46 | + new Blob([data.buffer], { type: "video/mp4" }) |
| 47 | + ); |
| 48 | + }; |
| 49 | + const elm = document.getElementById("uploader"); |
| 50 | + elm.addEventListener("change", transcode); |
| 51 | + </script> |
| 52 | + </body> |
| 53 | +</html> |
0 commit comments