redotvideo / revideo

Create Videos with Code
https://re.video
MIT License
2.58k stars 88 forks source link

Issues with HDR video #330

Open Vextil opened 3 weeks ago

Vextil commented 3 weeks ago

When using videos in HDR (mov, hevc) there are two separate issues.

The video preview is blown out

Could this be caused because of lack of support for HDR files in canvas? I have made a workaround for this, by removing the video element from Revideo and instead showing it in a separate HTML video element behind the Revideo player and manually syncing the time between both, but this workaround is only for useful for the preview and for simple compositions.

On the left is the Revideo editor, on right the expected video: image

When rendering, the video is black.

This happens for FFMPEG and SLOW decoders. The WEB decoder does not support the format, which is expected.

Could this be related to any of the arguments supplied to the frame extractor?

 private getArgs(
    codec: string,
    range?: [number, number],
    fps?: number,
  ): {inputOptions: string[]; outputOptions: string[]} {
    const inputOptions = [];
    const outputOptions = [];

    inputOptions.push('-loglevel', ffmpegSettings.getLogLevel());

    if (range) {
      inputOptions.push(
        ...['-ss', range[0].toFixed(2), '-to', range[1].toFixed(2)],
      );
    }

    if (codec === 'vp9') {
      inputOptions.push('-vcodec', 'libvpx-vp9');
    }

    if (fps) {
      outputOptions.push('-vf', `fps=fps=${fps}`);
    }

    if (!range) {
      outputOptions.push('-vframes', '1');
    }

    outputOptions.push('-f', 'rawvideo');
    outputOptions.push('-pix_fmt', 'rgba');

    return {inputOptions, outputOptions};
  }

Here is the sample video file I used: https://revideo-issue.s3.us-east-1.amazonaws.com/+hdr.mov

I'm willing to attempt a fix myself, but some guidance is appreciated.