Skip to content

Latest commit

 

History

History
61 lines (48 loc) · 2.2 KB

README.md

File metadata and controls

61 lines (48 loc) · 2.2 KB
Raw

Action Status npm version

Media Convert

MP4 to WebM Converter in Browser using WebCodecs

  1. WebCodecs provides faster media encoder/decoder.
  2. Supports resizing video to lower file size by reudcing bit rate.
  3. Supported on Chrome.

Current Issues, Need Help with Following.

  1. Audio Encoding has some frames dropped (audio is choppy)
  2. Video Encoding is not working firefox due to codec naming.
<!DOCTYPE HTML>
<html>
    <head></head>
    <body>
        <div>Choose File</div>
        <input id="videoFile" type="file" accept="video/*">
        <progress min="0" max="1"></progress>
        <video controls="true" style="height: 500px"></video>
        <pre style="height: 400px; width: 100%"></pre>

        <script type="module">

            import { MediaConverter } from "https://cdn.jsdelivr.net/npm/@web-atoms/[email protected]/dist/index.js"

            const progress = document.body.querySelector("progress");
            const pre = document.body.querySelector("pre");
            const input = document.body.querySelector("input");
            const video = document.body.querySelector("video");

            progress.style.display = "none";

            input.onchange = () => {
                convertFile(input.files[0]).catch((error) => {
                    pre.append(document.createTextNode((error.stack ?? stack) + "\n"));
                })
            };

            async function convertFile(file) {
                progress.style.removeProperty("display");
                const mc = new MediaConverter();
                const output = await mc.convert(file, {
                    outputName: file.name + ".webm",
                    maxHeight: 720,
                    maxSize: 25*1024*1024,
                    onProgress: (x) => progress.value = x
                });

                const url = URL.createObjectURL(output);
                video.src = url;
                progress.style.display = "none";
            }
        </script>
    </body>
</html>