API tools faq
paste
Advertisement
Guest User

JS Webcam Motion Detection Night Vision SRC V8 Coded By BrU

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