samirkumardas / jmuxer

jMuxer - a simple javascript mp4 muxer that works in both browser and node environment.
Other
559 stars 114 forks source link

when use `duration`, the video doesn't show anything. #105

Closed kingsimba closed 2 years ago

kingsimba commented 2 years ago

I use jMuxer with Angular.

When I use fps, it works as expected:

<video #rgbCameraPlayer autoplay playsinline *ngIf="supportsRgbCamera" class="camera-video"></video>
this.jmuxer = new JMuxer({
            node: this.rgbCameraPlayer.nativeElement,
            mode: 'video',
            fps: 10,
        });

But when I remove fps, and use duration instead. The video is totally blank.

Input data contains the timestamp of each frame: https://gist.github.com/kingsimba/71798025f97b196c3ee80f23f81a7584

The input data is 10 fps and contains one iframe for each 20 frames.

Code snippet:

class MyComponent implements AfterViewInit{
    private jmuxer: JMuxer = null;
    private lastFrame : RgbCameraData = null;

    ngAfterViewInit(): void {
        this.jmuxer = new JMuxer({
            node: this.rgbCameraPlayer.nativeElement,
            mode: 'video',
            debug: false
        });
    }

    private onCameraData(frame: RgbCameraData) {
        if (this.jmuxer != null) {
            if (this.lastFrame != null)
            {
                const duration = Math.floor((frame.stamp - this.lastFrame.stamp) * 1000); // to milliseconds
                this.jmuxer.feed({
                    video: this.lastFrame.data,
                    duration: duration
                });
            }
        }

        this.lastFrame = frame;
    }
}

The logs show that the frames are parsed correctly. jmuxer.min.js:1 jmuxer: No. of frames of the last chunk: 1

But there is no jmuxer.min.js:1 put segment (video): dts: 1000 frames: 1 second: 00:01, which would have shown up if I use fps instead of duration

samirkumardas commented 2 years ago

The code looks good. Did you get duration correctly?

kingsimba commented 2 years ago

Duration is calculated from stamp in https://gist.github.com/kingsimba/71798025f97b196c3ee80f23f81a7584

I added some log, the duration seems correct.

duration =  200
duration =  203
duration =  200
duration =  207
duration =  0
duration =  199
duration =  201
duration =  207
duration =  195
duration =  202
duration =  197
duration =  206
duration =  203
duration =  199
duration =  204
duration =  0
duration =  200
duration =  208
duration =  197
duration =  203
duration =  199
duration =  208
duration =  200
duration =  203
duration =  197
duration =  201
duration =  0
duration =  205
duration =  201
duration =  203
duration =  193
duration =  207
duration =  217
duration =  191

But there is a 0 duration for each iframe. Is it correct? I used open.264 for encoding.

kingsimba commented 2 years ago

It doesn't bug me now. Remove both fps and duration, use flushingTime instead. The video plays fine.

Hope the docs can mention this. I learned it from other open source code.

this.jmuxer = new JMuxer({
    node: this.rgbCameraPlayer.nativeElement,
    mode: 'video',
    flushingTime: 0,
});