Optical Flow and Motion Tracking Demo
Use a webcam or uploaded short video to compare consecutive frames, highlight moving regions, and inspect simple motion vectors directly in the browser with OpenCV.js.
What students will see
This demo compares consecutive frames to highlight moving regions, draw simple motion arrows, and explain how computers detect motion in video streams.
Why it matters
Motion analysis is a foundation for surveillance, robot perception, activity recognition, traffic monitoring, and tracking moving objects over time.
How this version works
The page uses OpenCV.js in the browser to convert frames to grayscale, compute frame differences, threshold motion, and extract moving regions with contours.
Source: Live webcam
Status: Upload a short video clip or start the webcam to study motion.
Controls
How the pipeline works
1. Convert each frame to grayscale.
2. Compare the current frame with the previous frame.
3. Threshold the difference image to isolate motion.
4. Dilate and erode to clean up noise.
5. Find contours and draw boxes around moving regions.
6. Compare motion-region centers over time to draw simple direction arrows.
Motion Summary
Source
Webcam
Motion regions
0
Motion pixels
0
Vectors
On
Detected Regions
Teaching Notes
Frame differencing is simpler than full dense optical flow, but it still teaches the core idea: motion is detected by measuring how pixels change over time.
Large motion regions can indicate a moving person, vehicle, robot arm, or camera shake. Small noisy regions often come from compression artifacts, lighting flicker, or sensor noise.
Students can compare how threshold choice, region filtering, and camera stability change the motion result.
Where this appears in practice
Surveillance systems use motion detection to trigger alerts or save only active footage.
Robots use motion cues to estimate moving obstacles, track targets, and understand scene dynamics.
Sports, traffic, and industrial systems use video motion tracking to measure speed, direction, and activity over time.