实现目标识别后端与前端的视频流和识别结果同步展示

最新推荐文章于 2024-08-27 17:22:19 发布

qq_41471097

最新推荐文章于 2024-08-27 17:22:19 发布

阅读量892

点赞数

CC 4.0 BY-SA版权

文章标签：前端音视频计算机视觉 python html5 javascript 交互

本文链接：https://blog.csdn.net/qq_41471097/article/details/133678776

在这篇博客中，我们将探讨如何使用服务器发送事件（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>