使用當前代碼，我只能將視頻幀發送到網頁。我怎樣才能在每一幀中發送一些文本并顯示它。
快速API代碼
def generate_frames(cap,i):
while True:
success,frame = cap.read()
if not success:
break
else:
# Reshape image
im_arr = cv2.imencode('.jpg', frame)[1]
cv2.waitKey(50)
print(loa[i]) //text to be displayed along with image
i = i 1
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' bytearray(im_arr) b'\r\n')
@app.get('/video')
def video():
i = 0
cap = cv2.VideoCapture('C:\\Users\\ryanv_k78mbsh\\Desktop\\FINAL\\MovenetTest\\animation.gif')
return StreamingResponse(generate_frames(cap,i),media_type = 'multipart/x-mixed-replace; boundary=frame')
接收和顯示視頻幀的 HTML 代碼
<div style= "height:50px"></div>
<img src ="{{ url_for('video') }}" width="50%" />
</div>
uj5u.com熱心網友回復：
您可以WebSockets改用，如本答案（選項 2）中所述，并將文本和影像位元組都發送到前端。下面的例子：
應用程式.py
from fastapi import FastAPI, Request, WebSocket, WebSocketDisconnect
from fastapi.templating import Jinja2Templates
import uvicorn
import cv2
app = FastAPI()
camera = cv2.VideoCapture(0,cv2.CAP_DSHOW)
templates = Jinja2Templates(directory="templates")
@app.get('/')
def index(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
@app.websocket("/ws")
async def get_stream(websocket: WebSocket):
await websocket.accept()
try:
while True:
success, frame = camera.read()
if not success:
break
else:
ret, buffer = cv2.imencode('.png', frame)
await websocket.send_text("some text")
await websocket.send_bytes(buffer.tobytes())
except WebSocketDisconnect:
print("Client disconnected")
if __name__ == '__main__':
uvicorn.run(app, host='127.0.0.1', port=8000)
模板/ index.html
<!DOCTYPE html>
<html>
<head>
<title>Live Streaming</title>
</head>
<body>
<img id="frame" src="">
<div id="textArea"></div>
<script>
let ws = new WebSocket("ws://localhost:8000/ws");
ws.onmessage = function(event) {
if (typeof event.data === 'string')
document.getElementById("textArea").innerHTML = event.data;
else{
let blob = new Blob([event.data])
let blobURL = URL.createObjectURL(blob);
let image = document.getElementById("frame");
image.src = blobURL;
}
};
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468863.html
標籤：Python html opencv 计算机视觉 快速API
上一篇：使用自定義主鍵的一對多關系