Git Product home page Git Product logo

Comments (19)

Vanilagy avatar Vanilagy commented on June 15, 2024 2

Alright! I managed to get a VideoEncoder to work today using H.264. Just changed my demo slightly. (Not committed)

Just search the internet for people creating VideoEncoders with an avc codec, there's different codec strings and some might work better than others

from webm-muxer.

gut4 avatar gut4 commented on June 15, 2024 2

@Vanilagy Hi. I'm interested in mp4 muxer too. Maybe this can help: https://github.com/vjeux/mp4-h264-re-encode

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

As it stands, this is not possible because the buffer contents are not written in a straight-forward, linear fashion. I often jump back to set bytes I allocated previously, and at the end when calling .finalize, I jump back to the very start of the file to set some sizes and pointers of information I can only know at the end. Here:
CleanShot 2023-01-12 at 01 13 26@2x
Especially SeekHead and Cues are sections of the file that I can't know beforehand, in addition to the size of the entire Segment.

That said, WebM is designed to be a streaming format also, it just needs to write things slightly differently knowing that it won't be able to go back in time to change past bytes - so it excludes elements such as SeekHead and Cues. Maybe I'll get around to adding it to this library! Shouldn't be all too hard.

If I recall correctly, this library does the muxing in a streaming way, but it's harder to use and requires some WASM - not optimal. In general, having to encode twice is also not optimal. Ideally, we'd go straight from the video frames to the .mp4, but there doesn't seem to be a good muxing library for that yet.

If it's not too hard, maybe I'll create a sister library to this one that spits out .mp4 instead. But no promises!

from webm-muxer.

pie6k avatar pie6k commented on June 15, 2024

Thank you for detailed write up!

I was worried it will be exactly as you said. I understand, it makes total sense - I had no knowledge about how linear or not writing to WebM is

Perhaps I'll create a few shorter webm videos and then merge them together with ffmpeg. This way I could still have some parallelism

I was also hoping I could send video chunks directly to ffmpeg without wrapping it with WebM , but I didn't really find a way to do this

Also, do you have any clues how could I avoid transcoding to mp4 h264 codec, while having mp4 that works across all platforms?

from webm-muxer.

pie6k avatar pie6k commented on June 15, 2024

Also - if you feel you could create mp4 muxer that would have similar performance and could work with VideoEncoder directly, without the need of transcoding - I'd be happy to pay you for that in form of freelance project

Critical part is never having to read pixels data from GPU, but I imagine you're very aware of that

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

So, ffmpeg actually supports direct video codecs as input (for example an h264 stream), or even uncompressed video in RGB or YUV format. I haven't used these features myself, but I'm sure you could find something. Then you could use a VideoEncoder, get H.264 out, and pipe that directly into ffmpeg. This might be fine for you as a solution.

However, ffmpeg is quite heavy and large and I'd personally hesitate to include it with any website where size is a concern. I'm pretty sure I could write an mp4 muxer that works like this one and gets input directly from a VideoEncoder while being only a couple of kB large. I'd be willing to get to work on it if you were to pay me, so in that case, we should get in contact.

from webm-muxer.

pie6k avatar pie6k commented on June 15, 2024

Oh is it? So I can directly pipe h264 video chunks as -i input? Do I need some special input parameters to get it to work?

eg from config like ? aka. no muxing is needed first?

{
    codec: "avc1.42001E",
    width: 720,
    height: 480,
    bitrate: 1000000,
    avc : { format: "annexb" },
    framerate: 60,
    hardwareAcceleration : "prefer-software",
  }

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

I'm not sure if it needs extra parameters! I've read you need to specify the format as -f h264, besides that, I don't know. You definitely don't need to mux it if you only have video!

Also, I would not use prefer-software.

from webm-muxer.

pie6k avatar pie6k commented on June 15, 2024

The point is I get not supported in Chrome if I use prefer-hardware.

I'll check it and if I'll need muxing and it'll have reasonable performance and quality - will get in touch

from webm-muxer.

yume-chan avatar yume-chan commented on June 15, 2024

Previously I also thought about this, even when finalize is not called, I can still get a playable file (but not seekable). Like the MKV files produced by OBS.

However, it's not possible to write files directly to user's file system on Web (WICG/file-system-access#260 (comment)), so there is little point for doing that.

MP4 container can write file metadata at either beginning or end, so it's easier to do the "linear" writing mode, except failed to write metadata causes the whole file to be invalid.

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

In my personal use I never needed to be able to read "unfinished" files. It's like, I want the whole video or nothing. But I guess there are many more usecases out there! Especially seekability is not something I'd want to sacrifice. Of course, if we're talking streaming, that's a different thing.

Also, can't you use the OPFS to write files in-place? Should the power go out, you can simply restore to the last point in the OPFS and then flush that to the user's disk.

from webm-muxer.

yume-chan avatar yume-chan commented on June 15, 2024

My use case is similar to OBS, recoding a stream, and in case of anything bad happens, previously recorded part is still playable.

By using OPFS, I still need to create some UI, and tell the user to go back to my Web app to "retrieve" the file. It feels complex and no native programs work like this.

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

Yes that's right. It is a limitation of the web platform. If your usecase allows for you to use something like Electron, you could explore better solutions.

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

Honestly though, knowing that power outs are quite rare, I don't think any user would mind to be prompted to restore a file they care about in the case of one.

from webm-muxer.

pie6k avatar pie6k commented on June 15, 2024

it seems my use case is now more of a memory issue thing:

A few users reported 'out of memory' issues when working with long videos, if I use buffer output

I checked file handle API, but it requires me to use handle I got from file picker -I don't want to show the user the picker, as I save to temp file, but seems there is no way to avoid it when working with this API (I use electron)

Would be nice to have 3rd way of capturing called 'file-manual' that expects you to provide set of callbacks such as saveBytes(bytes,offset), etc. and then it is up to me to correctly manage saving this content to file, while also making it possible to save in non linear way

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

Yeah, that sounds like a smart addition. I'll add it when I find the time!

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

Should you still be interested in a high-quality MP4 muxer for your project, I'm still willing to cooperate.

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

Details about how to use the streaming target are documented in the README. If there are any issues, please report back to me!

from webm-muxer.

Vanilagy avatar Vanilagy commented on June 15, 2024

@pie6k FFMPEG no more: https://github.com/Vanilagy/mp4-muxer

from webm-muxer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.