Guest User

JS Webcam Motion Detection Night Vision SRC Coded By BrU

a guest
Jan 14th, 2020
170
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