Show HN: Critter.Camera – Browser based motion detection and image capture | Hacker News Reader

Show HN: Critter.Camera – Browser based motion detection and image capture

critter.camera

175 pointsjambo13526 comments

This takes me back to the time when I wanted to determine which of my two cats is the one who makes the first move in their daily game of shess (it's like chess, but both the colours are black/brown and you don't move pieces - you just place them) in the bathroom.

I hooked a webcam to an old netbook and downloaded an app which would take a picture whenever it detected motion.

What I didn't take into account was the mirror in the hallway which during sunset would reflect sunlight at just the right angle to hit the toilet bowl.

In the end my results were a time-lapse of the sun shining on porcelain, because the mirror was far away enough to make the sun's movement trigger the motion detection sensing done by the app.

haha I have experienced lots of these problems while testing and tried my best to build in logic to detect 'real' motion. However since I wanted it sensitive enough to detect things like a slow moving woodlouse there will always be false detections unfortunately. One of my tests I couldn't work out why tin foil was flagging as motion, turned out it was the moon outside the window hitting it at different angles during the night!

That's why you want IR motion detection ^^.

Picture based detection can be a time sink by itself.

Have you found out which cat was it in the end?

Nope, but I discovered that the older one liked to drink water from the bathtub, so there's that.

He's in kitty heaven now, but the younger one proved to still be an avid shess player when my SO had to take him along with her while she was working seasonally as a hotel receptionist. He found a worthy opponent there, so it might have been him from the start.

This is cool! Would be ever cooler if it could record a video clip rather than just images. You wouldn't have enough space in localStorage/IndexedDB, but you can use File System Access[0] (currently available in Chrome and Edge, strong chance of making it into Firefox and Safari in the next couple of years) which allows the user to select a folder which the clips can be saved into.

[0] https://web.dev/file-system-access/

Or perhaps CockroachDB. I’ll let myself out.

Should be possible to change camera. This JavaScript barcode use the other camera on iOS: https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/s...

Cool I will look into this. Thank you

Cool idea. I developed an iOS app with the same idea (https://www.ai-cam.app) but I think being able to run on browser can target more users.

I also tackled the problem of moving-window brightness calibration in a related (but more constrained) problem --- tracking water fleas moving in a tank of water where an overhead light might periodically turn on and wash out the picture.

I essentially subtracted the current frame from the max across a moving window.

I'd be interested to chat about it if you like, my email is in my profile. The code is at https://github.com/nuchi/multi_object_tracking

I love this! We once had this exact use case when there was a weasel ravaging in the kitchen - I downloaded some software and wired it up, but it was quite involved and the weasel sadly never showed up. I'll definitely use this the next time an animal finds its way here. Thanks for building it!

Works great on Safari on iOS! But it seems to replace the actual image of the moving object with a red mask/silhouette. Is there an option to retain the original frames, even if the moving object is blurred?

Yeah the original image is retained, when you open the image full size there is a button in the modal that lets you toggle the motion highlights on and off. The downloaded image will also just be the original as captured by the camera

This confused me also. Perhaps default to the image.

I also would love a sensitivity setting and a number of images per second to capture setting. I would be interested in using this overnight but curious how quickly I would fill up memory.

There is a hard limit of 100 saved images per capture session so no risk of blowing up your phone . Yeah I would like to add a settings page for people who know what they are looking for. That is a good idea thanks!

Thanks!

> During the day curtains and blinds should be closed to maintain the same level of lighting

Can't you recalibrate after every N frames, utilizing the fact that daytime lighting changes are only gradual?

On a clear day this would definitely help however where I live in the UK there is frequent cloud cover. As the sun passes in and out of the clouds the light levels end up changing a surprising amount, causing frequent exposure flashes on the camera which essentially voids the calibration. In trying to achieve very high sensitivity I could not really make any kind of rolling calibration work sadly

No camera is recognized in any iOS browser other than Safari. Is it something that can be fixed by you, or is it up to Apple?

Good question, I would say neither, this responsibility is for the browser and native apps you use which display web content (e.g. Chrome, Firefox, Facebook, etc). Not apple or the web app developer. At most OP should include https://www.npmjs.com/package/webrtc-adapter as part of their polyfills to aid cross-browser support/cater for WebRTC nuances.

WebRTC has been in iOS Safari for quite a while. However, all other apps and browsers were limited to what was in offer within WKWebView. From iOS 14.3 beta 1 onwards WKWebView gained getUserMedia/WebRTC features. It is now up to the browser and apps you use to make sure they have implemented their web views correctly and allow the correct permissions for WebRTC to work.

https://stackoverflow.com/questions/48775154/notreadableerro... https://bugs.webkit.org/show_bug.cgi?id=208667 https://bugs.chromium.org/p/chromium/issues/detail?id=752458

I wasn't able to test much on iOS unfortunately. I know on Windows 10 if one browser is already using the camera it will say camera unavailable when launching a different browser. I am not sure if it is related to this?

Works fine in firefox on iOS

Can I switch witch camera it uses?

It will use whichever camera the browser has configured as it's default. You may be able to change this in your browser settings

Firstly great app, I enjoyed using this on my baby daughter crawling around the living room! Keep up the good work :)

If you were to implement a camera picker, take a gander at: https://webrtc.github.io/samples/src/content/devices/input-o...

iOS and Android don't have the same camera picker like Chrome on Windows 10, even then it is difficult to always override. I would recommend using enumerateDevices to allow you to pass the deviceId when firing getUserMedia. Not a lot of work. Implemented this a few times for cross-browser WebRTC experiences. A pro-tip is use getUserMedia with audio and video constraints set to true. This forces the permissions pop up to appear. You can kill the feed once the user has accepted the permissions, then ask them what device they want to use, and then fire getUserMedia with the correct deviceId. This is a [nice?] hack as some browsers don't allow you to use enumeratedDevices until after getUserMedia has asked you for the permissions. e.g. Safari...

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevice...

Reply on news.ycombinator.com