CODEWITHSUNDEEP
pythonflaskmultipart-mixed-replace
Daniel Kozin
Daniel Kozin

Reputation: 11

picture remains blank with flask and multipart/x-mixed-replace

I have a flask web application that reads my camera and is supposed to display it in my web browser. But instead of displaying it, I am getting a blank image as shown here:

py file

import cv2
import numpy
from flask import Flask, render_template, Response, stream_with_context, Request

video = cv2.VideoCapture(0)
app = Flask(__name__)

def video_stream():
    while(True):
        ret, frame = video.read()
        if not ret:
            break
        else:
            ret, buffer = cv2.imencode('.jpeg',frame)
            frame = buffer.tobytes()
            yield (b'--frame\r\n' b'Content-type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/siteTest')

def siteTest():
    return render_template('siteTest.html')

@app.route('/video_feed')

def video_feed():
    return Response(video_stream(), mimetype= 'multipart/x-mixed-replace; boundary = frame')

app.run(host ='0.0.0.0', port= '5000', debug=False)

(changed the IP for obvious reasons)

html file

<html>
 <head>
    <meta name = "viewport" content = "width = device-width, initial-scale=1">
    <style>
        img{ display: block;
            margin-left: auto;
            margin-right: auto;
        }
        h1 {text-align: center;}
    </style>
 </head>
 <body>
    <img id="bg" src = "{{ url_for('video_feed') }}" style="width: 88%;">
 </body>
</html>

Any help would be appreciated

I tried changing the response which didn't work as well as changing the video_stream() but I think that I did something wrong.

Upvotes: 0

Views: 996

Answers (1)

Abdullah Ibn Amin
Abdullah Ibn Amin

Reputation: 21

  1. Remove whitespaces from boundary = frame
  2. Restart server

code:

def video_feed():
    return Response(video_stream(), mimetype= 'multipart/x-mixed-replace; boundary=frame')

Upvotes: 1

Related Questions