Seriously.js Chroma Key Filter

github.com/brianchirls/Seriously.js simplifies adding chroma key effects to your videos.
Below is an example using a HTML5 green screen video as the source and rendering to target video.

// Load following two seriously.js files
https://github.com/brianchirls/Seriously.js/blob/master/seriously.js
https://github.com/brianchirls/Seriously.js/blob/master/effects/seriously.chroma.js

Scripts and video files should be loaded from the same domain to comply with CORS policy.

var seriously = new Seriously();
var src = seriously.source("#sourceVideo");
var target = seriously.target("#targetCanvas");
var chroma = seriously.effect('chroma');
chroma.source = src;
target.source = chroma;
const rgba = [98, 175, 116, 100]; // Screen background curtain color
chroma.screen = [rgba[0]/255, rgba[1]/255, rgba[2]/255, rgba[3]/100]; // Set screen
seriously.go();

Curtain: RGBA(98, 175, 116, 1)

Set up screen color to match your video background.

<video id="sourceVideo" class="w-full" loop autoplay muted controls >
	<source src="/assets/2018/chroma/greenscreen.mp4" type="video/mp4"/>
</video>
<div class="relative w-full">
	<video class="w-full" loop autoplay muted width="620" height="350">
		<source src="/assets/2018/chroma/cows.mp4" type="video/mp4" />
	</video>
	<canvas class="absolute w-full top-0" id="targetCanvas" width="620" height="350"></canvas>
</div>

Source video

Target canvas

Live Cam Chroma-Key

You can switch the video source to your webcam and apply real-time filters in your browser.

Record target canvas and save

Afterwards you can use spite/ccapture.js to save the final video from target canvas.

// After loading https://github.com/spite/ccapture.js/blob/master/build/CCapture.all.min.js
capturer = new CCapture( {
	verbose: false,
	display: true,
	framerate: 30,
	quality: 80,
	format: "webm",
	timeLimit: 0,
	frameLimit: 0,
	autoSaveTime: 0
});

capturer.start();

var targetCanvas = document.getElementById('targetCanvas');

// seriously go with capturer
seriously.go(() => {
	if(capturer)
		capturer.capture( targetCanvas );
});

// then when it's done, stopCapture()
var stopCapture = () => {
	capturer.stop();
	capturer.save();
}