How to make opencv.js background segmentation demo colorful, and with a sharper image?

The opencv.js background segmentation demo is more than amazing, and I’ve now spent 2 days trying to make the canvas result sharper and in color, and I KNOW 100% that it’s just a matter of finding the right formula, be it to use Grabcut on the video, or any other way. Can someone guide me to achieve this goal? I’m sure the answer will help 1000s of people. Thanks!


let video = document.getElementById(‘videoInput’);
let cap = new cv.VideoCapture(video);

let frame = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let fgmask = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let fgbg = new cv.BackgroundSubtractorMOG2(500, 16, true);

const FPS = 30;
function processVideo() {
try {
if (!streaming) {
// clean and stop.
frame.delete(); fgmask.delete(); fgbg.delete();
let begin =;
// start processing.;
fgbg.apply(frame, fgmask);
cv.imshow(‘canvasOutput’, fgmask);
// schedule the next one.
let delay = 1000/FPS - ( - begin);
setTimeout(processVideo, delay);
} catch (err) {

// schedule the first one.
setTimeout(processVideo, 0);