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.