Blog Post Actions
Group Actions
Engagement
  • Author Author: Sean_Miller
  • Date Created: Date Created
  • Views 645 views
  • Likes 12 likes
  • Comments 6 comments
Related
Recommended

The RA-Cam:  APS.Net Core 5 Web Security & Event Smart Cam

Sean_Miller

Photography                                               Submit an EntrySubmit an Entry

 

Monthly Themes   | Monthly Poll   |  Back to homepage

 

Check Out Our Other Projects at https://www.raisingawesome.site

RA-CAM:  A Very Versatile and Cheap Smart Cam Ecosystem

1 Hr of Spiders in 3 Minutes!

Screenshot of the RA-Cam Interface

 

I. PROJECT SUMMARY

  • <$35 Super Smart Camera for the home and gatherings
  • OpenCV AI for recognizing wildlife/people and auto snapping photos of smiling faces
  • ASP.Net Core 5 Website Example Cloud Service for Remote Smart Phone Monitoring, Recording, snapping photos, and triggering of smart home devices
  • Auto organized network of cameras - Viewing one allows you to see all RA-Cam's installed on your home network.
  • No soldering required - just 3D printing.
  • Raspberry Pi Zero W with 120 & 160 FOV HD lenses, 1080p, and infrared
  • RaisingAwesome/RA-Cam (github.com)
  • Experience Gained:
    • Headless Raspberry Pi Projects
    • ASP.Net Core 5 Website Configuration
    • Bootstrap Responsive Web Design
    • OpenCV Visual AI
    • Python, C#, & C++

 

The smart cam my son and I are making for this project is designed to be quickly install around the house or gatherings in seconds - whether with a suction cup sticking to a window, a pin in a wall, or simply just setting it down.

 

 

The ASP.NET Core 5 on a Raspberry Pi makes for a unique project on its own, but for the part that makes this project truly unique - I need some kick-butt Visual AI.  As you can see in the screen shot above, there are several AI modes I'm designing into the camera.

 

I've used Python with OpenCV in my past and found it definitely isn't acceptable if smooth motion is required once the AI kicks in.  With it being such a slug as shown above, I'll keep my Asp.NET Core 5 approach (C#) for the interface which will work great for serving the cloud service page - and I'll use .Net 5 C++ and OpenCV to handle the generation of the AI snapshots.  My personal target is to have the quality on par with my Nest Doorbell cam, but with better AI.

 

II. BILL OF MATERIALS

Raspberry Pi Zero W : ID 3400 : $10.00 : Adafruit Industries, Unique & fun DIY electronics and kits

USB Power SupplyUSB Power Supply

3D Printer filament or SLA Resin

Suction Cup

A Raspberry Pi Cam such as one of these:

 

I didn't score one of the contest packages to try and found that the base module was out of stock.  So, I purchased the above assortment to try them all out in a network of smart cameras.

 

III. RASPBERRY PI ZERO W STREAMING SETUP

Here are the steps for setting up a Raspberry Pi Zero W - soup to nuts:

  1. Get the Raspberry Pi Imager: Raspberry Pi OS – Raspberry Pi
  2. With it, burn your SD card applying Raspberry Pi OS Lite
  3. Pull out the card and reinsert it so your computer recognizes the writable portion of the SD card.
  4. Create a blank file titled 'ssh' on the root of the drive.  This will enable to remote access to the Pi with SSH.
  5. Create a file called "wpa_supplicant.conf" with the following in it (use your own WIFI_SSID and WIFI_PASSWORD):

country=US
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
ssid="WIFI_SSID"
scan_ssid=1
psk="WIFI_PASSWORD"
key_mgmt=WPA-PSK
}

 

VS Code:  More-and-more becoming the standard for coding across all platforms

 

Here is how to connect to your PI remotely:

  1. Put the SD card in your Pi Zero W, plug in the usb power, and you'll have a working PI on your network.
  2. To code on the Pi, I like to use VS Code these days.  It's like Cloud 9 married Visual Studio and they had a very cool kid.  However, Putty is still a lean, reliable alternative to connect via SSH and is required over VS Studio for a Pi Zero due to its architecture.
  3. Unless you use something like Advanced IP Scanner on your PC, you'll need to visit your routers admin page to find the IP address.  My routers have always been http://192.168.1.1 over the years.  You may have to google the manual for yours.
  4. Login with the password is raspberry.
  5. You'll need git (a code version control system), get my git repository, install the PiCamera package, and edit your startup.  So, type or paste the following:

sudo apt install git
git clone https://github.com/RaisingAwesome/RA-Cam.git
sudo apt-get install python3-pip
pip3 install picamera
crontab -e

 

If prompted for an editor to use with crontab, choose Nano.  In the Nano editor, paste the following at the end of the file:

@reboot sleep 30 && python3 /home/pi/RA-Cam/cam.py 2>/dev/null &

 

Hit CTRL x to save and exit.  Then do a sudo shutdown now, remove the power, and plug in your Pi Camera.  Then plug it back in.

 

At this point, you now have a streaming camera.  You can access it by typing http://YOURIP:8555/stream.mjpg.

 

Success?  Great work!  Go buy 4 at Microcenter and you got your property covered.

 

IV. 3D Printed Enclosure

You can get my 3D Files in Autodesk Fusion 360 to make the design your own here:

     https://github.com/RaisingAwesome/RA-Cam/blob/5296548d731a4924abf2038610f99a7fd419d2ae/RA-Cam%20v65.f3z

 

