WebAV icon indicating copy to clipboard operation
WebAV copied to clipboard

Constructing MP4Clip from samples does not reflect original duration

Open jWalasik opened this issue 9 months ago • 0 comments

Hi, I am developing a video editor and facing an issue with exporting project to video files. The video is constructed correctly, with individual sprites present, but the exported file is very short, around 1 second in duration. Below is a sample code that demonstrates the issue. I based my implementation of the demo implementation, with exception of directly using MP4Samples to construct MP4Clip.

Here is sample code

export const streamExport = async (trackMap: Map<string, Track>) => {
  const combinator = new Combinator({
    width: 1280,
    height: 720,
    bgColor: "black",
  });

  const tracks = Array.from(trackMap.values());

  for (const track of tracks) {
    if (track.type === "video") {
      const vConfig = {
        ...track.config,
        codec: track.config.vCodec,
        description: track.config.vDescription,
      };
      const aConfig = {
        codec: track.config.aCodec,
        numberOfChannels: track.config.numberOfChannels,
        sampleRate: track.config.sampleRate,
      };

      const mp4Clip = new MP4Clip(
        {
          videoSamples: track.samples, //samples of whole video track
          audioSamples: track.audio!.samples,
          decoderConf: {
            video: vConfig,
            audio: aConfig,
          },
        },
        { audio: true }
      );

      await mp4Clip.ready;

      const sprite = new OffscreenSprite(`spr${1}`, mp4Clip);
      await sprite.ready;
      await combinator.add(sprite, {
        main: true,
        offset: 3,
        duration: 5,
      });
    }
  }

  const imgSpr = new OffscreenSprite(
    "imgSpr",
    new ImgClip(
      await createImageBitmap(await (await fetch("stanczyk.jpg")).blob())
    )
  );

  await imgSpr.ready;
  imgSpr.rect.x = 200;

  await combinator.add(imgSpr, { offset: 0, duration: 3 });

  const reader = combinator.output().getReader();
  //... process to download

Expected Behavior

The exported video file should reflect the combined duration of all clips and sprites added to the combinator.

Actual Behavior

The exported video file is very short, approximately 1 second in duration, regardless of the durations specified for the clips and sprites.

Additional Information

The issue might be related to the handling of video samples or the duration configuration in the Combinator or MP4Clip. The problem persists even when changing the duration and offset values for the clips and sprites.

Environment

Operating System: Windows 11 Browser: Chrome Version 124.0.6367.202 (Official Build) (64-bit) Node.js Version: v20.10.0

jWalasik avatar May 15 '24 12:05 jWalasik