CNT 4713 Net-Centric Computing Class Project

This is a simple web application where I am hosting a static & live feed. Pretty much you'll see a video of me back from 2006 when my band tried our luck at a Battle of the Bands. I'm also live-streaming from my webcam using openCV & Ngrok.

The website is here.

I used for this project the following:

• Python
• Ananconda
• Flask Framework
• OAuth: Google
• OpenCV
• Ngrok
• Heroku

While developing this application, I had to learn Python fundamentals and Web Development using the Flask Framework.

Recommended Courses & Tutorials:

Udemy: Python and Flask Bootcamp: Create Websites using Flask!
Udemy: Learn Python Programming Masterclass
Live Webcam Flask Opencv Python

Set-up

Please note that this is not the best solution but most of these concepts were alien to me at the start of the project.

Step 1: Download Project & Set-Up Your Python Environment

To download the project:

git clone https://github.com/Markojudas/CNT4713-Class_Project.git

Download and install Ananconda

After you download and install Ananconda, create a Python environement. Open your command prompt (Windows Key + r -> cmd) and type the following: (you can replace "webstream" by whatever you wish)

conda create -n webstream flask

This will start creating the environment and install the Flask Framework . It will ask for your input to install other dependencies; enter 'y' to proceed. Once it finishes creating the environment it will show you how to activate (and deactivate) the environment. Type the command:

conda activate webstream

Step 2: Download the requirements

All the dependencies needed for this all to work are on the requirements.txt file. To install them, through your command prompt, you have to change to the directory where you downloaded this project (the root directory of project).

Note: Please make sure you have activated the environment

cd <path to project>

then type the following command:

pip install -r requirements.txt

This will install everything.

Step 3: Set-up the Flask_Dance to Connect the Google OAuth Client

if you wish to learn more about Flask Dance, you can always read the docs
The code is already implemented but you'll have to create your own client_id and client_secret. Please visit Google OAuth Client for more information on how to do so.

Once you have created a new Client ID through Google, set the environment variables by creating a file in your app root directory and name it '.env'

CLIENT_ID=
CLIENT_SECRET=
RELAX_TOKEN=True

Set the CLIENT_ID & CLIENT_SECRET by copying and pasting the strings given by Google.

Run Locally

At this point the application should be able to run locally. (make sure you have activated the environment):

Before launching the application locally you have to uncomment lines 3 and 4 from the "app.py" file. This will allow you to use the Google OAuth Client with HTTP and HTTPS. This is only for testing your application locally. When ready to deploy, please comment those lines again. Go back to your Google OAuth Client to authorized your localhost.

Click on your Web Client and under "Authorized redirect URIs" add the following: "http://127.0.0.1:5000/login/google/authorized".

Windows:

python app.py

Linux/macOS:

python3 app.py

Output:

Open your preferred browser and go to the URL from your output. Please note that the live feed will not work. Close your application (Ctrl + C) and follow the next step.

Webcam Server & live_feed.html

Open a cmd/terminal and change to the project directory. Run the following command to run webcamserver.py

python webcamserver.py

Please note this implementation requires a basic paid subscription to NGROK. Download NGROK and connect your account by opening a second cmd/terminal and changing to the directory where you downloaded NGROK and following the instructions provided. If you have a paid subscription you have the ability to create and use up to 3 domain names instead of the dynamic address provided by NGROK. (keep webcamserver.py running)

Dynamic Address (free account):
Windows Command:

ngrok http 8888

Linux/macOS

./ngrok http 8888

This will give you two addresses (http and https) to access your localhost outside your network (each time you run NGROK it will be a different string). It will look like this:

http://randomstring.ngrok.io
https://samerandomstring.ngrok.io

Reserved Domain:
Windows Command:

ngrok http --region=us --hostname=YOURDOMAINNAME.ngrok.io 8888

Linux/macOS:

./ngrok http --region=us --hostname=YOURDOMAINNAME.ngrok.io 8888

Keep NGROK running and open the "live_feed.html" file. Replace the img src with the address provided by NGROK.

line 8 <img src="https://YOURDOMAINNAME.ngrok.io/video_feed" width="50%" alt="VIDEO SERVER IS NOT ACTIVE">

At this point everything is set up to run locally. Run "app.py" again! (again, make sure both NGROK and webcamserver.py are still running as well)

Deploy to Heroku

Before starting this process make sure to copy the contents of ".gitignore" on a text file because you will need it if you wish to publish your code. Delete the file from your root directory.

Visit Heroku and create an account if you don't already have one. Once on your dashboard, Create new app. After creating the app your URL will be in the following format: "https://YOURNAMEDAPP.herokuapp.com". At this point you need to authorized this URL access to Google OAuth. Go back to your Google Web Client and under "Authorized redirect URIs" add the following:"https://YOURNAMEDAPP.herokuapp.com/login/google/authorized"

You'll need to download and install Git. Close your text editor and/or cmd/terminal. Now, you'll need to also download and install Heroku CLI. Re-open your text editor and/or cmd/terminal and follow the instructions shown on your Heroku App/Deploy tab.

Your Application now should be up and running; you will have to run wecamserver.py & NGROK for the live_feed to work.