Motion Sensitivity Algorithm using Javascript

motion detection

Introducing A Simple and Lightweight Motion Detection Algorithm using Js

JS-Motion-Detection is a remarkable motion revealing algorithm designed for live webcam feeds. This ingenious algorithm boasts simplicity, speed, and lightness, with a minified size of just 531 bytes when compressed using the Google Closure compiler.

Why JS-Motion-Detection?

Our primary goal was to create a motion detection algorithm that excels in sensitivity, capable of discerning even the most subtle changes in lighting and movement. It has been optimized to run swiftly on both desktop and mobile devices, ensuring a seamless user experience.

tech stack

implementation

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-Motion-Detection using javascript</title>
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    <h1>Motion Detection by javascript</h1>
    <h2>By Chulindra Rai. Follow for more <a href="https://github.com/IotchulindraRai">official GitHub project page</a>.</h2>
    <video id="camStream"></video>
    <canvas id="canvas"></canvas>
    <canvas id="canvasFinal"></canvas>
    
    <p>Chulindra says "I drew inspiration from Google Lead Developer Advocate for Web ML J. Mayes to create a highly 
        responsive motion-revealing algorithm designed for both desktop and mobile devices. In this algorithm, non-moving pixels
         seamlessly transition to a neutral grey color, while any alterations manifest as heightened contrast."</p>

    <script src="script.js"></script>
</body>
</html>

Get Chulindra Rai’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

style.css

#camStream, #canvas {
    opacity:0;
    position:fixed;
    top:0;
    left:0;
  }
  
  #canvasFinal {
    margin:0 auto;
    display:block;
    min-width: 540px;
    min-height: 480px;
    background-image: url(https://medium.com/'https://lh3.googleusercontent.com/opBDNnhXBe1aiLOp3C9yatntR-8fQptvgDu8C1LSZM68khdJh6AQgIHdgWU_T80_2MBhQLjgrJwR6mY=w3840-h2160-rw-no');
    background-repeat: no-repeat;
    background-position: center;
  }
  
  body {
    text-align: center;
  }
  
  h1 {
    text-align:center;
    margin-top:50px;
  }
  
  h1, p, h2, a {
    font-family:'arial';
    color:#0db204;
  }
  
  p {
    font-size:10pt;
    font-style:italic;
    color:rgb(1, 1, 7);
  }

script.js

navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
window.URL=window.URL||window.webkitURL||window.mozURL||window.msURL;
var MotionDetector=function(){
    function g(a){l=a;c.srcObject=a;c.play()
    }
    function m(a)
    {console.error(a)}
    function n(){if(l){
        d.width=c.offsetWidth;
        d.height=c.offsetHeight;
        h.width=c.offsetWidth;
        h.height=c.offsetHeight;k.drawImage(c,0,0);
        f[e]=k.getImageData(0,0,d.width,d.height);
        e=0==e?1:0;a=k.getImageData(0,0,d.width,d.height);
        for(var g=a.data.length,b=0;b<g;)
        a.data[b]=.5*(255-a.data[b])+.5*f[e].data[b],
    a.data[b+1]=.5*(255-a.data[b+1])+.5*f[e].data[b+1],
    a.data[b+2]=.5*(255-a.data[b+2])+.5*f[e].data[b+
2],a.data[b+3]=255,b+=4;p.putImageData(a,0,0)}}
var e=0,d=document.getElementById("canvas"),
h=document.getElementById("canvasFinal"),
c=document.getElementById("camStream"),
k=d.getContext("2d"),
p=h.getContext("2d"),
l=null,a=null,f=[];return{init:function(){
    navigator.getUserMedia?navigator.getUserMedia({
        video:!0},g,m):console.error("Your browser does not support getUserMedia");
        window.setInterval(n,32)}}}();
        MotionDetector.init();

check out our live demo here: https://motiondetectionusingjavascript.pages.devcode :

The Beauty of Simplicity

JS-Motion-Detection offers an elegant result: all static, non-moving pixels gracefully transition to a neutral grey color, while any alterations stand out as darker or lighter shades compared to the neutral grey. The larger the motion, the greater the contrast.

More Than Just Pixels

While JS-Motion-Detection is primarily a visual tool for showcasing isolated movement, its potential goes beyond the surface. You can harness its output to highlight moving segments, but this would require additional coding. In essence, you could mark all “changed” pixels and then perform a “flood fill” operation to extract a bounding box.

Experience JS-Motion-Detection and uncover the beauty of motion in a simple and efficient manner. It’s not just an algorithm; it’s a visual journey into the world of motion detection.