OpenCV.js – Live Webcam + Image Upload

Needs to run on a local server, get opencv.wasm from https://github.com/opencv-js/wasm

⏳ Loading OpenCV...

✍️ Edit Processing Code

// Unmodified video feed:
dst.create(src.rows, src.cols, src.type());
src.copyTo(dst);

// Grayscale processing example
//cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
//cv.cvtColor(dst, dst, cv.COLOR_GRAY2RGBA);

//Gaussian Blur:
//let ksize = new cv.Size(15, 15);
//cv.GaussianBlur(src, dst, ksize, 0);

// Edge Detection:
//cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
//cv.Canny(dst, dst, 50, 150);
//cv.cvtColor(dst, dst, cv.COLOR_GRAY2RGBA);

// Invert Colors:
//// Convert RGBA to RGB
//let rgb = new cv.Mat();  
//cv.cvtColor(src, rgb, cv.COLOR_RGBA2RGB);
//// Invert RGB
//let inverted = new cv.Mat();
//cv.bitwise_not(rgb, inverted); 
//// Convert back to RGBA
//cv.cvtColor(inverted, dst, cv.COLOR_RGB2RGBA); 
//rgb.delete();
//inverted.delete();

// Simple Drawing:
//dst.create(src.rows, src.cols, src.type());
//dst.setTo(new cv.Scalar(0, 0, 0, 255));
//cv.line(dst, new cv.Point(0, 0), new cv.Point(dst.cols, dst.rows), new cv.Scalar(255, 0, 0, 255), 4);

// background subtraction
//dst.create(src.rows, src.cols, src.type());
//if (backgroundMat !== null) {
//  let diff = new cv.Mat();
//  cv.absdiff(src, backgroundMat, diff);
//  cv.cvtColor(diff, dst, cv.COLOR_RGBA2GRAY);
//  cv.cvtColor(dst, dst, cv.COLOR_GRAY2RGBA);
//  //cv.convertScaleAbs(diff, dst, 5.0); // Multiplies differences
//  diff.delete();
//} else {
//  src.copyTo(dst);
//}