问题描述
我一直在尝试将视频从网页流式传输到 python 服务器，然后在 python 中对其进行处理，然后再次将其发送回网页。
很遗憾，我无法将视频从网页发送到服务器。但是，我可以成功地将视频从服务器流式传输到网页。
对于流媒体，我使用了 python 中的flask-socketio 和java 脚本中的socketio 的网络套接字。
我在此处附加了 HTML 文件和 python 服务器文件。
socket.emit('web2server',{data: data});
以上行对我不起作用。没有显示错误。数据要么没有发出，要么没有被接收。
请帮我解决这个问题。
以下是html文件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container">
<canvas id="canvasOutput"></canvas>
<video autoplay="true" id="videoElement"></video>
</div>
<div class="chart-area">
<img id="streamer-image" src="">
</div>
<div>
<p id="streamer-text" style="color:red;"></p>
</div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>
<script>
document.addEventListener("DOMContentLoaded",function(event) {
const image_elem = document.getElementById("streamer-image");
const text_elem = document.getElementById("streamer-text");
var video = document.querySelector("#videoElement");
var socket = io.connect('http://' + document.domain + ':' + location.port + '/web',{
reconnection: false
});
socket.on('connect',() => {
console.log('Connected');
//socket.emit('web2server',"Fucj");
});
socket.on('disconnect',() => {
console.log('disconnected');
});
socket.on('connect_error',(error) => {
console.log('Connect error! ' + error);
});
socket.on('connect_timeout',(error) => {
console.log('Connect timeout! ' + error);
});
socket.on('error',(error) => {
console.log('Error! ' + error);
});
video.width = 500;
video.height = 375;
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
video.play();
let src = new cv.Mat(video.height,video.width,cv.CV_8UC4);
let dst = new cv.Mat(video.height,cv.CV_8UC1);
let cap = new cv.VideoCapture(video);
console.log("cv cap object is created");
const FPS = 22;
setInterval(() => {
cap.read(src);
var type = "image/png"
var data = document.getElementById("canvasOutput").toDataURL('image/jpeg',1.0);
data = data.replace('data:' + type + ';base64,',''); //split off junk at the beginning
//socket.to('web2server').emit('message',data);
//var hidden_canvas = document.querySelector('canvasOutput'),// context = hidden_canvas.getContext('2d');
//context.drawImage(video,width,height);
//snap = hidden_canvas.toDataURL('image/jpeg',1.0);
socket.emit('web2server',{data: "test msg"});
console.log("data emitted");
console.log(data);
$.ajax({
type: "POST",url: "/hello",data:{
imageBase64: data
}
}).done(function() {
console.log('sent');
});
},10000/FPS);
})
.catch(function (err0r) {
console.log(err0r)
console.log("Something went wrong!");
});
}
});
</script>
</html>
** 下面是python服务器文件**
from flask_socketio import SocketIO
from flask import Flask,render_template,request
from PIL import Image
from engineio.payload import Payload
from io import BytesIO
import base64
Payload.max_decode_packets = 500
import eventlet
eventlet.monkey_patch()
app = Flask(__name__)
socketio = SocketIO(app)
@app.route('/')
def entry_page():
#return render_template('app_attendace_usermedia_socket.html')
return render_template('test.html')
@app.route('/hello')
def hello():
print("hello fuction that processes image is executed")
#data_url = request.values['imageBase64']
#data_url = data_url[22:]
#print(data_url)
#im = Image.open(BytesIO(base64.b64decode(data_url)))
#print(type(im))
#im.save('image.jpeg')
return ''
@socketio.on('connect',namespace='/web')
def connect_web():
print('[INFO] Web client connected: {}'.format(request.sid))
@socketio.on('disconnect',namespace='/web')
def disconnect_web():
print('[INFO] Web client disconnected: {}'.format(request.sid))
'''@socketio.on('connect',namespace='/cv')
def connect_cv():
print('[INFO] CV client connected: {}'.format(request.sid))
@socketio.on('disconnect',namespace='/cv')
def disconnect_cv():
print('[INFO] CV client disconnected: {}'.format(request.sid))
@socketio.on('cv2server')
def handle_cv_message(message):
socketio.emit('server2web',message,namespace='/web')
#print('this is data from cv app to server')'''
@socketio.on('web2server')
def handle_web_message(message):
print('data received')
print(message)
#socketio.emit('server2cv',namespace='/cv')
print('data emitted from server')
if __name__ == "__main__":
print('[INFO] Starting server at http://localhost:5001')
socketio.run(app=app,host='0.0.0.0',port=5001,debug=True)
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）