I am simply trying to record the webcamera feed if the user, and store the data on server. Now I could wait till recording is done, generate the video file on client end and then upload it to server, but if the client disconnects during the upload process the entire video would be lost. In order to prevent that, I am sending blobs every 1 second to server and attempting to stitch them together in a video. This kind of works, but is not very reliable as sometimes there seems to be no video or corrupt video. My code is below:
I am using RecordRTC js on frontend with socketio and nodejs on the backend.
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(async function(stream) {
console.log('recording started');
recorder = RecordRTC(stream, {
recorderType: MediaStreamRecorder,
mimeType: 'video/webm',
timeSlice: 1000, // 1 second interval
ondataavailable: function(blob) {
socket.emit('store-video',{blob:blob, session:'{{ $sessionId }}'});
console.log('recording blob: ',blob.size);
}
});
recorder.startRecording();
setTimeout(()=>{
recorder.stopRecording();
socket.emit('stop-video',{session:'{{ $sessionId }}'});
console.log('recording stopped');
},20000);
})
And on my server I am doing
//using: npm fs-blob-store
let ws = blobs.createWriteStream({
key: d.session+'/video.webm'
});
socket.ws = ws;
....
...
socket.on('store-video', function(d){
if(socket.ws && d.blob){
console.log('recording data');
socket.ws.write(d.blob);
}
});