I have been trying to stream video from the webpage to the python server and then process it in python and again send it back to the webpage.
Unfortunately, I cannot send the video to the server from the web page. However, I can successfully stream vedio from server to web page.
For streaming, I am using web-sockets using flask-socketio in python and socketio in java script.
I have attached both the HTML file and the python server file here.
socket.emit('web2server', {data: data});
The above line is not working for me. No errors are being displayed. Either the data is not being emitted, or it is not being received.
Please help me with this.
Following is html file
<!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, video.width, 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, 0, 0, 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>
** FOllowing is python server file**
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', message, 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)
