gpt4 book ai didi

javascript - 如何将 python OpenCV 输出流式传输到 HTML Canvas ?

转载 作者:行者123 更新时间:2023-12-02 16:16:32 24 4
gpt4 key购买 nike

我正在尝试使用 Flask 为我的 python OpenCV 代码创建一个 Web 界面,目的是使用 Canvas HTML 元素绘制“裁剪区域”以从帧流中提取细节。按照我的一些示例在 Stackoverflow 上找到我能够将我的 OpenCV 代码的输出流式传输到 img 元素,但不能流式传输到 Canvas 或视频元素。Python代码:(最小)

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 代码:

<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>

最佳答案

为了将来遇到这个问题的任何人引用,虽然@furas 提供的答案按预期工作,但我发现对于我的用例,也可以使用 CSS 将输出框架分配给 Canvas 背景,允许仅显示视频,并在其上自由绘制。

HTML代码

<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>

关于javascript - 如何将 python OpenCV 输出流式传输到 HTML Canvas ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60509538/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com