Rang

A ring clone (yes, the doorbell one).

📖 Table of Contents

• About The Project & Inspo
  • Demo Video
  • Hardware
  • Features
  • Tech Used
  • What I Learned
• Setup & Installation
  • Start Here
  • Frontend & Firebase
  • Backend
  • Camera Appliance
  • Running It All
• Usage
• Contact

📄 About The Project & Inspo

Imagine ring, now hopefully your memory is blurry because you're looking at Rang.

Anyway, this project aims to replicate some of ring's features and system design. I could've done something simpler 🥴 but honestly doing a twitter, spotify, or a youtube clone is boringggg, like there's tutorials on that. But making a ring clone... haven't seen a tutorial on it yet.

🎥 Demo Video

There's audio btw.

rang.mp4

🔨 Hardware

Check out what the hardware behind the camera appliance looks like! I used a 5 megapixel camera attached via a ribbon cabel to a Raspberry Pi Model B.

🚀 Features

Some features!

• Live Video Streaming: Users can access real-time video feeds from their cameras, allowing them to see visitors remotely.
• Face Detection: The system is equipped with an advanced face detection model that alerts users when there is human activity in front of the camera.
• Supports Multiple Cameras: Users can add any amount of cameras whether it be a camera monitoring the front door, garage, or back door.
• Cloud Storage: Recorded face detection logs, camera device data, and user data is securely stored in the cloud, providing convenient access and retrieval at any time.
• User Accounts: Securely create a user profile where you can manage your devices.
• Mobile App Integration: Mobile app for both iOS and Andriod users.

💻 Tech Used

Rang uses modern tech, frameworks, and libraries. And here it is...

• Node.js for the backend, handling requests, server-side processing and server-side logic.
• Firebase for user authentication, database management, and secure cloud storage.
• React Native for a cross-platform mobile app and consistent user experience.
• NativeBase for a more appealing user interface.
• OpenCV (Python) for image processing, face recognition, and analysis.
• Socket.IO for fast real-time communication and video streaming.

🧠 What I Learned

I learned a ton while developing this clone of ring. Before this project I had never worked with Firebase, OpenCV, WebSockets or React Native (I have used a lot of React tho). Nonetheless, it was great to combine different tech and make something functional and pretty cool. On top of the coding I also looked a bit into systems design/overall architecture of the project. I had to think how I wanted the client, server, and camera(s) to interact with one another and I wanted to make it scalable. A quick example of this would be me realizing that if I wanted users to be able to connect to their camera(s) from anywhere, I would need my server to act kinda like the middleman. I also needed a way to verify the camera devices, so I decided that each camera would be associated with an unique ID which would be written into the database and coded in the camera. When users want to add a camera they can enter in the ID and some server-side logic verifies it, then adds it to the user profile.

Side Note ~ I envisioned that if this were a real product you could have a script to automate ID's being written into the database and another script to code the ID into the camera. When a customer buys a camera it would come with it's unique ID. (I think this is actually how ring does it but users add their doorbell via QR code)

🛠️ Setup & Installation

🎯 Start Here

Want to set it up? Just follow this portion of the ReadMe in order.

📋 Prerequisites

You're gonna need some stuff first...

