SHARE
TWEET

JS Webcam Motion Detection Night Vision SRC Coded By BrU

a guest Jan 14th, 2020 98 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!--
  3. Created using JS Bin
  4. http://jsbin.com
  5.  
  6. Copyright (c) 2020 by anonymous (http://jsbin.com/sufiqicoku/3/edit)
  7.  
  8. Released under the MIT license: http://jsbin.mit-license.org
  9. -->
  10. <meta name="robots" content="noindex">
  11. <body>
  12.       <center>
  13.         <figure>
  14.             <video id="video" hidden></video>
  15.            
  16.         </figure>
  17.  
  18.         <figure>
  19.             <canvas id="motion"></canvas>
  20.             <figcaption>
  21.             <br>
  22.                  <span id="score"></span><p>
  23.                  <button id="reset" onclick="script:ammount=0;majamm=0;">Reset All</button>
  24.             </figcaption>
  25.          
  26.         </figure><p>
  27.         <img src="" onload="" id="img"></img>
  28.        <canvas id="photo" width=200 height=200></canvas>
  29.        
  30. <script>
  31. var DiffCamEngine = (function() {
  32.     var stream;                 // stream obtained from webcam
  33.     var video;                  // shows stream
  34.     var captureCanvas;          // internal canvas for capturing full images from video
  35.     var captureContext;         // context for capture canvas
  36.     var diffCanvas;             // internal canvas for diffing downscaled captures
  37.     var diffContext;            // context for diff canvas
  38.     var motionCanvas;           // receives processed diff images
  39.     var motionContext;          // context for motion canvas
  40.  
  41.     var initSuccessCallback;    // called when init succeeds
  42.     var initErrorCallback;      // called when init fails
  43.     var startCompleteCallback;  // called when start is complete
  44.     var captureCallback;        // called when an image has been captured and diffed
  45.  
  46.     var captureInterval;        // interval for continuous captures
  47.     var captureIntervalTime;    // time between captures, in ms
  48.     var captureWidth;           // full captured image width
  49.     var captureHeight;          // full captured image height
  50.     var diffWidth;              // downscaled width for diff/motion
  51.     var diffHeight;             // downscaled height for diff/motion
  52.     var isReadyToDiff;          // has a previous capture been made to diff against?
  53.     var pixelDiffThreshold;     // min for a pixel to be considered significant
  54.     var scoreThreshold;         // min for an image to be considered significant
  55.     var includeMotionBox;       // flag to calculate and draw motion bounding box
  56.     var includeMotionPixels;    // flag to create object denoting pixels with motion
  57.  
  58.     function init(options) {
  59.         // sanity check
  60.         if (!options) {
  61.             throw 'No options object provided';
  62.         }
  63.  
  64.         // incoming options with defaults
  65.         video = options.video || document.createElement('video');
  66.         motionCanvas = options.motionCanvas || document.createElement('canvas');
  67.         captureIntervalTime = options.captureIntervalTime || 100;
  68.         captureWidth = options.captureWidth || 640;
  69.         captureHeight = options.captureHeight || 480;
  70.         diffWidth = options.diffWidth || 640;
  71.         diffHeight = options.diffHeight || 480;
  72.         pixelDiffThreshold = options.pixelDiffThreshold || 32;
  73.         scoreThreshold = options.scoreThreshold || 16;
  74.         includeMotionBox = options.includeMotionBox || false;
  75.         includeMotionPixels = options.includeMotionPixels || false;
  76.  
  77.         // callbacks
  78.         initSuccessCallback = options.initSuccessCallback || function() {};
  79.         initErrorCallback = options.initErrorCallback || function() {};
  80.         startCompleteCallback = options.startCompleteCallback || function() {};
  81.         captureCallback = options.captureCallback || function() {};
  82.  
  83.         // non-configurable
  84.         captureCanvas = document.createElement('canvas');
  85.         diffCanvas = document.createElement('canvas');
  86.       var img=document.getElementById('img')
  87.         isReadyToDiff = false;
  88.  
  89.         // prep video
  90.         video.autoplay = true;
  91.  
  92.         // prep capture canvas
  93.         captureCanvas.width = captureWidth;
  94.         captureCanvas.height = captureHeight;
  95.         captureContext = captureCanvas.getContext('2d');
  96.  
  97.         // prep diff canvas
  98.         diffCanvas.width = diffWidth;
  99.         diffCanvas.height = diffHeight;
  100.         diffContext = diffCanvas.getContext('2d');
  101.  
  102.         // prep motion canvas
  103.         motionCanvas.width = diffWidth;
  104.         motionCanvas.height = diffHeight;
  105.         motionContext = motionCanvas.getContext('2d');
  106.  
  107.         requestWebcam();
  108.     }
  109.  
  110.     function requestWebcam() {
  111.         var constraints = {
  112.             audio: false,
  113.             video: { width: captureWidth, height: captureHeight }
  114.         };
  115.  
  116.         navigator.mediaDevices.getUserMedia(constraints)
  117.             .then(initSuccess)
  118.             .catch(initError);
  119.     }
  120.  
  121.     function initSuccess(requestedStream) {
  122.         stream = requestedStream;
  123.         initSuccessCallback();
  124.     }
  125.  
  126.     function initError(error) {
  127.         console.log(error);
  128.         initErrorCallback();
  129.     }
  130.  
  131.     function start() {
  132.         if (!stream) {
  133.             throw 'Cannot start after init fail';
  134.         }
  135.  
  136.         // streaming takes a moment to start
  137.         video.addEventListener('canplay', startComplete);
  138.         video.srcObject = stream;
  139.     }
  140.  
  141.     function startComplete() {
  142.         video.removeEventListener('canplay', startComplete);
  143.         captureInterval = setInterval(capture, captureIntervalTime);
  144.         startCompleteCallback();
  145.     }
  146.  
  147.     function stop() {
  148.         clearInterval(captureInterval);
  149.         video.src = '';
  150.         motionContext.clearRect(0, 0, diffWidth, diffHeight);
  151.         isReadyToDiff = false;
  152.     }
  153.  
  154.     function capture() {
  155.         // save a full-sized copy of capture
  156.         captureContext.drawImage(video, 0, 0, captureWidth, captureHeight);
  157.         var captureImageData = captureContext.getImageData(0, 0, captureWidth, captureHeight);
  158.  
  159.         // diff current capture over previous capture, leftover from last time
  160.         diffContext.globalCompositeOperation = 'difference';
  161.         diffContext.drawImage(video, 0, 0, diffWidth, diffHeight);
  162.         var diffImageData = diffContext.getImageData(0, 0, diffWidth, diffHeight);
  163.  
  164.         if (isReadyToDiff) {
  165.             var diff = processDiff(diffImageData);
  166.  
  167.             motionContext.putImageData(diffImageData, 0, 0);
  168.             if (diff.motionBox) {
  169.                 motionContext.strokeStyle = '#fff';
  170.                 motionContext.strokeRect(
  171.                     diff.motionBox.x.min + 0.5,
  172.                     diff.motionBox.y.min + 0.5,
  173.                     diff.motionBox.x.max - diff.motionBox.x.min,
  174.                     diff.motionBox.y.max - diff.motionBox.y.min
  175.                 );
  176.             }
  177.             captureCallback({
  178.                 imageData: captureImageData,
  179.                 score: diff.score,
  180.                 hasMotion: diff.score >= scoreThreshold,
  181.                 motionBox: diff.motionBox,
  182.                 motionPixels: diff.motionPixels,
  183.                 getURL: function() {
  184.                     return getCaptureUrl(this.imageData);
  185.                 },
  186.                 checkMotionPixel: function(x, y) {
  187.                     return checkMotionPixel(this.motionPixels, x, y)
  188.                 }
  189.             });
  190.         }
  191.  
  192.         // draw current capture normally over diff, ready for next time
  193.         diffContext.globalCompositeOperation = 'source-over';
  194.         diffContext.drawImage(video, 0, 0, diffWidth, diffHeight);
  195.         isReadyToDiff = true;
  196.     }
  197.  
  198.     function processDiff(diffImageData) {
  199.         var rgba = diffImageData.data;
  200.  
  201.         // pixel adjustments are done by reference directly on diffImageData
  202.         var score = 0;
  203.         var motionPixels = includeMotionPixels ? [] : undefined;
  204.         var motionBox = undefined;
  205.         for (var i = 0; i < rgba.length; i += 4) {
  206.             var pixelDiff = rgba[i] * 0.3 + rgba[i + 1] * 0.6 + rgba[i + 2] * 0.1;
  207.             var normalized = Math.min(255, pixelDiff * (255 / pixelDiffThreshold));
  208.             rgba[i] = normalized;
  209.             rgba[i + 1] = normalized^255;
  210.             rgba[i + 2] = 0;
  211.  
  212.             if (pixelDiff >= pixelDiffThreshold) {
  213.                 score++;
  214.                 coords = calculateCoordinates(i / 4);
  215.  
  216.                 if (includeMotionBox) {
  217.                     motionBox = calculateMotionBox(motionBox, coords.x, coords.y);
  218.                 }
  219.  
  220.                 if (includeMotionPixels) {
  221.                     motionPixels = calculateMotionPixels(motionPixels, coords.x, coords.y, pixelDiff);
  222.                 }
  223.  
  224.             }
  225.         }
  226.  
  227.         return {
  228.             score: score,
  229.             motionBox: score > scoreThreshold ? motionBox : undefined,
  230.             motionPixels: motionPixels
  231.         };
  232.     }
  233.  
  234.     function calculateCoordinates(pixelIndex) {
  235.         return {
  236.             x: pixelIndex % diffWidth,
  237.             y: Math.floor(pixelIndex / diffWidth)
  238.         };
  239.     }
  240.  
  241.     function calculateMotionBox(currentMotionBox, x, y) {
  242.         // init motion box on demand
  243.         var motionBox = currentMotionBox || {
  244.             x: { min: coords.x, max: x },
  245.             y: { min: coords.y, max: y }
  246.         };
  247.  
  248.         motionBox.x.min = Math.min(motionBox.x.min, x);
  249.         motionBox.x.max = Math.max(motionBox.x.max, x);
  250.         motionBox.y.min = Math.min(motionBox.y.min, y);
  251.         motionBox.y.max = Math.max(motionBox.y.max, y);
  252.  
  253.         return motionBox;
  254.     }
  255.  
  256.     function calculateMotionPixels(motionPixels, x, y, pixelDiff) {
  257.         motionPixels[x] = motionPixels[x] || [];
  258.         motionPixels[x][y] = true;
  259.  
  260.         return motionPixels;
  261.     }
  262.  
  263.     function getCaptureUrl(captureImageData) {
  264.         // may as well borrow captureCanvas
  265.         captureContext.putImageData(captureImageData, 0, 0);
  266.         return captureCanvas.toDataURL();
  267.     }
  268.  
  269.     function checkMotionPixel(motionPixels, x, y) {
  270.         return motionPixels && motionPixels[x] && motionPixels[x][y];
  271.     }
  272.  
  273.     function getPixelDiffThreshold() {
  274.         return pixelDiffThreshold;
  275.     }
  276.  
  277.     function setPixelDiffThreshold(val) {
  278.         pixelDiffThreshold = val;
  279.     }
  280.  
  281.     function getScoreThreshold() {
  282.         return scoreThreshold;
  283.     }
  284.  
  285.     function setScoreThreshold(val) {
  286.         scoreThreshold = val;
  287.     }
  288.  
  289.     return {
  290.         // public getters/setters
  291.         getPixelDiffThreshold: getPixelDiffThreshold,
  292.         setPixelDiffThreshold: setPixelDiffThreshold,
  293.         getScoreThreshold: getScoreThreshold,
  294.         setScoreThreshold: setScoreThreshold,
  295.  
  296.         // public functions
  297.         init: init,
  298.         start: start,
  299.         stop: stop
  300.     };
  301. })();
  302.         var video = document.getElementById('video');
  303. var canvas = document.getElementById('motion');
  304. var score = document.getElementById('score');
  305. var photo = document.getElementById('motion');
  306. function initSuccess() {
  307.     DiffCamEngine.start();
  308. }
  309.  
  310. function initError() {
  311.     alert('Something went wrong.');
  312. }
  313. var ammount=1;
  314.   var majamm=1;
  315. function capture(payload) {
  316.  var p= photo.getContext('2d')
  317.     //score.textContent = payload.score;
  318.  
  319.   if(payload.score>55){score.textContent =('Major Movement Detected '+majamm +' times!!')
  320.                        majamm++;
  321.                         //window.open(captureImageData.ToDataURL());
  322.                         return;
  323.                        // p.putImage(captureImageData, 100, 100, 200, 200);
  324.                        }
  325.   if(payload.score<35){}else{
  326.     //p.putImage(captureImageData, 100, 100, 200, 200);
  327.     console.log('Minor Movement Detected '+ammount+' times!!')
  328.     ammount++;
  329.     return;
  330.   }
  331. }
  332.  
  333. DiffCamEngine.init({
  334.     video: video,
  335.     motionCanvas: canvas,
  336.     initSuccessCallback: initSuccess,
  337.     initErrorCallback: initError,
  338.     captureCallback: capture
  339. });  
  340.          
  341.           </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top