# Computer Vision On Web
Have you ever wondered about running your computer vision program on your website? Maybe you are working with Django or flask to create a web app and now you want to deploy it on your website.
Well, it's straightforward to do it. You just need to have a basic understanding of flask or Django. Don't worry, even if you don't have one, we will build a simple **hand-tracking application using flask**. So let's get started.
### Project setup
I am using [Pycharm Community Edition](https://www.jetbrains.com/pycharm/download/) here, personally my favourite for all my Python Projects. You can use any IDE for the same.
1. Open Pycharm and create a project `flaskWebApp` (You can use any name here).
2. After the project indexing is done, you will see one folder `venv` and `main.py` with some code written in it.
3. Delete all the code in `main.py` and rename it to `app.py` (This is the basic flask project naming convention, let's follow this only).
4. Create two more folders `templates` and `static` in the same project `flaskWebApp`.
5. Finally we have set up a basic flask web app structure here. Your project should look something like this.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666008724584/jg3gjyqrc.png align="left")
**Explanation**
`static`: This folder will have external static files like your CSS, images, JavaScript files
`templates`: This folder contains your main HTML files where they have to be changed.
`app.py`: Python file to generate templates (dynamic html files in templates folder).
### Install packages
We need some of the packages to be installed in order to get the desired output. Here are the packages you need [`flask`](https://pypi.org/project/Flask/) (web development framework with python), [`opencv-python`](https://pypi.org/project/opencv-python/) (Computer vision library for python), [`lkhandmapping`](https://pypi.org/project/lkhandmapping/) (For tracking hand without writing tones of code). Use the syntax given below in the Pycharm terminal.
```
pip install flask
pip install opencv-python
pip install lkhandmapping
```
###Let's Code
1. Create an `index.html` file in `templates` folder and write the following code.
```
```
2. Open `app.py` and add the following code
```
from flask import Flask, render_template, Response
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
```
3. When you run `app.py` you will see a local IP address in the terminal like this.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666009881738/1bGfoWOkC.png align="left")
Click on the IP address.
You will see a blank webpage.
**What's happening here....**
The function `@app.route('/')` is defining the home URL of your project. So whenever you are at the home of your project, the function `index()` will run. In this function, we are just rendering the `index.html` file that has nothing as of now.
By default running the `index()` function.
4. Now import the necessary packages and add some additional functions to make our code work.
```
from flask import Flask, render_template, Response
import cv2
from lkhandmapping import handTracker
app = Flask(__name__)
camera = cv2.VideoCapture(0)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
def gen_frames():
while True:
success, frame = camera.read() # read the camera frame
if not success:
break
else:
frame = handTracker(frame)
ret, buffer = cv2.imencode('.jpg', frame[0])
frame = buffer.tobytes()
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
if __name__ == "__main__":
app.run(debug=True)
```
**Explanation**
Here we are getting video by changing the image continuously in image tag in our HTML file.The line ` }})
` in `index.html`.
Here the line `{{ url_for('video_feed') }}` is specifying the URL of the video feed that we are sending as the response from our python file by triggering the function `gen_frames()` in our video_feed. Let's see what this function is doing. Here is the code with comments as the explanation.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666011249663/Qb5kaDdMu.png align="left")
I hope the syntax is clear. If you have any queries, feel free to ask in the comments, or you can contact me [here](https://lakshaykumar.tech/#contact)
Don't forget to subscribe on my website - [https://www.lakshaykumar.tech/](https://www.lakshaykumar.tech/)