Computer-vision techniques you can run in your browser

Curated OpenCV examples. Open one to read how it works and run it live.

• Drawing shapes & text — Draw rectangles, circles and text on an image with OpenCV in your browser. The starting point for computer vision — build test images and annotate detections. Run it live.
• Bitwise operations & masking — AND, OR, XOR and NOT on images with OpenCV in your browser — the basis of masking and compositing in computer vision. Run it live and combine shapes.
• Shape detection (approxPolyDP) — Detect triangles, rectangles and circles from contours with OpenCV in your browser using approxPolyDP. A classic computer-vision demo — run and tweak it live.
• Contour features (box, circle, hull) — Measure a shape with OpenCV in your browser — bounding box, minimum enclosing circle and convex hull from a contour. Core computer-vision measurements, run live.
• Fourier transform — See an image in the frequency domain with the Fourier transform (DFT) in your browser — the magnitude spectrum of a pattern. A computer-vision fundamental, run live.
• Gaussian blur — Smooth an image with OpenCV Gaussian blur in your browser. A fundamental computer-vision preprocessing step; compare kernel sizes live, no install.
• Bilateral filter (edge-preserving) — Smooth a photo while keeping edges sharp with OpenCV’s bilateral filter in your browser — the basis of skin-smoothing and cartoon effects in computer vision. Run it live.
• Image denoising (Non-Local Means) — Remove noise from a photo with OpenCV Non-Local Means denoising in your browser, keeping detail intact. A computer-vision clean-up step — run and tweak it live.
• Image gradients (Sobel & Laplacian) — Compute image gradients with OpenCV Sobel and Laplacian in your browser — how edge detection sees brightness change. A computer-vision fundamental, run it live.
• Canny edge detection — Run and tweak Canny edge detection on a real photo in your browser. A classic computer-vision algorithm (OpenCV cv2.Canny) that finds object outlines — no install.
• Morphological operations — Erode, dilate, open and close a binary image with OpenCV in your browser — clean up masks and text in computer vision. Run and tweak it live.
• Contour detection — Find and draw contours of shapes with OpenCV in your browser. A core computer-vision step for counting and measuring objects — run and tweak it live.
• Image thresholding — Compare global and adaptive thresholding with OpenCV in your browser. The simplest computer-vision segmentation step — run it live and tweak the values.
• HSV color space — Split a photo into hue, saturation and value with OpenCV in your browser, and isolate a colour with inRange. HSV makes colour-based computer vision easier than RGB — run live.
• Histogram equalization & CLAHE — Boost contrast in a dark photo with OpenCV histogram equalization and CLAHE in your browser. A key computer-vision enhancement step — run and compare it live.
• K-Means color quantization — Reduce a photo to K colours with OpenCV K-Means clustering in your browser (posterize). A classic computer-vision use of clustering — run and tweak K live.
• Harris corner detection — Find corners in a photo with OpenCV Harris corner detection in your browser — a classic computer-vision feature detector. Run and tweak it live.
• ORB feature detection — Detect ORB keypoints in a photo with OpenCV in your browser — a fast, patent-free feature detector for matching and tracking. A computer-vision staple, run live.
• Template matching — Find a patch inside an image with OpenCV template matching in your browser — locate a known object by sliding a template. A computer-vision basic, run it live.
• Watershed segmentation — Separate touching objects with OpenCV watershed segmentation in your browser — a classic computer-vision algorithm for splitting merged blobs. Run and tweak it live.
• GrabCut foreground extraction — Cut the foreground out of a photo with OpenCV GrabCut in your browser — draw a box and let it separate subject from background. A computer-vision favourite, run live.
• Hough line transform — Detect straight lines in a photo with the OpenCV Hough transform in your browser — find edges of buildings, roads and documents. A computer-vision classic, run live.
• Hough circle transform — Detect circles in a photo with OpenCV HoughCircles in your browser — find coins, pupils, wheels and more. A classic computer-vision detector, run and tweak it live.
• Perspective transform — Warp a photo to a bird’s-eye view with OpenCV perspective transform in your browser — the maths behind document scanners. A computer-vision essential, run it live.
• Face detection (Haar cascade) — Detect faces in a photo with OpenCV Haar cascades in your browser — the classic real-time face detector. No install; run and tweak it live.
• Live camera edge detection — Run OpenCV computer vision on your webcam in the browser — live Canny edges, client-side (nothing uploaded). Press Run and allow the camera.
• Live adaptive threshold — Adaptive thresholding on a live webcam feed with OpenCV in your browser. A computer-vision segmentation step that copes with uneven lighting. Run it live.
• Lane detection — Detect road lane lines from a live camera with OpenCV in your browser — Canny edges + region of interest + Hough lines. A classic computer-vision demo, run it live.
• Live color tracking — Track a coloured object on your webcam with OpenCV in your browser — an HSV mask + contour box, client-side (nothing uploaded). Press Run and allow the camera.
• Live background subtraction — Separate moving foreground from a static scene on your webcam with OpenCV MOG2 in your browser — client-side, nothing uploaded. Press Run and allow the camera.
• Live optical flow — Visualise motion on your webcam with OpenCV Lucas-Kanade optical flow in your browser — track feature points frame to frame, client-side. Press Run and allow the camera.
• Live face detection — Detect your face live on your webcam with OpenCV Haar cascades in your browser — client-side, nothing uploaded. Press Run and allow the camera.