API tools faq
paste
Advertisement
Guest User

JS Webcam Motion Detection Night Vision SRC V11 Coded By BrU

a guest
Jan 22nd, 2020
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.81 KB | None | 0 0
raw download clone embed print report
  1. <meta name="robots" content="noindex">
  2. <body>
  3. <font color="white">
  4. <center>
  5. <figure>
  6. <video id="video" hidden></video>
  7. </figure>
  8.  
  9. <figure>
  10. <canvas id="motion"></canvas>
  11. <figcaption>
  12.  
  13. <br>
  14. <span id="score"></span><p>
  15. <button id="reset" onclick="script:ammount=0;majamm=0;large=0;vlarge=0;extreme=0;">Reset All</button>
  16. <button id="stats" onclick="script:if(majamm!=0){majamm--;}
  17. alert('Minor Movement: '+ammount);alert('Major Movement: '+majamm);alert('Large Movement: '+large);alert('Very Large Movement: '+vlarge);alert('Extreme Movement: '+extreme);">View Movement Statistics</button>
  18.  
  19. </figcaption>
  20. </figure><p>
  21.  
  22.  
  23. <script>
  24. var DiffCamEngine = (function() {
  25. var stream; // stream obtained from webcam
  26. var video; // shows stream
  27. var captureCanvas; // internal canvas for capturing full images from video
  28. var captureContext; // context for capture canvas
  29. var diffCanvas; // internal canvas for diffing downscaled captures
  30. var diffContext; // context for diff canvas
  31. var motionCanvas; // receives processed diff images
  32. var motionContext; // context for motion canvas
  33.  
  34. var initSuccessCallback; // called when init succeeds
  35. var initErrorCallback; // called when init fails
  36. var startCompleteCallback; // called when start is complete
  37. var captureCallback; // called when an image has been captured and diffed
  38.  
  39. var captureInterval; // interval for continuous captures
  40. var captureIntervalTime; // time between captures, in ms
  41. var captureWidth; // full captured image width
  42. var captureHeight; // full captured image height
  43. var diffWidth; // downscaled width for diff/motion
  44. var diffHeight; // downscaled height for diff/motion
  45. var isReadyToDiff; // has a previous capture been made to diff against?
  46. var pixelDiffThreshold; // min for a pixel to be considered significant
  47. var scoreThreshold; // min for an image to be considered significant
  48. var includeMotionBox; // flag to calculate and draw motion bounding box
  49. var includeMotionPixels; // flag to create object denoting pixels with motion
  50.  
  51. function init(options) {
  52.  
  53. // sanity check
  54. if (!options) {
  55. throw 'No options object provided';
  56. }
  57.  
  58. // incoming options with defaults
  59. video = options.video || document.createElement('video');
  60. motionCanvas = options.motionCanvas || document.createElement('canvas');
  61. captureIntervalTime = options.captureIntervalTime || 100;
  62. captureWidth = options.captureWidth || 850;
  63. captureHeight = options.captureHeight || 450;
  64. diffWidth = options.diffWidth || 850;
  65. diffHeight = options.diffHeight || 450;
  66. pixelDiffThreshold = options.pixelDiffThreshold || 32;
  67. scoreThreshold = options.scoreThreshold || 16;
  68. includeMotionBox = options.includeMotionBox || false;
  69. includeMotionPixels = options.includeMotionPixels || false;
  70.  
  71. // callbacks
  72. initSuccessCallback = options.initSuccessCallback || function() {};
  73. initErrorCallback = options.initErrorCallback || function() {};
  74. startCompleteCallback = options.startCompleteCallback || function() {};
  75. captureCallback = options.captureCallback || function() {};
  76.  
  77. // non-configurable
  78. captureCanvas = document.createElement('canvas');
  79. diffCanvas = document.createElement('canvas');
  80. var img=document.getElementById('img')
  81. isReadyToDiff = false;
  82.  
  83. // prep video
  84. video.autoplay = true;
  85.  
  86. // prep capture canvas
  87. captureCanvas.width = captureWidth;
  88. captureCanvas.height = captureHeight;
  89. captureContext = captureCanvas.getContext('2d');
  90.  
  91. // prep diff canvas
  92. diffCanvas.width = diffWidth;
  93. diffCanvas.height = diffHeight;
  94. diffContext = diffCanvas.getContext('2d');
  95.  
  96. // prep motion canvas
  97. motionCanvas.width = diffWidth;
  98. motionCanvas.height = diffHeight;
  99. motionContext = motionCanvas.getContext('2d');
  100.  
  101. requestWebcam();
  102. }
  103.  
  104. function requestWebcam() {
  105. var constraints = {
  106. audio: false,
  107. video: { width: captureWidth, height: captureHeight }
  108. };
  109.  
  110. navigator.mediaDevices.getUserMedia(constraints)
  111. .then(initSuccess)
  112. .catch(initError);
  113. }
  114.  
  115. function initSuccess(requestedStream) {
  116. stream = requestedStream;
  117. initSuccessCallback();
  118. }
  119.  
  120. function initError(error) {
  121. console.log(error);
  122. initErrorCallback();
  123. }
  124.  
  125. function start() {
  126. if (!stream) {
  127. throw 'Cannot start after init fail';
  128. }
  129.  
  130. // streaming takes a moment to start
  131. video.addEventListener('canplay', startComplete);
  132. video.srcObject = stream;
  133. }
  134.  
  135. function startComplete() {
  136. video.removeEventListener('canplay', startComplete);
  137. captureInterval = setInterval(capture, captureIntervalTime);
  138. startCompleteCallback();
  139. }
  140.  
  141. function stop() {
  142. clearInterval(captureInterval);
  143. video.src = '';
  144. motionContext.clearRect(0, 0, diffWidth, diffHeight);
  145. isReadyToDiff = false;
  146. }
  147.  
  148. function capture() {
  149. // save a full-sized copy of capture
  150. captureContext.drawImage(video, 0, 0, captureWidth, captureHeight);
  151. var captureImageData = captureContext.getImageData(0, 0, captureWidth, captureHeight);
  152.  
  153. // diff current capture over previous capture, leftover from last time
  154. diffContext.globalCompositeOperation = 'difference';
  155. diffContext.drawImage(video, 0, 0, diffWidth, diffHeight);
  156. var diffImageData = diffContext.getImageData(0, 0, diffWidth, diffHeight);
  157.  
  158. if (isReadyToDiff) {
  159. var diff = processDiff(diffImageData);
  160.  
  161. motionContext.putImageData(diffImageData, 0, 0);
  162. if (diff.motionBox) {
  163. motionContext.strokeStyle = '#fff';
  164. motionContext.strokeRect(
  165. diff.motionBox.x.min + 0.5,
  166. diff.motionBox.y.min + 0.5,
  167. diff.motionBox.x.max - diff.motionBox.x.min,
  168. diff.motionBox.y.max - diff.motionBox.y.min
  169. );
  170. }
  171. captureCallback({
  172. imageData: captureImageData,
  173. score: diff.score,
  174. hasMotion: diff.score >= scoreThreshold,
  175. motionBox: diff.motionBox,
  176. motionPixels: diff.motionPixels,
  177. getURL: function() {
  178. return getCaptureUrl(this.imageData);
  179. },
  180. checkMotionPixel: function(x, y) {
  181. return checkMotionPixel(this.motionPixels, x, y)
  182. }
  183. });
  184. }
  185.  
  186. // draw current capture normally over diff, ready for next time
  187. diffContext.globalCompositeOperation = 'source-over';
  188. diffContext.drawImage(video, 0, 0, diffWidth, diffHeight);
  189. isReadyToDiff = true;
  190. }
  191.  
  192. function processDiff(diffImageData) {
  193. var rgba = diffImageData.data;
  194.  
  195. // pixel adjustments are done by reference directly on diffImageData
  196. var score = 0;
  197. var motionPixels = includeMotionPixels ? [] : undefined;
  198. var motionBox = undefined;
  199. for (var i = 0; i < rgba.length; i += 4) {
  200. var pixelDiff = rgba[i] * 0.3 + rgba[i + 1] * 0.6 + rgba[i + 2] * 0.1;
  201. var normalized = Math.min(255, pixelDiff * (255 / pixelDiffThreshold));
  202. rgba[i] = normalized;
  203. rgba[i + 1] = normalized^255;
  204. rgba[i + 2] = 0;
  205.  
  206. if (pixelDiff >= pixelDiffThreshold) {
  207. score++;
  208. coords = calculateCoordinates(i / 4);
  209.  
  210. if (includeMotionBox) {
  211. motionBox = calculateMotionBox(motionBox, coords.x, coords.y);
  212. }
  213.  
  214. if (includeMotionPixels) {
  215. motionPixels = calculateMotionPixels(motionPixels, coords.x, coords.y, pixelDiff);
  216. }
  217.  
  218. }
  219. }
  220.  
  221. return {
  222. score: score,
  223. motionBox: score > scoreThreshold ? motionBox : undefined,
  224. motionPixels: motionPixels
  225. };
  226. }
  227.  
  228. function calculateCoordinates(pixelIndex) {
  229. return {
  230. x: pixelIndex % diffWidth,
  231. y: Math.floor(pixelIndex / diffWidth)
  232. };
  233. }
  234.  
  235. function calculateMotionBox(currentMotionBox, x, y) {
  236. // init motion box on demand
  237. var motionBox = currentMotionBox || {
  238. x: { min: coords.x, max: x },
  239. y: { min: coords.y, max: y }
  240. };
  241.  
  242. motionBox.x.min = Math.min(motionBox.x.min, x);
  243. motionBox.x.max = Math.max(motionBox.x.max, x);
  244. motionBox.y.min = Math.min(motionBox.y.min, y);
  245. motionBox.y.max = Math.max(motionBox.y.max, y);
  246.  
  247. return motionBox;
  248. }
  249.  
  250. function calculateMotionPixels(motionPixels, x, y, pixelDiff) {
  251. motionPixels[x] = motionPixels[x] || [];
  252. motionPixels[x][y] = true;
  253.  
  254. return motionPixels;
  255. }
  256.  
  257. function getCaptureUrl(captureImageData) {
  258. // may as well borrow captureCanvas
  259. captureContext.putImageData(captureImageData, 0, 0);
  260. return captureCanvas.toDataURL();
  261. }
  262.  
  263. function checkMotionPixel(motionPixels, x, y) {
  264. return motionPixels && motionPixels[x] && motionPixels[x][y];
  265. }
  266.  
  267. function getPixelDiffThreshold() {
  268. return pixelDiffThreshold;
  269. }
  270.  
  271. function setPixelDiffThreshold(val) {
  272. pixelDiffThreshold = val;
  273. }
  274.  
  275. function getScoreThreshold() {
  276. return scoreThreshold;
  277. }
  278.  
  279. function setScoreThreshold(val) {
  280. scoreThreshold = val;
  281. }
  282.  
  283. return {
  284. // public getters/setters
  285. getPixelDiffThreshold: getPixelDiffThreshold,
  286. setPixelDiffThreshold: setPixelDiffThreshold,
  287. getScoreThreshold: getScoreThreshold,
  288. setScoreThreshold: setScoreThreshold,
  289.  
  290. // public functions
  291. init: init,
  292. start: start,
  293. stop: stop
  294. };
  295. })();
  296. var video = document.getElementById('video');
  297. var canvas = document.getElementById('motion');
  298. var score = document.getElementById('score');
  299. var photo = document.getElementById('motion');
  300.  
  301. function initSuccess() {
  302. DiffCamEngine.start();
  303. }
  304.  
  305. function initError() {
  306. alert('Something went wrong.');
  307. }
  308. var ammount=0;
  309. var majamm=0;
  310. var large=0;
  311. var vlarge=0;
  312. var extreme=0;
  313. function capture(payload) {
  314. var p= photo.getContext('2d')
  315. //score.textContent = payload.score;
  316. oscillator.stop(0);
  317.  
  318. if(payload.score>210000){
  319. var Message = new SpeechSynthesisUtterance("An Extremely Large Amount Of Movement Has Been Detected!!");
  320. var Voices = window.speechSynthesis.getVoices();
  321. Message.Voice = Voices[1];
  322. window.speechSynthesis.speak(Message);
  323. extreme++;
  324. //alert(payload.score);
  325. //alert('Super SUPER Large Amount Of Movement Detected!!');
  326. //majamm++;
  327.  
  328. //photo.setAttribute('src',canvas.toDataUrl('image/png'));
  329.  
  330. //window.open(captureImageData.ToDataURL());
  331. return;
  332. // p.putImage(captureImageData, 100, 100, 200, 200);
  333. }
  334. if(payload.score>130000){
  335. var Message = new SpeechSynthesisUtterance("A Very Large Amount Of Movement Has Been Detected!!");
  336. var Voices = window.speechSynthesis.getVoices();
  337. Message.Voice = Voices[1];
  338. window.speechSynthesis.speak(Message);
  339. vlarge++;
  340. //alert(payload.score);
  341. //alert('Super SUPER Large Amount Of Movement Detected!!');
  342. //majamm++;
  343.  
  344. //photo.setAttribute('src',canvas.toDataUrl('image/png'));
  345.  
  346. //window.open(captureImageData.ToDataURL());
  347. return;
  348. // p.putImage(captureImageData, 100, 100, 200, 200);
  349. }
  350. if(payload.score>100000){
  351. var Message = new SpeechSynthesisUtterance("A Large Amount Of Movement Has Been Detected!!");
  352. var Voices = window.speechSynthesis.getVoices();
  353. Message.Voice = Voices[1];
  354. window.speechSynthesis.speak(Message);
  355. large++
  356. //alert(payload.score);
  357. //alert('Super Large Amount Of Movement Detected!!');
  358. //majamm++;
  359.  
  360. //photo.setAttribute('src',canvas.toDataUrl('image/png'));
  361.  
  362. //window.open(captureImageData.ToDataURL());
  363. return;
  364. // p.putImage(captureImageData, 100, 100, 200, 200);
  365. }
  366. if(payload.score>115){score.textContent =('A Normal Amount Of Movement Has Been Detected '+majamm +' times!!')
  367. majamm++;
  368.  
  369. //photo.setAttribute('src',canvas.toDataUrl('image/png'));
  370.  
  371. //window.open(captureImageData.ToDataURL());
  372. // return;
  373. // p.putImage(captureImageData, 100, 100, 200, 200);
  374. }
  375. if(payload.score<35){}else{
  376. //p.putImage(captureImageData, 100, 100, 200, 200);
  377. console.log('Minor Movement Detected '+ammount+' times!!')
  378. ammount++;
  379. return;
  380. }
  381. }
  382.  
  383. DiffCamEngine.init({
  384. video: video,
  385. motionCanvas: canvas,
  386. initSuccessCallback: initSuccess,
  387. initErrorCallback: initError,
  388. captureCallback: capture
  389. });
  390. var context = new AudioContext();
  391. oscillator=context.createOscillator();
  392. </script>
  393.  
  394. <center>
  395. <body bgcolor="black">
  396. <font color="white">
  397. <canvas id="canvas" width="850" height="450"></canvas>
  398. <script>
  399. var canvas = document.getElementById("motion");
  400. var ctx = canvas.getContext("2d");
  401. var width=120
  402. ctx.fillStyle = "white";
  403. ctx.fillRect(0,0,120,1000);
  404. ctx.fillStyle = "blue";
  405. ctx.fillRect(0,400,120,100);
  406. ctx.fillStyle = "yellow";
  407. ctx.fillRect(width,0,120,1000);
  408. ctx.fillStyle = "magenta";
  409. ctx.fillRect(width,400,120,100);
  410. ctx.fillStyle = "cyan";
  411. ctx.fillRect(width*2,0,120,1000);
  412. ctx.fillStyle = "yellow";
  413. ctx.fillRect(width*2,400,120,100);
  414. ctx.fillStyle = "#0FFF00";
  415. ctx.fillRect(width*3,0,120,1000);
  416. ctx.fillStyle = "red";
  417. ctx.fillRect(width*3,400,120,100);
  418. ctx.fillStyle = "magenta";
  419. ctx.fillRect(width*4,0,120,1000);
  420. ctx.fillStyle = "cyan";
  421. ctx.fillRect(width*4,400,120,100);
  422. ctx.fillStyle = "red";
  423. ctx.fillRect(width*5,0,120,1000);
  424. ctx.fillStyle = "#0FFF00";
  425. ctx.fillRect(width*5,400,120,100);
  426. ctx.fillStyle = "blue";
  427. ctx.fillRect(width*6,0,120,1000);
  428. ctx.fillStyle = "white";
  429. ctx.fillRect(width*6,400,120,100);
  430.  
  431. oscillator.type = 'sine';
  432. oscillator.frequency.value = 1000;
  433. oscillator.connect(context.destination);
  434. oscillator.start(0);
  435. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!