Comparable-video-viewer NPM

Comparable Video Viewer

React Component for compare original and filtered Video

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;
}