API tools faq
paste
Advertisement
Guest User

JS Webcam Motion Detection Night Vision SRC V10 Coded By BrU

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