Building Motion Detecting Web Apps with JavaScript

Building Motion Detecting Web Apps with JavaScript

What do my pets do when no one is around? I decided to find out. This talk covers how (and then some).

A webcam and some JavaScript using WebRTC is enough to take snapshots, but the trick is finding the snapshots worth saving. I'll share how to write an image diffing algorithm that creates a visual motion heatmap, which can be used to programmatically recognize when a snapshot has caught something happening. The interesting snapshots are then uploaded to Twitter for remote viewing.

This talk is also available in article form here: http://codersblock.com/blog/motion-detection-with-javascript/.

Demos (and links to source code repos) are here: http://diffcam.com/.

D50888599a25e1653030109cfd0743f1?s=128

Will Boyd

May 13, 2016
Tweet

Transcript

  1. BUILDING MOTION DETECTING WEB APPS WITH JAVASCRIPT WILL BOYD

  2. Desmond Maya

  3. CAT ACTIVITY 10% 90% Sleeping Hilarious Antics?

  4. Animals Webcam Motion Detection Image Capture The CloudTM?

  5. None
  6. None
  7. adapter.js /webrtc/adapter

  8. None
  9. https http (except localhost)

  10. DEMO TIME SIMPLE WEBCAM

  11. HTML JAVASCRIPT

  12. None
  13. <canvas>

  14. DEMO TIME IMAGE DIFFING

  15. HTML JAVASCRIPT

  16. JAVASCRIPT

  17. JAVASCRIPT [193, 76, 70, 255, 0, 0, 0, 255, …]

  18. JAVASCRIPT [193, 76, 70, 255, 0, 0, 0, 255, …]

  19. JAVASCRIPT [193, 76, 70, 255, 0, 0, 0, 255, …]

    PIXEL
  20. R: 252 G: 90 B: 146 R: 59 G: 166

    B: 216 R: 193
 G: 76 B: 70 (abs)
  21. R: 0 G: 0 B: 0 R: 255 G: 255

    B: 255 NO DIFFERENCE MOST DIFFERENCE
  22. JAVASCRIPT

  23. None
  24. None
  25. DEMO TIME MOTION HEATMAP

  26. VIDEO STREAM

  27. VIDEO STREAM

  28. VIDEO STREAM 0 ms 100 ms 200 ms 300 ms

    400 ms
  29. JAVASCRIPT

  30. JAVASCRIPT

  31. Animals Webcam Motion Detection Image Capture The CloudTM?

  32. ‣ Remote viewing ‣ Accept image uploads ‣ Host images

    ‣ Display feed ‣ Privacy options ‣ Authentication ‣ Sharing ‣ Notifications
  33. ‣ Remote viewing ‣ Accept image uploads ‣ Host images

    ‣ Display feed ‣ Privacy options ‣ Authentication ‣ Sharing ‣ Notifications
  34. Page Back-End Twitter ajax API

  35. WATCHING CONSIDERING UPLOADING CHILLING something
 moves after 4
 seconds immediately

    after 12 seconds
  36. DEMO TIME DIFF CAM FEED

  37. None
  38. None
  39. None
  40. ‣Raspbian ‣uv4l ‣IceWeasel ‣USB webcam

  41. None
  42. None
  43. /lonekorean/diff-cam-engine DIFF CAM ENGINE

  44. DIFFCAM.COM

  45. /lonekorean WILL BOYD /lonekorean THANKS!