I am trying to build a client server where the live video stream from user's webcam will be captured using getUserMedia() in the browser and send to the backend flask server using Socket.IO, the flask server will then process the frame and send it back to the browser in real time. I tried to implement the code from How to stream live video frames from client to flask server and back to the client? and made some modification, but the error keep showing up in the console
Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=1611033674638-0' from origin 'null' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. Anyone know how to fix it?
app.py
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from PIL import Image
app = Flask(__name__)
socketio = SocketIO(app)
@socketio.on('image')
def image(data_image):
# decode and convert into image
b = io.BytesIO(base64.b64decode(data_image))
pimg = Image.open(b)
## converting RGB to BGR, as opencv standards
frame = cv2.cvtColor(np.array(pimg), cv2.COLOR_RGB2BGR)
# Process the image frame
frame = imutils.resize(frame, width=700)
frame = cv2.flip(frame, 1)
imgencode = cv2.imencode('.jpg', frame)[1]
# base64 encode
stringData = base64.b64encode(imgencode).decode('utf-8')
b64_src = 'data:image/jpg;base64,'
stringData = b64_src + stringData
# emit the frame back
emit('response_back', stringData)
if __name__ == '__main__':
socketio.run(app, host='127.0.0.1')
client.html
<div id="container">
<canvas id="canvasOutput"></canvas>
<video autoplay="true" id="videoElement"></video>
</div>
<div class = 'video'>
<img id="image">
</div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script async src="opencv.js"></script>
<script>
// Establish socket connection
socket = io('http://127.0.0.1:5000');
socket.on('connect', function(){
// console.log("Connected...!", socket.connected)
console.log('Client has connected to the server!')
});
const video = document.querySelector("#videoElement");
video.width = 500;
video.height = 375; ;
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
video.play();
})
.catch(function (err0r) {
console.log(err0r)
console.log("Something went wrong!");
});
}
video.onload = function() {
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);
//Frame per second
const FPS = 22;
setInterval(() => {
cap.read(src);
var type = "image/png"
var data = document.getElementById("canvasOutput").toDataURL(type);
data = data.replace('data:' + type + ';base64,', '');
socket.emit('image', data);
}, 10000/FPS);
}
</script>
