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/.

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?
7. adapter.js /webrtc/adapter
9. https http (except localhost)
10. DEMO TIME SIMPLE WEBCAM
11. HTML JAVASCRIPT
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
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
40. ‣Raspbian ‣uv4l ‣IceWeasel ‣USB webcam
43. /lonekorean/diff-cam-engine DIFF CAM ENGINE
44. DIFFCAM.COM
45. /lonekorean WILL BOYD /lonekorean THANKS!