I have a flask app that plays a video and should record the user's responses to the video prompts and then append those responses that are shown via the redirect to a new page. For some reason when I use getusermedia, it doesn't ask for the user's permission to use the microphone nor does it record the user's response. I've read through this and this as well as the mozilla docs but am still confused. Where am I going wrong? Is it the POSTs requests with flask?
main.py
from flask import render_template, Flask, request
import os
from vaderSentiment.vaderSentiment import SentimentIntensityAnalyzer as SIA
import nltk
import io
import os
from nltk.corpus import stopwords
import speech_recognition as sr
app = Flask(__name__, static_folder = 'static')
# set the stopwords to be the english version
stop_words = set(stopwords.words("english"))
# create the recognizer
r = sr.Recognizer()
# define the microphone
mic = sr.Microphone(device_index=0)
r.energy_threshold = 300
# vader sentiment analyzer for analyzing the sentiment of the text
sid = SIA()
user = []
location = []
state = []
info = [user, location, state]
# patient.name?
@app.route("/", methods=["GET", "POST"])
def home():
if request.method == "POST":
with mic as source:
holder = []
for x in info:
audio_data = r.listen(source)
r.adjust_for_ambient_noise(source)
text = r.recognize_google(audio_data, language = 'en-IN')
holder.append(text.lower())
if x == "state":
ss = sid.polarity_scores(holder)
if ss == "neg":
x.append(str("sad"))
else:
x.append(str("not sad"))
else:
filtered_words = [words for words in holder if not words in stop_words] # this filters out the stopwords
x.append(filtered_words.lower())
return redirect(url_for('care', user = user))
return render_template('index.html', user = user)
@app.route("/care", methods=["POST"])
def care():
return render_template('list.html', user = user, location=location, state=state)
if __name__ == "__main__":
#app.run(debug=True)
app.run(host='0.0.0.0')
index.html
{% extends "base.html" %}
{% block content %}
<!---------Therapist Section--------->
<section id="therapist">
<div class="container" id="therapist_container">
<script>
window.onload = function() {
// Normalize the various vendor prefixed versions of getUserMedia.
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
}
function getLocalStream() {
navigator.mediaDevices.getUserMedia({video: false, audio: true}).then( stream => {
window.localStream = stream; // A
window.localAudio.srcObject = stream; // B
window.localAudio.autoplay = true; // C
}).catch( err => {
console.log("u got an error:" + err)
});
}
getLocalStream()
</script>
<div id="button">
<button type="button" class="btn btn-primary" id="therapist-button" data-toggle="modal" data-target="#myModal">Talk with Delphi</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="vid1Title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<video width="100%" id="video1">
<source src="./static/movie.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#video1')[0].play();
})
$('#myModal').on('hidden.bs.modal', function () {
$('#video1')[0].pause();
})
video = document.getElementById('video1');
video.addEventListener('ended',function(){
window.location.pathname = '/care';})
document.querySelector('therapist-button').addEventListener('click', async (e) => {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
})
</script>
</div>
</section>
{% endblock content %}
list.html
{% extends "base.html" %}
{% block content %}
<!----LIST------>
<section id="care_list">
<div class="container" id="care_list_container">
<h1 class="jumbotron text-center" id="care_list_title">{{ user }} Care Record</h1>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Session #</th>
<th scope="col">Length</th>
<th scope="col">Location</th>
<th scope="col">State</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>{{ length }}</td>
<td>{{ location }}</td>
<td>{{ state }}</td>
</tr>
<tr>
<th scope="row">2</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2"></td>
<td></td>
</tr>
</tbody>
</table>
<ul class="list-group list-group-flush" id="care_list">
<li class="list-group-item">Please email tom@vrifyhealth.com for help.</li>
</ul>
</div>
</section>
{% endblock content %}
There is nothing more of value outside the block content, just like the main menu, logo footer etc. IF y'all need that though, then happy to edit. But this question was long enough as is. Thanks!
