https://github.com/web-atoms/media-converter

MP4 to WebM Converter in Browser using WebCodecs
https://github.com/web-atoms/media-converter

browser video-conversion webcodec

Last synced: 6 months ago
JSON representation

MP4 to WebM Converter in Browser using WebCodecs

• Host: GitHub
• URL: https://github.com/web-atoms/media-converter
• Owner: web-atoms
• License: apache-2.0
• Created: 2024-10-25T03:38:01.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-10-25T16:41:25.000Z (8 months ago)
• Last Synced: 2024-10-26T18:12:14.978Z (8 months ago)
• Topics: browser, video-conversion, webcodec
• Language: TypeScript
• Homepage: https://video-resizer.socialmail.me/
• Size: 187 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Action Status](https://github.com/web-atoms/media-converter/workflows/Build/badge.svg)](https://github.com/web-atoms/media-converter/actions) [![npm version](https://badge.fury.io/js/%40web-atoms%2Fcore.svg)](https://badge.fury.io/js/%40web-atoms%2Fcore)

# 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.

```html

    

    

        
Choose File

        

        

        

        


        

            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";

            }

        

    

```