Reputation: 25
So, apparently I am trying to send data from my openCV webcam to a local sever spun using Flask. I am able to receive the data and print it on terminal, however, I am not really sure as to how to print it on a webpage.
This is my program :
from flask import jsonify, Flask, make_response,request, render_template
from flask_restful import Resource, Api
# creating the flask app
from flask import jsonify, Flask, make_response,request, render_template
from flask_restful import Resource, Api
app = Flask(__name__)
api = Api(app)
@app.route("/getData", methods=['POST', 'GET'])
def get():
if request.method == 'POST':
textInput = request.form["data"]
print(textInput)
return render_template("text.html",text=textInput)
else:
return render_template("text.html")
@app.route("/", methods=['GET'])
def contact():
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)
I am sending data from webcam.py using requests module via post request. The data is received and currently printed on terminal. However, I want it to be redirected to text.html.
data = {"data": res}
requests.post(url = API_ENDPOINT, data = data)
The above is the code snippet I use to send data from webcam.py to API_ENDPOINT (127.0.0.1:5000/getData).
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sign to Speech</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
background-color: #FFC107
}
</style>
</head>
<body>
<h4>{{text}}</h4>
</body>
</html>
The above is my text.html page under templates directory. Any Help will be appreciated :D
Upvotes: 1
Views: 2609
Reputation: 812
The problem with your code is that you send data from OpenCV webcam
to a local server
and from local server
you return a response to openCV webcam
and that's why you see data in the terminal as you print it and you can't see data in the webpage of flask app as you don't have that data, because you have lost data at the moment you have returned a response to the openCV webcam
.
In this case, you could use 1 of the 3 approaches.
Using a database, like sqlite3
and save received data from the openCV webcam
, but then you will need to do more, like create models and etc.
Save data received from OpenCV webcam
to a file - quicker option to verify that everything works (the one I will use in my code example)
Using flask.session
and saving data to flask session and then reading from it as you would read data from python dictionary.
In these cases, when you open your flask web app in the browser, you need to read data from either DB
, file
or flask.session
.
In this example, I will use a file named data.txt
to which I will write (I will use a
that means open file to append to the end of a file, then the old data will be left when you will send multiple requests from OpenCV webcam
) information received from OpenCV webcam
server.
from flask import Flask, request, render_template, jsonify
# creating the flask app
app = Flask(__name__)
@app.route("/getData", methods=['POST', 'GET'])
def getInfo():
if request.method == 'POST':
text_input = request.form["data"]
with open('data.txt', 'a') as data_file:
data_file.write(text_input)
return jsonify({'message': 'Data saved sucessfully!'}), 200
else:
text_input = None
with open('data.txt', 'r') as data_file:
text_input = data_file.read()
return render_template("text.html", text=text_input)
if __name__ == '__main__':
app.run(debug=True)
This way your OpenCV webcam
will receive 200
response with a message. Then you can navigate to your web app /getData
page, then the request method will be GET
and then it will read the content of a file data.txt
and will pass this to the webpage you have just opened.
Make sure that you can access
data.txt
, it should be placed in the same directory as your app exists (at least with this example, but you should make more appropriate structure later on or at all use thesqlite3
database for local development).
Upvotes: 1
Reputation: 1767
Try this below:
from flask import jsonify, Flask, make_response,request, render_template
from flask_restful import Resource, Api
# creating the flask app
app = Flask(__name__)
# creating an API object
api = Api(app)
@app.route("/getData", methods=['POST', 'GET'])
def getInfo():
textInput = request.form["data"]
print(textInput)
return render_template("text.html",text=textInput)
if __name__ == '__main__':
app.run(debug=True)
And in your HTML use Jinja like following below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
{{ text }}
</body>
</html>
Upvotes: 0