In Node Js, how can I write to file chunks uploaded from a video

Question

What I'm trying to do is upload a webcam or audio stream to Nodejs and save it to disk. The goal is to send the data chunks to the server as soon as the data becomes available. I've grabbed the stream from gerUserMedia, setup mediaRecorder and when data is available, I turn the blob into a arrayBuffer and send it to the server. I know the code is wrong as I'm not sure what the proper way is, but when the data is sent to the server, a file is saved, but only 1kb file, where it should be a large video file. How can I do this?

//Client Side

recorder.ondataavailable = (event) => {
      const reader = new FileReader();
      reader.onload = (event) =>{
        recordedChunks.push(event.data);
        sendDataToServer(event.target.result)
      }
      reader.readAsArrayBuffer(event.data)
    }
reader.readAsArrayBuffer(event.data)


//Server-Side

app.post('/media', function (req, res, next) { 

  try {
    const { data } = req.body;
    const dataBuffer = new Buffer(data, 'base64');
    const fileStream = fs.createWriteStream('video.webm');
    fileStream.write(dataBuffer);

  } catch (error) {
    console.log(error);

  }

  })

Answer 1

you can use WebSockets to send recorded chunks from your client to your node js server

const ws = new WebSocket("your server websocket url");
ws.onopen = function () {
  console.log('WebSocket Client Connected');
  
};
ws.onmessage = function (e) {
  console.log("Received: '" + e.data + "'");
};

rec.ondataavailable = (event) => {
  console.log(event.data)
  this.blobs.push(event.data);
  this.blob = new Blob(this.blobs, { type: 'video/webm' });

  if (event.data && event.data.size > 0) {
    ws.send(event.data)

  }
};

//server

const http = require('http');
var WebSocketServer = require('websocket').server;
var fs = require('fs');

const hostname = 'localhost';
const port = 8080;
const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello Worldss12');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

wsServer = new WebSocketServer({
    httpServer: server,
    maxReceivedFrameSize: 2048000,    // Added this line
    maxReceivedMessageSize: 2048000,    // And this line
    
});


wsServer.on('request', function (request) {
    const connection = request.accept(null, request.origin);
    connection.binaryType = 'blob';
    let fileStream = fs.createWriteStream('recording.webm', { flags: 'a' });

    connection.on('message', function (message) {


        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data)
            connection.sendUTF('Hi this is WebSocket servers');
        }
        else if (message.type === 'binary') {
            var fileBuffer = new Buffer(message.binaryData, 'base64');
            fileStream.write(fileBuffer);
            connection.sendUTF(message.binaryData.length)
            //connection.sendBytes(message.binaryData)
            
        }
        

    });
    connection.on('close', function (reasonCode, description) {
        console.log('Client has disconnected.');
        
    });
});

Answer 2

I would look into formidable it offers you some great things to help with file upload. They also have an example using it with express.

form.on('progress', (bytesReceived, bytesExpected) => {});

Give that a shot and let us know how it goes or if you have further questions.