Node api example is broken

[gut4]

reactive-video --duration-frames 90 MyVideo.js works as expected But node api example generate a broken file https://github.com/mifi/reactive-video#programmatic-api

[gut4]

I can play output video only in VLC and can't in other players (quicktime, chrome, safari ...) Looks like it's problem with colorspace: https://superuser.com/questions/704744/video-produced-from-images-only-plays-in-vlc-but-no-other-players

[mifi]

I think because it produces mjpeg (for speed) Try --raw-output=false

[mifi]

Oh wait I was wrong. Default for raw-output is indeed false. So I'm not sure why you're getting this issue. For me the example works fine in QuickLook, Safari, QuickTime etc. Which OS are you on and which ffmpeg version?

You are using this example right?

import React from 'react';
import { Image, Segment, Video, useVideo } from 'reactive-video';

export default () => {
  const { currentFrame, currentTime, durationFrames, durationTime } = useVideo();

  return (
    <>
      {/* This segment lasts for 30 frames. Print out the current frame number */}
      <Segment duration={30}>
        <div
          style={{ width: '100%', height: '100%', backgroundColor: `hsl(${(currentFrame * 10) % 360}deg 78% 37%)`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', fontSize: 100 }}
        >
          Current frame {currentFrame}
        </div>
      </Segment>

      {/* This segment starts from 60 frames. Shows an image with a Ken Burns zoom effect */}
      <Segment
        start={30}
        duration={30}
        render={(segment) => (
          <Image src="https://static.mifi.no/losslesscut/47320816_571610306620180_5860442193520120371_n.jpg" style={{ width: '100%', transform: `scale(${1 + (segment.currentFrame / segment.durationFrames) * 0.1})` }} />
        )}
      />

      {/* This segment starts from 60 frames. Starts 100 frames into the source video (seek to) */}
      <Segment start={60}>
        <Segment start={-100}>
          <Video src="https://static.mifi.no/Zv5RvLhCz4M-small.mp4" style={{ width: '100%' }} />
        </Segment>
      </Segment>
    </>
  );
};

[gut4]

https://github.com/mifi/reactive-video/blob/2da541f58c785eea38fdb6e03fa73e998b6cd60d/packages/builder/index.js#L84

rawOutput is true by default. rawOutput: false help me

[mifi]

Ah, my bad again. I thought you were using the CLI (which sets false by default). Then I think we can close this. I'll update readme