I'm trying to create an app where I can send Webcam video from a browser MediaRecorder via Websocket to a node server which will hold the chunked data in memory and serve it via and endpoint handler.

I can receive the data, create a Passthrough stream, and serve the endpoint, but the html5 video player which appears displays nothing. I'm not sure where I've gone wrong.

client:

serverVideoStreamConnection = new WebSocket('wss://' + window.location.hostname + ':8443/'); serverVideoStreamConnection.binaryType = "arraybuffer"; if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(constraints).then(recordStream).catch(errorHandler); } else { alert('Your browser does not support getUserMedia API'); } } function recordStream(stream) { console.log("Started recording") mediaRecorder = new MediaRecorder(stream); mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.start(10); function handleDataAvailable(event) { if (event.data.size > 0) { serverVideoStreamConnection.send(event.data); } else { // ... console.log("Data not available") } }

server: