У меня есть сценарий python, который генерирует некоторые изображения со скоростью 10-15 кадров в секунду. Мне нужно транслировать эти изображения (поток) с помощью приложения flask.
app.py
from flask import Flask, render_template, Response
import cv2
import numpy as np
import gc
app = Flask(__name__)
class Stream:
def __init__(self):
pass
def get_frame(self):
frame = cv2.imread('now.jpg')
return frame, 1
stream = Stream()
@app.route('/')
def index():
return render_template('index.html')
def gen(stream):
while True:
frame, frames_left = stream.get_frame() # get processed frame
try:
if frame.shape != (1080, 1920, 3):
# not proper dimension
frame = cv2.resize(frame, (1920, 1080))
except:
print('failed')
frame = np.random.randint(0, 1, (1080,1920,3))
(flag, encodedImage) = cv2.imencode(".jpg", frame)
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + bytearray(encodedImage) + b'\r\n')
@app.route('/video_feed')
def video_feed():
return Response(gen(stream),
mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=6001, debug=False)
templates / index. html
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}
.mySlides {display: none}
</style>
<body class="w3-content w3-border-left w3-border-right">
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-white" style="margin-left:0px">
<!-- Push down content on small screens -->
<div class="w3-hide-large" style="margin-top:80px"></div>
<!-- Slideshow Header -->
<div class="w3-container" id="apartment">
<h2 class="w3-text-green"></h2>
<div class="w3-display-container mySlides">
<img src="{{ url_for('video_feed') }}" style="width:100%;margin-bottom:-6px">
<div class="w3-display-bottomleft w3-container w3-black">
<p>Straming ...</p>
</div>
</div>
</div>
<script>
// Script to open and close sidebar when on tablets and phones
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Slideshow Apartment Images
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
</body>
</html>
Итак, теперь программа 1 записывает кадры с именем now.jpg, а приложение flask считывает последний кадр и показывает его. Все работает, но проблема в том, что в некоторых случаях приложение flask считывает неполные изображения, поскольку эти изображения все еще записывались. Предупреждение: Premature end of JPEG file
Как обмениваться изображениями между программой 1 и приложением flask, чтобы изображения считывались после того, как они были полностью записаны программой 1?