Comparable Video Viewer

React Component for compare original and filtered Video

Example Page

installation

// with npm
$ npm install comparable-video-viewer

// with yarn
$ yarn add comparable-video-viewer

Run Example

// build
$ yarn && yarn build

// run example
$ yarn && yarn build && yarn start-demo

Source video

• Source video should be merged side-by-side

• Example Video

• Merge video with ffmpeg (Sample)

$ ffmpeg \
  -i ./SampleVideo_320x240.mp4 \
  -i ./SampleVideo_960x720.mp4 \
  -filter_complex "
  [0:v] scale=w=$SW:h=$SH,pad=$SW*2:$SH[int];
  [int][1:v]overlay=W/2:0[vid]
  "  \
  -map [vid] \
  -c:v libx264 \
  -crf 18 \
  -preset veryfast \
  ./OutputVideo_Merged.mp4

Usage Examples

• Basic

  <ComparableVideoViewer src={SampleVideo} />

• With Appearance Configs

  <ComparableVideoViewer
    src={SampleVideo}
    barConfig={{
      barColor: '#990000',
      barWidth: 15,
      barInnerWidthRatio: 0.3
    }}
    textConfig={{
      leftText: 'LQ',
      rightText: 'HQ',
      textSize: '30px',
      textColor: '#FFFFFF',
    }}
  />

• With bound (should give px values)

  <ComparableVideoViewer
    src={SampleVideo}
    bound={{
      x: 100,
      y: 50,
      width: 120,
      height: 90,
    }}
  />

Props

Prop Lists

| name | Type | Default | Description | | ----------------------- | ----------------- | --------------- | ----------------------------------------- | | src | String | REQUIRED | Source url to show | | haveControls | boolean | true | Show Controls | | initialBarPosition | number | 0.5 | Bar Position between 0,1 | | targetFrameRate | number | 30 | target frame per second | | ----------------------- | ----------------- | --------------- | ----------------------------------------- | | autoPlay | boolean | true | auto play video | | muted | boolean | true | mute video | | loop | boolean | true | loop video | | ----------------------- | ----------------- | --------------- | ----------------------------------------- | | onResize | number => void | | fires when this component resize | | onUpdateBarPoisition | number => void | | fires when bar position updated | | ----------------------- | ----------------- | --------------- | ----------------------------------------- | | barConfig | BarConfig | | config about bar appearance | | textConfig | TextConfig | | config about overlay texts | | bound | Bound | | bound to show |

Default Props

const NO_BOUND: number = -99999;

const defaultProps = {
    haveControls: true,
    initialBarPosition: 0.5,
    targetFrameRate: 30,

    autoPlay: true,
    muted: true,
    loop: true,

    onUpdateBarPosition: (position: number) => {},
    onResize: (scale: number) => {},

    barConfig: {
      barColor: '#FFFFFF',
      barWidth: 15,
      barInnerWidthRatio: 0.3,
    },

    bound: { 
      x: 0,
      y: 0,
      width: NO_BOUND,
      height: NO_BOUND
    },
  }

Prop Type definition

interface Bound {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface BarConfig {
  barColor: Color;
  // barHoverOpacity: number;
  barWidth: number;
  barInnerWidthRatio: number;
}

interface TextConfig {
  leftText: string;
  rightText: string;
  textSize: string;
  textColor: Color;
}

Related

• TSDX - Zero-config CLI for TypeScript used by this repo.
• p5.js - JavaScript library for creative coding which inspires the method for canvas handling.