Accessing webcam using Flask and Javascript

Question

I'm working on a project to detect and track faces by taking video from webcam. It worked fine on my PC but when i deployed it on Heroku, I found out that the open cv command i was using to get the video feed of the user (i.e. video = cv2.VideoCapture(0)) does not work when deployed.

After some googling I found out this repo where he did exactly the same and got video frames using javascript but I'm not able to figure out how he is sending those frames back to the flask app to process the images and send it back to HTML. I cloned this repo and found out that this code also doesn't work . It is not able to show the processed images back, Although the webcam using JS does work .

Can someone please help me resolve this issue. app.py:

from flask import Flask, render_template, Response, url_for, redirect
import cv2 as cv
from face_detector import face_detector
from flask_wtf import FlaskForm
from wtforms import SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'password'


class InfoForm(FlaskForm):
    submit = SubmitField(label="Submit")

@app.route('/', methods=['GET', 'POST'])
def index():
    form = InfoForm()

    if form.validate_on_submit():
        return redirect(url_for('home'))

    return render_template('home.html', form=form)


@app.route('/home',methods=['GET', 'POST'])
def home():
    return render_template('index.html')

@app.route('/video',methods=['GET', 'POST'])
def video():
    vid = cv.VideoCapture(0)
    success, dfs = vid.read()
    if success:
        return Response(face_detector(), mimetype='multipart/x-mixed-replace; boundary=frame')


if __name__ == "__main__":
    app.run(debug=True)

index.html

{% extends "base.html" %}

{% block content %}



<div class="jumbotron" style = "display : block">
  <h1 style="display: block; justify-content: center; text-align: center">---Live Face Detection 🎦---</h1>
  <br>
  <br>
  <div style="margin: auto 0px">
    <center><img src="{{ url_for('video') }}" alt="Please turn on your camera !"/> </center>
  </div>
</div>

{% endblock %}