admin管理员组文章数量:1352878
I'm trying to make an web interface for my python OpenCV code using Flask,with the intent of using a canvas HTML element to draw a "crop area" to extract details from the frame stream.Following some examples I've found here on Stackoverflow I was able to stream the output of my OpenCV code to an img element, but not to the canvas nor the video element. Python Code:(Minimal)
import cv2
from flask import Flask, render_template,Response
app = Flask(__name__)
video_capture = cv2.VideoCapture(0)
def gen():
while True:
ret, image = video_capture.read()
cv2.imwrite('t.jpg', image)
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + open('t.jpg', 'rb').read() + b'\r\n')
video_capture.release()
@app.route('/')
def index():
"""Video streaming"""
return render_template('index.html')
@app.route('/video_feed')
def video_feed():
"""Video streaming route. Put this in the src attribute of an img tag."""
return Response(gen(),
mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run()
HTML Code:
<html>
<head>
<title>Video Streaming </title>
</head>
<body>
<div>
<h1>Live Video Streaming </h1>
<img id="img" src = "{{ url_for('video_feed') }}">
</div>
</body>
</html>
I'm trying to make an web interface for my python OpenCV code using Flask,with the intent of using a canvas HTML element to draw a "crop area" to extract details from the frame stream.Following some examples I've found here on Stackoverflow I was able to stream the output of my OpenCV code to an img element, but not to the canvas nor the video element. Python Code:(Minimal)
import cv2
from flask import Flask, render_template,Response
app = Flask(__name__)
video_capture = cv2.VideoCapture(0)
def gen():
while True:
ret, image = video_capture.read()
cv2.imwrite('t.jpg', image)
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + open('t.jpg', 'rb').read() + b'\r\n')
video_capture.release()
@app.route('/')
def index():
"""Video streaming"""
return render_template('index.html')
@app.route('/video_feed')
def video_feed():
"""Video streaming route. Put this in the src attribute of an img tag."""
return Response(gen(),
mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run()
HTML Code:
<html>
<head>
<title>Video Streaming </title>
</head>
<body>
<div>
<h1>Live Video Streaming </h1>
<img id="img" src = "{{ url_for('video_feed') }}">
</div>
</body>
</html>
- you will have to learn JavaScript for this. – furas Commented Mar 4, 2020 at 8:15
-
this question shows that <video> may not support
mjpegformat so this will not work with<video>mjpeg HTML5 video doesn't stream with <video> – furas Commented Mar 4, 2020 at 8:25
2 Answers
Reset to default 5For future reference to anyone that bumps into this question,although the answer provided by @furas works as intended, I've found that for my usecase it is also possible to assign the output frame to the canvas background using CSS,allowing to display the video only,and draw freely on top of that.
HTML Code
<html>
<head>
<title>Video Streaming </title>
</head>
<style>
.myCanvas{
background-image: url("{{ url_for('video_feed') }}");
}
</style>
<body>
<div>
<h1>Live Video Streaming </h1>
<img id="img" src = "{{ url_for('video_feed') }}">
<canvas class="myCanvas" height="600" width="480">
</div>
</body>
</html>
This HTML with JavaScript display stream on Canvas and in <img> at the same time.
For single static image it needs to run onload(). For stream MJPEG it needs to use setInterval() to redraw image periodically.
It works for me on Chrome but my Firefox displays only first frame on Canvas. I think I had this problem before. Probably it needed something more to work correctly but I don't remeber what was it.
<html>
<head>
<title>Video Streaming </title>
</head>
<body>
<div width="640px" height="480px" style="display:inline-block">
<h1>Image</h1>
<img id="img" src="{{ url_for('video_feed') }}">
</div>
<div width="640px" height="480px" style="display:inline-block">
<h1>Canvas</h1>
<canvas id="canvas" width="640px" height="480px"></canvas>
</div>
<script >
var ctx = document.getElementById("canvas").getContext('2d');
var img = new Image();
img.src = "{{ url_for('video_feed') }}";
// need only for static image
//img.onload = function(){
// ctx.drawImage(img, 0, 0);
//};
// need only for animated image
function refreshCanvas(){
ctx.drawImage(img, 0, 0);
};
window.setInterval("refreshCanvas()", 50);
</script>
</body>
</html>
I found old information mjpeg HTML5 video doesn't stream with and it seems <video> may not support mjpeg format so it may not works with this stream.
Full working code.
I use render_template_string instead of render_template so everyone can put all code in one file and test it.
import cv2
from flask import Flask, render_template, render_template_string, Response
app = Flask(__name__)
video_capture = cv2.VideoCapture(0)
def gen():
while True:
ret, image = video_capture.read()
cv2.imwrite('t.jpg', image)
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + open('t.jpg', 'rb').read() + b'\r\n')
video_capture.release()
@app.route('/')
def index():
"""Video streaming"""
#return render_template('index.html')
return render_template_string('''<html>
<head>
<title>Video Streaming </title>
</head>
<body>
<div>
<h1>Image</h1>
<img id="img" src="{{ url_for('video_feed') }}">
</div>
<div>
<h1>Canvas</h1>
<canvas id="canvas" width="640px" height="480px"></canvas>
</div>
<script >
var ctx = document.getElementById("canvas").getContext('2d');
var img = new Image();
img.src = "{{ url_for('video_feed') }}";
// need only for static image
//img.onload = function(){
// ctx.drawImage(img, 0, 0);
//};
// need only for animated image
function refreshCanvas(){
ctx.drawImage(img, 0, 0);
};
window.setInterval("refreshCanvas()", 50);
</script>
</body>
</html>''')
@app.route('/video_feed')
def video_feed():
"""Video streaming route. Put this in the src attribute of an img tag."""
return Response(gen(),
mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run()
本文标签： javascriptHow do I stream python OpenCV output to HTML canvasStack Overflow
版权声明：本文标题：javascript - How do I stream python OpenCV output to HTML canvas? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743893615a2557379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论