To start make sure you have node.js. (I'm mentioning it up here because you need it for both the front and back end.)

1. Install Node.js: make sure you are using node.js version >= v16.16.0 and npm version >=8.11.0 .If you don't have node, install it here.

Prerequisites ~ Firebase

2. Google Account: make sure you have a google account because we will be using it for Firebase later.

Prerequisites ~ Frontend

3. Expo: letting you know this project uses expo but you won't need to install anything since it leverages npx, you can read more about it here.
4. Emulator OR Phone: make sure you have either an emulator (iOS or Android). I would strongly recommend the iOS Simulator or Android Studio. OR a phone (iPhone or Android) if you want to use your phone you need to download Expo Go from the App Store/Google Play Store.

Prerequisites ~ Camera Appliace

5. Python: ensure you have python 3.9+

🔄 Cloning

Next, clone the repo.
Move to whatever directory you want to clone into and run:

git clone https://github.com/MoschellaV/RingClone.git

🌐 Frontend & Firebase

From the root directory move into the /client folder.

cd client

Next, install all packages and dependencies.

npm install

Frontend Setup

1. Create a .env file in the /client folder.

   

2. Find your IP address and paste the following in the .env file. Note: 92.199.137.15 is a fake IP for demonstration purposes, 6000 is the port (you can change the port if you want)

   SERVER_URL=http://92.199.137.15:6000

Now we have to set up Firebase.

1. Make sure you're signed into your Google Account.

2. Go to the firebase page here.

3. Click Get started.

4. Click Add project and follow the steps, the name does not matter, and you can disable google analytics.

5. Click the </> icon to add Firebase to your web app.

   

6. Now choose a name (anything), leave Firebase Hosting unchecked and register the app.

7. Now you only need the firebaseConfig so copy it and save it somewhere (like a notepad).

   

8. Paste the following in the .env file.

   FIREBASE_API_KEY=your_key_here
   FIREBASE_AUTH_DOMAIN=your_key_here
   FIREBASE_PROJECT_ID=your_key_here
   FIREBASE_STORAGE_BUCKET=your_key_here
   FIREBASE_MESSAGE_SENDER_ID=your_key_here
   FIREBASE_APP_ID=your_key_here

9. For each variable replace your_key_here with the corresponding key from the firebaseConfig in step 7.

10. Setup Firebase Auth.

    • Go to the firebase console and click Authentication.
    
    • Click Get started.
    
    • Select Email/Password as the sign-in method.
    
    • Enable Email/Password
    
    • Click Save

11. Setup Firestore.

• Go to the firebase console and click Cloud Firestore.

• Click Create Database.

• When prompted with read/write rules check Start in production mode and then select your region.

⚙ Backend

From the root directory move into the /backend folder.

cd backend

Next, install all packages and dependencies.

npm install

Backend Setup
Open the file backend/server.js and on line 1 make sure the port is the same as the one used in the SERVER_URL variable for the frontend.

// you should see
const PORT = 6000;

Now we have to setup firebase admin.

1. Navigate to your app's settings.

   

2. Using the tabs navigate to Service accounts, then click Generate new private key.

   

3. Download the generated key, open the .json file and copy all the contents.

4. Create a file called serviceAccountKey.json in the /backend/Firebase directory and paste the contents of the generated key in that file.

   

📸 Camera Appliance

From the root directory move into the /cameraAppliance folder.

cd cameraAppliance

Camera Setup

1. Create a .env file in the /cameraAppliance folder.

   

2. Use the same SERVER_URL that you used in the client env file and paste it in this .env file.
   This SERVER_URL below, is an example.

   SERVER_URL=http://92.199.137.15:6000

3. Now we need to set up the virtual environemnt.
   make sure you're using the correct version of python to set up the environment
   To do so use...

   python -m venv env
   

4. To activate the virtual environemnt use the appropriate command.

   # windows
   env/Scripts/activate
   
   # macOS/WSL
   source env/bin/activate
   

5. After activating the virtual environemnt you must install all the requirements with this command...

   pip install -r requirements.txt
   

🎬 Running It All

Now that everything is set up, we can start up the project.

But first we need to add our camera to the database, I mentioned this in the What I Learned section.

1. Navigate to /cameraAppliance/device_CONFIG.py and copy the ID that I left there.
2. Now go into the Firestore database in Firebase.
3. Click Start collection and name the collection devices <-- exactly like that, no caps.
4. Paste the device_Id into the document ID and then you can make up any field and value for that document (see below as exemplar).

5. Click Save.
6. IMPORTANT If you want to add multiple camera's, duplicate the cameraAppliance/ folder, and change the device_id in device_CONFIG.py to a new ID. Then follow the same steps as above, adding it into the database.

Starting up Backend

First we will start the backend.
Open a new terminal in the root directory and cd backend.
Run the following to start the server...

npm start
#you can also use nodemon if you happen to have it installed

Starting up Frontend

Next we'll start the frontend.
Open a new terminal and cd client.
Then run the following...

npx expo start

#Next, view the options (in the terminal) presented by expo and press a or i depending on which emulator you're using.
i
#OR
a

Starting up Camera

And finally we can start the camera.
Open a new terminal and cd cameraAppliance.
Make sure you're in your virtual environemnt

# To Activate Virtual Env
# windows
env/Scripts/activate

# macOS/WSL
source env/bin/activate

To run the software for the camera use...

python main.py OR python3 main.py 

🧰 Usage

To use the app, you must fist make an account, you can click Sign Up to do so.
Once you have an account, you can go to your Profile and Add Device.
Now log out and log back in.
You should now see a video icon in the Live Video tab, click on it to view the live stream from your camera (you're camera needs to be running in case you closed it). You should also be able to see all the detection logs in the Detection Logs tab.

📨 Contact

Got questions? Feel free to reach out!

• Email
• LinkedIn

You can also open an issue on this GitHub repo if you find any problems.