后端部分:
from flask import Flask
from flask_socketio import SocketIO
import cv2
import base64
import time
app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")
def video_stream():
video = cv2.VideoCapture('you.mp4')
while True:
success, frame = video.read()
if not success:
break # 视频结束或出错则退出循环
# 将帧编码为JPEG格式
ret, buffer = cv2.imencode('.jpg', frame)
if not ret:
continue # 编码失败,则跳过此帧
# 将编码后的帧转换为Base64字符串
frame_base64 = base64.b64encode(buffer).decode('utf-8')
# 发送图像帧数据
socketio.emit('image_frame', {'image_data': 'data:image/jpeg;base64,' + frame_base64})
# 控制帧率
time.sleep(1 / 30) # 假设视频是30fps
@socketio.on('connect')
def handle_connect():
print('Client connected')
socketio.start_background_task(video_stream)
if __name__ == '__main__':
socketio.run(app, debug=True, host='0.0.0.0', port=5002)
前端部分(vue3):
<template>
<div>
<img :src="currentImage" alt="Video Stream">
</div>
</template>
<script setup>
import { ref } from 'vue';
import { io } from 'socket.io-client';
const currentImage = ref('');
// 连接到WebSocket服务器
const socket = io('http://192.168.0.107:5002');
socket.on('image_frame', (data) => {
// 更新当前图像
currentImage.value = data.image_data;
});
</script>
前端部分(静态页面):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Stream</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script type="text/javascript">
const socket = io.connect('http://192.168.0.107:5002');
socket.on('connect', function() {
console.log('Connected to the WebSocket server!');
});
socket.on('image_frame', function(data) {
// 更新<img>标签的src属性以显示新的图像帧
document.getElementById('video-frame').src = data.image_data;
});
</script>
</head>
<body>
<img id="video-frame" alt="Video Stream"/>
</body>
</html>