GuardMyPad is a web application that allows you to turn the devices you already own into a home security solution. This means you can use any of the following to remotely monitor your space:
- Your old Android Phone
- Your spare laptop
- Your old desktop computer
- Your Chromebook
- Soon: Your iOS devices
This is really exciting because it significantly reduces the cost of security setup. You can now secure and monitor your space as easily as you can watch Netflix — no installations, no phonecalls, no shipping hardware. GuardMyPad facilitates this by extending your cameras’ capabilities with motion detection, audio detection, video recording, image capturing, live streaming and more.
This is all made possible by WebRTC and other closely related technologies that are significantly reducing the cost and complexity of real-time communications implementation. The following is a brief technical overview of how GuardMyPad uses WebRTC.
How GuardMyPad Uses WebRTC
The mission: build a cross-platform home security solution that offers an unencumbered, full-featured, free core product to its users. At a minimum, the solution should provide:
- Motion Detection
- Video Recording / Image Capture
- Cross-platform Streaming
- Flexible Media Storage
Given how easy it is to build desktop apps with web technology, I decided to target “all the things” by building a Chromium-first app using HTML and JS.
Motion Detection
Motion detection on the browser is tough. Clientside image processing is needed to ensure speedy detection, alerts, and media capture, all with JavaScript, all without choking the browser. Somehow.
It’s currently handled as follows: Once a locally connected camera’s stream is captured using getUserMedia, a “motion detector” module is plugged into the stream. This motion detector then siphons images off the stream at whatever rate it can comfortably handle — somewhere between 2–4 images per second.
The images that it analyzes are significantly reduced in size on their way off the stream. The motion detector then starts analyzing the pixels of these micro-images — starting at the edges — to calculate the color difference between the pixels along the way, progressively constructing the coordinates of a motion detection box and skipping pixels as it can to finish as quickly as possible. These coordinates are then scaled back up to the displayed resolution, resulting in the cool effect you see when GuardMyPad detects motion:
You can see this “under the hood” UI in action if you click the GuardMyPad logo in-app while a camera is locally attached and motion detection is enabled.
Video Recording
The first version of GuardMyPad simply waited for motion to be detected and then kicked off a MediaRecorder to record the camera’s MediaStream for as long as was necessary. This is a bit of a naive implementation though because it was often missing the interesting frames. A burglar might break down your door and by the time the MediaRecorder started recording, the door was already off its hinges.
To solve this, buffered recording was needed: captured videos should be buffered by around five seconds of video on each end to ensure that the events leading up to and following whatever it was that crossed the motion (or audio) detection threshold are captured.
Queuing was used to solve this. Given a segment without motion, queue it as a potential “head”. If motion is detected in the next segment, keep both and continue to save segments until the first non-motion segment is queued as the “tail” of the video.
Easier said than done because once you start a MediaRecorder, its first segment is the only one that can be the head of the video. This means two tandem MediaRecorders were needed to guarantee that we would always have a 5-second lead on any motion that was detected.
Streaming
This is where WebRTC really shines. While motion detection alerts and video capture are handy, being able to see live footage of your camera(s) is an essential feature in any home security app.
At the time of this writing, streaming will only work across non-iOS devices. This is soon to change though.
The first version of GuardMyPad modeled “browsers as devices” building connections with other remote browsers. This meant that you would have one computer or mobile device as a “guard” with a camera attached, and another as a “remote” that would view the guard. This was simple in implementation but made for a complex and limited user experience, especially when thinking about multiple cameras and desktop use.
The current version of GuardMyPad models “cameras as devices” building connections of their own. This means you can now add 2 cameras to a desktop computer upstairs, 2 cameras to your laptop downstairs, and experience the same UX across devices.
This change was completed in a matter of hours thanks to the simplicity of WebRTC’s RTCPeerConnection spec.
Flexible Media Storage
“I don’t want some random company to see or control my private media.”
GuardMyPad defaults to GMP Cloud Storage, but you can use personal cloud storage (like Dropbox or Google Drive) or device storage if you want. With these options, your storage capabilities depend only on how much storage you want to purchase outside of GuardMyPad — a low fixed cost for device storage, or a low recurring cost for cloud storage providers. Low cost is key here. This is how GuardMyPad can offer a free core product — if users opt out of GMP Cloud Storage, platform costs are reduced to metadata and signalling.
Personal cloud storage providers are uninteresting in this context — you upload your data and it’s accessible from any device with a connection.
Device storage is where WebRTC comes to the rescue, yet again. By using WebRTC’s Data Channels, GuardMyPad is able to store your data on your device and then transfer it directly to your other devices, automatically, without any third party ever getting its hands on it. Isn’t that cool? This means if a bad guy destroys your laptop, incriminating media will have already been transferred to your other devices.
This particular functionality is currently “experimental”.
In Closing
WebRTC is changing the way real-time web applications are built. If you haven’t played with it yet, Google has some great codelabs available.
If you’re interested in using GuardMyPad, it’s now in private beta. This means:
- It requires an access code — you can use “webrtc”.
- There’s a lot of work left to do — especially around performance and stability.
- You may experience some buggy behavior as the product evolves.
I hope you like it! Thanks for reading,
Mick
