Wie kann ich mit Websocket einen Video-Mediastream von React js an Python senden? ⇐ Python

[Guest]

Mein Ziel ist es, den Videostream eines Benutzers als Array-Puffer mithilfe von Websocket an Python zu senden. Ich bin verwirrt darüber, wie ich getUserMedia dazu bringen kann, ein Array zu streamen und es mithilfe des Fastapi-Websockets an Python zu senden.
Ich teile einige wichtige Teile meines versuchten Codes und hoffe, dass mir jemand bei der Lösung dieses Problems hilft .
Vielen Dank im Voraus.
Mein versuchter Code:
< stark>Reagieren js--

Code: Select all

const userStream = useRef([]);

useEffect(() => {
navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(stream => {
userStream.current.srcobject = stream;

Der Prozess zum Erstellen eines UserStream-Array-Objekts kann nicht ermittelt werden

Code: Select all

  var socket = new WebSocket('ws://localhost:8000/ws')
socket.onopen = () => socket.send(userStream.current.srcobject)

socket.onmessage = function (event) {
console.log("[message] Data received from server:");
if (event.data !== undefined && event.data !== null) {
console.log(event.data)
}
}

socket.onclose = () => {
console.log("Connection Closed!");
};

socket.onerror = () => {
console.log("WS Error");
};

return () => {
socket.close();
};
});

}, []);

return (



);

Python-Code--

Kann die von vorne empfangenen Daten nicht verarbeiten Ende

Code: Select all

from fastapi import FastAPI, WebSocket

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket, data_image):
print("Accepting Connection")
await websocket.accept()
print('Accepted')
while True:
try:

image_bytes = await websocket.receive_bytes()
print('Image Received')
nparr = np.frombuffer(image_bytes, np.uint8)
img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)

# Do something with the image here
# ...
# Send a response back (optional)
_, buffer = cv2.imencode('.jpg', img)
response_bytes = buffer.tobytes()

await websocket.send_bytes(response_bytes)
except:
pass
break