实现目标识别后端与前端的视频流和识别结果同步展示
在这篇博客中，我们将探讨如何使用服务器发送事件（Server-Sent Events，SSE）技术，将目标识别后端的视频流和识别结果实时传输到前端，以实现视频和结果的同步展示。
在这篇博客中，我们将探讨如何使用服务器发送事件（Server-Sent Events，SSE）技术，将目标识别后端的视频流和识别结果实时传输到前端，以实现视频和结果的同步展示。
后端代码
首先，让我们看一下后端的Python代码，它使用Flask框架来创建一个Web应用程序，将视频流和识别结果打包成JSON格式，并使用SSE向前端实时发送这些数据。
from flask import Flask, Response
import cv2
import base64
import json
app = Flask(__name__)
# 视频文件路径
video_path = '1.mp4'
# 初始化识别结果
recognition_result = "这是一个示例识别结果."
def generate_frames():
cap = cv2.VideoCapture(video_path)
while True:
success, frame = cap.read()
if not success:
break
ret, buffer = cv2.imencode('.jpg', frame)
frame_bytes = buffer.tobytes()
frame_base64 = base64.b64encode(frame_bytes).decode('utf-8')
data = {
"frame": frame_base64,
"recognition_result": recognition_result
}
data_json = json.dumps(data)
yield f"data: {data_json}\n\n"
@app.route('/video_feed')
def video_feed():
return Response(generate_frames(), content_type='text/event-stream')
if __name__ == '__main__':
app.run(debug=True)
前端代码
接下来，让我们看一下前端的JavaScript代码，它使用SSE来接收从后端传输的视频流和识别结果，并将它们展示在网页上。
const eventSource = new EventSource("/video_feed");
// 监听 SSE 事件
eventSource.onmessage = (event) => {
const eventData = JSON.parse(event.data);
// 获取识别结果
const recognitionResult = eventData.recognition_result;
// 获取视频流
const videoFrameData = eventData.frame;
// 在页面上展示识别结果
const resultElement = document.getElementById("recognitionResult");
resultElement.innerHTML = recognitionResult;
// 在页面上展示视频流
const videoFrameElement = document.getElementById("videoFrame");
videoFrameElement.src = `data:image/jpeg;base64, ${videoFrameData}`;
}
HTML结构
最后，这是一个简单的HTML结构，用于在页面上展示识别结果和视频流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>目标识别展示</title>
</head>
<body>
<h1>目标识别结果：</h1>
<p id="recognitionResult"></p>
<h1>视频流：</h1>
<img id="videoFrame" src="" alt="视频流">
<script src="your-js-file.js"></script>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)