About PuppyCam

Having puppies in the house is ridiculously fun, especially as they get bigger and start to play. The next best thing to having them in your house is at least being able to check in on them at any time. We had a puppycam available for Disa's first litter and decided to do it again for this one.

If history is any indicator, morning time—around 8am MST, say—will be a good time to see puppy activity. That’s when I (Jared) jump in with the puppies to get my fix before starting work.

Technical details

I (Jared) write software for a living, and I enjoy it enough that I also do it in my spare time. Any excuse to write some bespoke software or learn a new technology is a good thing in my opinion. As a result, this site might be considered a gratuitous use of technology. 😉

This PuppyCam site is composed of several loosely-connected pieces. In roughly the order that you experience them, they are:

• front-end web site
• live video feed
• puppy details
• “puppy weather” information
• latest news
• maybe more?

Front-end web site

The site itself is a Svelte.js/SvelteKit site, which means that everything “interesting” actually runs in your browser, and the hosting server (puppycam.turehounds.com) itself doesn’t actually do anything. The nice thing about having nothing running on the server is that it means we can host it for free on Netlify. One other nice thing about Netlify is that it auto-updates when there’s a change to the source code. As soon as I push a change to the code, Netlify grabs that change, rebuilds the site, and redeploys it, all in a matter of seconds.

If you want to see the source for this site, you can, as it’s hosted on GitHub. It used to be marked as a private repository, but there’s really nothing secret in the source so I decided I might as well open it up.

Live video feed

Current implementation...

Nest cameras are expensive, and you have to pay for the associated cloud service in order to get live-streaming. I decided to look at an inexpensive Reolink camera, paired with datarhei Restreamer running on my local Linux server. Restreamer takes care of pulling the live video stream from the camera (an RSTP stream), and publishes it to the Ture Hound YouTube channel Ture Hound Twitch channel. I previously spent a fair amount of effort getting HLS video to stream into the page without using an iframe so that I could have more control over the exact rendering and layout. Using YouTube/Twitch as the streaming source, however, puts me right back into using an iframe again. Fortunately, there are some CSS tricks that give me enough layout control for what I want.

As noted, I first switched to YouTube, but as a platform that’s more focused on individual videos, it insists on changing the video ID every time it thinks the stream ends… which includes any time the feed gets interrupted. When the ID changes, I have to change the reference that this site uses, and that’s a pain! Twitch, however, was designed for gamers/creators who have a persistent “channel”, and the channel name itself does not change no matter how many times to stop/restart streaming.

First implementation...

Even before this iteration of PuppyCam, we had a few Nest cameras, for security. We use them so that we can easily keep an eye on things, including being able to peek in at the pups at night-time—the cameras use infrared in low-light situations so we don’t need to turn on a light just to check on them. One can also, as a camera owner, choose to make the feed from the camera “public”, which allows you to share a public link to the feed on the nest.com site, or you can embed the video on your own site:

For PuppyCam, I use a little bit of HTML/CSS magic to make one of the videos look like it’s “inset” into the other. (Coming soon... I just need to mount the camera on the whelping box first!)

Puppy details

In this site’s first incarnation, the details about the puppies had been typed in by hand. Now, it’s driven by a data file that still has to be typed in, but it’s entered in a very concise and minimal way. It would be awesome if the puppy weights could truly auto-update, but that would mean some kind of weight-measuring pad, being able to track which puppy is on the pad at any given moment, and so on… I mean, that would be undeniably cool, but it’s beyond my reach at the moment.

That said, the table is now not only data-driven, but it also checks every 30 minutes or so to see if there’s any updated data. If it has, the table will auto-update to reflect the latest weights, without requiring you to refresh the page. While I’m not likely to update the weights every 30 minutes, this ensures that the page will always be current.

Having all of the raw data also means that it is now available to drive the statistics page!

“Puppy weather” information

Okay... now this part of the site is a completely gratuitous use of technology. It’s a complete sub-system in and of itself. It comprises:

• temperature/humidity data collection
• bespoke data proxy
• auto-updating in-browser logic

Temperature/humidity data collection

For various and sundry reasons, I happen to have several SensorPush temperature and humidity sensors. They allow me to monitor such critical things as “does my cigar humidor need more water?” and “what temperature is the kitchen right now?”. These devices record the temperature and humidity once every minute, and send that information (via a low-energy-Bluetooth–to–WiFi hub) up to SenorPush’s data servers in the cloud.

SensorPush also exposes a programmatic API so that you can get the raw data they have saved from the individual sensors. Their API is rather complex, however, and also requires performing proper authentication using your (my!) personal SensorPush password. Since (a) I don’t want to expose my password even within the source of the web page, (b) the PuppyCam site only needs the most-recent temperature/humidity reading, and (c) when the PuppyCam goes viral it could start requesting the information millions of times 😉, the “most sane” thing to do is to run a tiny one-off web server whose job is to periodically poke the SensorPush API to get the latest reading, and to also serve that information publicly.

All of which means it’s a…

Bespoke data proxy

I’ve written a small program/web-server in Go that performs all of the necessary work for getting the temperature and humidity from the SensorPush API, and then turns around and exposes it as a simple data feed at https://sensors.turehounds.com/sensors. If you visit that link, you’ll see some additional potential data metrics without values: altitude, barometric pressure, and so on. SensorPush has some newer sensors that report those values, but ours only includes the temperature and humidity.

This small program runs on spare hardware that’s been cobbled together over the years and turned into a little Linux box running my own personal private “cloud”. It could just as easily run “in the (real) cloud”—and in would/will, if the PuppyCam actually goes viral!—but it doesn’t cost anything (more) to run it on a machine that I already have and that is already exposed to the internet as half-a-dozen other virtual servers.

Auto-updating in-browser logic

So given that there’s now easy and open access to the temperature/humidity data, it’s just a matter of getting that information to show up in your browser. The Svelte component I’ve written for this site simply tells the browser to retrieve the data from the bespoke data proxy every 30 seconds, and then updates the information on the page. Updating the page is something that Svelte was designed to do, so this is a lot easier than it might sound.

All of that, just to get this:

Wooo! 🎉 And yes, that’s a live and accurate reading, assuming that everything is working as it should.

Latest news

Realizing that some significant milestones were coming up soon, I thought it would be good to have a way to highlight these on the main page. And, just in case you miss one, you should be able to see all of the previous news items as well.

The “latest news” component leverages the same “auto-refresh” capabilities as the other components, checking every 30 minutes for any updated news.

I’ll admit it… I’m just having fun at this point.

Maybe more?

…And that’s it, for now. I’ve considered including the outside weather (as a nice contrast with the puppy weather), but that doesn’t seem really necessary—not that this entire site is really necessary. 😉