我正在尝试呈现HTML
页面,该页面显示来自网络摄像头的视频流。但是,我遇到以下错误:
500 Server Error TypeError: TemplateResponse() missing 1 required positional argument: 'context'
我的FastAPI应用程序:
from fastapi import FastAPI
import uvicorn
from fastapi import Depends, FastAPI
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
import cv2
app = FastAPI(debug=True)
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def index():
return templates.TemplateResponse("index.html")
async def gen_frames(camera_id):
cap= cv2.VideoCapture(0)
while True:
# for cap in caps:
# # Capture frame-by-frame
success, frame = cap.read() # read the camera frame
if not success:
break
else:
ret, buffer = cv2.imencode('.jpg', frame)
frame = buffer.tobytes()
yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
if __name__ == '__main__':
uvicorn.run(app, host="127.0.0.1",port=8000)
我的HTML网页(index.html):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Multiple Live Streaming</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-7">
<h3 class="mt-5">Multiple Live Streaming</h3>
<img src="{{ url_for('video_feed', id='0') }}" width="100%">
</div>
</div>
</div>
</body>
</html>
追溯:
2条答案
按热度按时间iq0todco1#
在使用模板时,您需要传递请求。
因此,您还可以使用StreamingResponse将视频作为另一条路径
然后使用 AJAX 或Axios等获取响应。
aij0ehis2#
使用
Templates
时,需要在端点中声明一个Request
参数,该参数将返回一个模板,如下所示:下面给出了两个选项(包含完整的代码示例),介绍如何流式传输使用FastAPI和
OpenCV
的(实时)视频。选项1根据您的问题,使用HTTP
协议和FastAPI/Starlette的StreamingResponse
演示了一种方法。选项2使用WebSocket
协议,可轻松处理高清视频流,并受FastAPI/Starlette支持(可在here和here中找到相关文档)选项1 -使用
HTTP
协议您可以在http://127.0.0.1:8000/访问实时流媒体。
应用程序.py
模板/索引.html
选项2 -使用
WebSocket
协议您可以在http://127.0.0.1:8000/访问实时流媒体。
应用程序.py
下面是
HTML
模板,用于建立WebSocket
连接、接收图像字节并创建Blob
URL(加载图像后释放该URL,以便随后对对象进行垃圾收集,而不是不必要地保留在内存中),如here所示,以便在浏览器中显示视频帧。模板/索引.html
下面也是一个基于
websockets
库和OpenCV
的Python客户端,您可以使用它连接到服务器,以便在Python应用程序中接收和显示视频帧。客户端.py