Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement the Flask web app #9

Open
kcuric opened this issue Dec 19, 2019 · 3 comments
Open

Implement the Flask web app #9

kcuric opened this issue Dec 19, 2019 · 3 comments
Assignees
@kcuric @mkristofic

Comments

@kcuric
Copy link
Owner

kcuric commented Dec 19, 2019

Implement the Flask web application that will be running on the created GCP VM Instance.
@kcuric kcuric self-assigned this Dec 19, 2019
kcuric added a commit that referenced this issue Dec 28, 2019
@kcuric
#9 Started implementing the server side
637fb06
kcuric added a commit that referenced this issue Dec 29, 2019
@kcuric
#9 Rendering templates
679ffac
kcuric added a commit that referenced this issue Dec 29, 2019
@kcuric
#9 Fixed a small syntax error
7ec7095
@mkristofic mkristofic self-assigned this Jan 3, 2020
@mkristofic
Copy link
Collaborator

Implemented testing environment on local network.

# app.py

from flask import Flask, render_template, Response
import socket
import numpy as np
import cv2

host = "192.168.1.4"
port = 5005
server_address = (host, port)

sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
sock.bind(server_address)
print('starting up on %s:%s' % server_address)

app = Flask(__name__)

def gen():
    while True:
        data, address = sock.recvfrom(65535)
        # nparr = np.frombuffer(data, np.uint8)
        # img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + data + b'\r\n')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/video_feed')
def video_feed():
    return Response(gen(), mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(ssl_context='adhoc')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DIY Survailence System</title>
</head>
<body>
    <h1>DIY Survailence System</h1>
    <p>Running the app.py</p>
    <img src="{{ url_for('video_feed') }}">
</html>

kcuric added a commit that referenced this issue Jan 3, 2020
@kcuric
#9 Flask app slightly modified
f5a64be
kcuric added a commit that referenced this issue Jan 3, 2020
@kcuric
#9 Client script added
c18d005
kcuric added a commit that referenced this issue Jan 3, 2020
@kcuric
#9 Live Streaming Enabled
6c42b1d 
Fixed a bug as Miro suggested. Live Streaming with one camera is now possible.
Frames are being sent via UDP.
kcuric added a commit that referenced this issue Jan 3, 2020
@kcuric
#9 Implemeted face detection, added CSS
a9817bd 
Face detection is now a thing. I've added some CSS too.
mkristofic added a commit that referenced this issue Jan 4, 2020
@mkristofic
#9 Set reuse address to true
e162bb2 
Because of the error while trying to run the server, the option to reuse socket address was set to true.
@mkristofic
Copy link
Collaborator

Regarding the previous commit, without the option to reuse the addres, when trying to run the server, an error pops up saying that the address is already in use (shown in the image below).

image

kcuric added a commit that referenced this issue Jan 4, 2020
@kcuric
#9 Streamer and Recorder separated entirely
f702618 
Streamer and Recorder class are now completly separated! Meaning they are truly independent.
kcuric added a commit that referenced this issue Jan 4, 2020
@kcuric
#9 Added support for two cameras
ed82a8d 
Two cameras can now be used simuntaniosly. The plan is to make an implementation that can use n cameras in the future. The problem is the dynamic allocation of the ports and the dynamic allocation of the gui elements for the video streaming. But more on that perhaps in the future.
kcuric added a commit that referenced this issue Jan 4, 2020
@kcuric
#9 Face detection information is provided in GUI
e3023f8 
Face detection (from each camera) is now provided in GUI. Further styling will be done. This was mainly achieved via AJAX, jQuery andjsonify module from Flask.
@kcuric
Copy link
Owner Author

kcuric commented Jan 4, 2020

To run the client script user now must provide arguments.

Needed arguments for the client script:

  1. port number (mandatory)
  2. camera number (optional)

If the user uses only one camera than providing the camera number is not necessary.

kcuric added a commit that referenced this issue Jan 4, 2020
@kcuric
#9 Optional arguments fix
0ec907a 
Default value 0 for the camera number argument now works properly if not specified.
kcuric added a commit that referenced this issue Jan 8, 2020
@kcuric
#9 Added ssl_context argument to the server script
47b6270
mkristofic added a commit that referenced this issue Jan 9, 2020
@mkristofic
#9 Fixed the spelling in the index.html
ece25a9 
Changed the spelling from 'Survailence' to 'Surveillance'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kcuric kcuric

@mkristofic mkristofic

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kcuric @mkristofic