SHARE
TWEET

JS Best Night Vision Ever UPDATED FINAL By BrU

a guest Jan 24th, 2020 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4.  
  5.     <body>
  6.         <div>
  7.             <figure>
  8.                 <video id="stream" autoplay hidden></video>
  9.        
  10.                 <canvas id="motion"></canvas>
  11.            
  12.            
  13.         </div>
  14.  
  15.  
  16.         <script>
  17.        
  18.  
  19.  
  20. (function() {
  21.     var captureIntervalDelay = 10;
  22.     var captureWidth = 500;
  23.     var captureHeight = 500;
  24.     var diffWidth = 500;
  25.     var diffHeight = 500;
  26.     var diffThreshold = 31;
  27.     var diffSpan = 1000;
  28.  
  29.     var streamVideo, captureCanvas, captureContext, diffCanvas, diffContext, motionCanvas, motionContext;
  30.     var captureInterval;
  31.     var captures = [];
  32.  
  33.     function init() {
  34.         streamVideo = document.getElementById('stream');
  35.  
  36.         captureCanvas = document.createElement('canvas');
  37.         captureCanvas.width = captureWidth;
  38.         captureCanvas.height = captureHeight;
  39.         captureContext = captureCanvas.getContext('2d');
  40.  
  41.         diffCanvas = document.createElement('canvas');
  42.         diffCanvas.width = diffWidth;
  43.         diffCanvas.height = diffHeight;
  44.         diffContext = diffCanvas.getContext('2d');
  45.         diffContext.globalCompositeOperation = 'difference';
  46.  
  47.         motionCanvas = document.getElementById('motion');
  48.         motionCanvas.width = diffWidth;
  49.         motionCanvas.height = diffHeight;
  50.         motionContext = motionCanvas.getContext('2d');
  51.  
  52.         requestCam();
  53.     }
  54.  
  55.     function requestCam() {
  56.         var constraints = {
  57.             audio: false,
  58.             video: { width: captureWidth, height: captureHeight }
  59.         };
  60.  
  61.         navigator.mediaDevices.getUserMedia(constraints)
  62.             .then(startStreamingVideo)
  63.             .catch(displayError);
  64.     }
  65.  
  66.     function startStreamingVideo(stream) {
  67.         streamVideo.srcObject = stream;
  68.         startCapturing();
  69.     }
  70.  
  71.     function displayError(error) {
  72.         console.log(error);
  73.     }
  74.  
  75.     function startCapturing() {
  76.         captureInterval = self.setInterval(getCapture, captureIntervalDelay);
  77.     }
  78.  
  79.     function getCapture() {
  80.         captureContext.drawImage(streamVideo, 0, 0, captureWidth, captureHeight);
  81.  
  82.         var newImage = new Image();
  83.         newImage.onload = saveCapture;
  84.         newImage.src = captureCanvas.toDataURL('image/png');
  85.     }
  86.  
  87.     function saveCapture() {
  88.         captures.unshift(this);
  89.         captures = captures.slice(0, diffSpan);
  90.  
  91.         var oldImage = captures[captures.length - 1];
  92.         var diff = checkDiff(oldImage, this);
  93.         motionContext.putImageData(diff.imgData, 0, 0);
  94.     }
  95.  
  96.     function checkDiff(oldImage, newImage) {
  97.         diffContext.clearRect(0, 0, diffWidth, diffHeight);
  98.         diffContext.drawImage(oldImage, 0, 0, diffWidth, diffHeight);
  99.         diffContext.drawImage(newImage, 0, 0, diffWidth, diffHeight);
  100.  
  101.         var imgData = diffContext.getImageData(0, 0, diffWidth, diffHeight);
  102.         var rgba = imgData.data;
  103.         var thresholdCount = 0;
  104.         var diffAverage = 0;
  105.         for (var i = 0; i < rgba.length; i += 2) {
  106.             var diff = rgba[i] * 0.0 + rgba[i + 1] * 0.5 + rgba[i + 2] * 0.0;
  107.             var lit = Math.min(256, diff * (256 / diffThreshold));
  108.             rgba[i] = 0;
  109.             rgba[i + 1] += diff+lit;
  110.             rgba[i + 200] = diff;
  111.  
  112.             if (diff >= diffThreshold) {
  113.                 thresholdCount++;
  114.             }
  115.             diffAverage += diff;
  116.         }
  117.         diffAverage /= rgba.length / 4;
  118.  
  119.         return {
  120.             imgData: imgData,
  121.             thresholdCount: thresholdCount,
  122.             diffAverage: diffAverage
  123.         };
  124.     }
  125.  
  126.     init();
  127. })();
  128.  </script>
  129.     </body>
  130. </html>
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