因此，我想做的是获取客户端网络摄像头捕获的实时视频流，并在后端对其进行处理。
我的后端代码是用Python编写的，我正在使用SocketIo将帧从前端发送到后端。您可以看一下此设计，以更好地了解正在发生的事情-
图片
- 我的服务器（app.py）将在后端运行，并且客户端将访问index.html
- SocketIo连接将建立，使用网络摄像头捕获的视频流将逐帧发送到服务器。
- 然后，这些帧将在后端进行处理并发回客户端。
- 来自服务器的已处理帧可以显示在img标签中。
这是工作代码-
app.py
@socketio.on('image')def image(data_image): sbuf = StringIO() sbuf.write(data_image) # depre and convert into image b = io.BytesIO(base64.b64depre(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) imgenpre = cv2.imenpre('.jpg', frame)[1] # base64 enpre stringData = base64.b64enpre(imgenpre).depre('utf-8') b64_src = 'data:image/jpg;base64,' stringData = b64_src + stringData # emit the frame back emit('response_back', stringData)index.html
<div id="container"> <canvas id="canvasOutput"></canvas> <video autoplay="true" id="videoElement"></video></div><div class = 'video'> <img id="image"></div><script> var socket = io('http://localhost:5000'); socket.on('connect', function(){ console.log("Connected...!", socket.connected) }); 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!"); }); } 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); const FPS = 22; setInterval(() => { cap.read(src); var type = "image/png" var data = document.getElementById("canvasOutput").toDataURL(type); data = data.replace('data:' + type + ';base64,', ''); //split off junk at the beginning socket.emit('image', data); }, 10000/FPS); socket.on('response_back', function(image){ const image_id = document.getElementById('image'); image_id.src = image; });</script>而且，websockets在安全来源上运行。