You'll notice a lot of mounting points.  That's because my cameras all had there own twist on hole locations.  I made a one size fits all frame and enclosure.

All Components and Different Cameras that Can be Applied

 

My Favorite One at Our Kitchen Sink Window

V. ASP.NET INSTALLATION

To get the most out of my setup, I'm considering ultimately landing my ASP.Net web server on a PC in my basement.  This is so it can manage video recordings as well and get the fastest AI possible for the overall solution.  It will be serve as my free "cloud AI service".  For now, I simply have it running as such on a Raspberry PI and so far, I'm very impressed with it!

 

If you cloned my github, you have the full RA-Cam webserver on your Pi Zero under the RA-Cam directory.  Do a periodic "git pull' and you will continue to get updates with improvements as I enhance its capability.  To host your own site in your house, though, you'll need to first set up the .Net 5 framework on a Pi or Linux OS on a PC.

 

This takes a long series of copy and paste console commands and the creation of two short text files.  I cover this in detail for the BBAI and will not regurgitate it here, but it is the same for the Raspberry Pi.  Here are those instructions:

     Build a Very Cheap ASP.Net 5 Core Web Server With BeagleBone AI (BBAI) : 8 Steps (with Pictures) - Instructables

 

My web design is this:

  • Single Page Application - my Razor Pages use AJAX calls allow the user to never have to see a "postback".  This gives it the look and feel of an application.
  • When buttons are clicked, ASP.Net make process calls to linux console app that snags frames and applies AI to create snapshots.

 

Using Bootstrap in the web design allows for responsive formatting which allows one code base to serve any screen size

 

VI.  THE CODE

What makes this project truly unique is the code.  You will not find this ASP.Net Core 5 code anywhere else but right here.  That's because it was written from the ground up just for this project.

 

So what's so big about it?  Well, it's a full-on, dynamically generated, single page asynchronous user event handling web app.  That makes it super user friendly and capable of being leveraged well beyond just taking pictures.

 

Here's the basic overall design - if you saw like the movie Inception, you'll like this:

  1. WIth a browser, the user visits the IP address of a RA-Cam that is running the ASP.Net Core 5 web app.
    • you can have just one RA-Cam running the dotnet app, or all of them on your network, but you'll end up just bookmarking one on your phone.  So, I just have one.
  2. The RA-Cam web app serves up a page that is made of dynamically created HTML and JavaScript.  This produces an ad hoc JQuery driven client side single page app - that is...one that never appears to "post back" to the server.  It behaves like you would expect any app on your phone to behave.  The URL at the top of the page doesn't change.  It's all happening on the original page.  Even better, thanks to Bootstrap, it has a responsive look-and-feel that looks good on any size device.
  3. When the user clicks on that generated client side app, the client app does an asyncronous post (AJAX via JQuery) back to the web app on the server.
  4. The web server then evaluates the AJAX post to determine what to do depending on what the user clicked.  Most clicks will result in the ASP.Net web server sending a "GET" to the main active RA-Cam's Python server that is handling the streaming.
  5. The RA-Cam that receives the "GET" request interrogates the "Get" to see what the ASP.Net Web Server wants and then does the necessary command locally and sends back content.  This could be turning an AI mode on/off or serving out a still shot for the thumbnails.

 

So, basically, the ASP.Net app is making an app on the fly.  It does this so you don't have to configure anything other than your Wi-Fi.  Just hook up a RA-Cam and they can figure it all out.

 

The power of ASP.Net allows for anything one can image.  In turn, this project not only made a great camera ecosystem - but it gave me the foundation for all my future wireless projects.  Using HTTP gets and posts triggered from a web page viewed on my phone, I can control any device anywhere to do anything.  With a zillion http based APIs out there - I just surpassed an incredible threshold for future design.  Awesome!

 

The code is huge, but available for review/cloning in my Github.  I do want to mention this little diddy I use for generating the thumbnails of the cams on the right of the interface:

 

string the_str="<a href='javascript: $(\"#main_img\").attr(\"src\",\"http://" + the_URL + "/stream.mjpg\");getAI(\""+ the_URL + "\");' id=" + the_ID + " title=\"RA-Cam: " + the_URL + "\"><img loading=\"lazy\" src=\"/Images/cam.png\" width=\"128\" height=\"96\" alt=\"RA-Cam Not Found\" onload='this.src=\"http://" + the_URL + "/still.jpg\";' onerror='this.onerror=null; $(\"#" + the_ID + "\").hide();'/></a>\n";

 

I thought I'd highlight it since a good one liner that can come in handy.  It's a good way to load in a temporary image (to show something like "Connecting"), then have the browser start loading the image you want, and then if the image doesn't exist, make the whole thing disappear.  It's not something you see everyday, but works well here to prevent the ugly broken link when a cam is offline.

 

VII. PICTURES

Here are some images we caught.  We found we had some visitors.

 

The RA-Cam Client Side App

 

 

 

Can you spot the RA-Cam?  A deer? A Skunk!!!!?  Comment below if you find them.

 

 

 

 

Can you spot the skunk!?

 

 

 

VI.  PROJECT SUMMARY

This project is evolving all the time.  We found it awesome to be able to set a camera at a point of interest around the house.  We even used a solar battery to power one near a suspect burrowed hole in our landscape.  The wifi reaches well into the yard.

 

You can follow this project or clone it at:

 

Checkout our other projects at https://www.raisingawesome.site.

 

See ya',

Sean

Anonymous