I hope to be as properly concise as possible.
The process:
First I start by send chunks from a stream via MediaRecorder and socket.io to my node server. The server then appends the blob.data that was sent to a static variable. Then a user starts a video stream with a given url to my node server which returns a buffer of video/mp4 data.
The code:
Client sends stream recording via MediaRecorder and socket.io:
successCallback(stream) {
if (MediaRecorder.isTypeSupported('video/mp4')) {
this.options = { mimeType: 'video/mp4' };
}
this.video.srcObject = stream;
this.video.play();
this.mediaRecorder = new MediaRecorder(stream, this.options);
this.mediaRecorder.ondataavailable = this.handleDataAvailable.bind(this);
this.mediaRecorder.start(3000);
}
handleDataAvailable(blob) {
// POST/PUT "Blob" using FormData/XHR2
this.signalHub.sendStream(blob.data);
}
public sendStream(stream) {
this.socket.emit('send-stream', stream);
}
Server receives the data:
socket.on('send-stream', (newStreamBuff) => {
//stream = Buffer.concat([headerStream, newStreamBuff]);
stream = newStreamBuff;
console.log(stream);
console.log(stream[0]);
});
Client starts the stream
startExternalVideo() {
this.recordedVideo.srcObject = 'http://ec2-xx-xx-xxx-xxx.compute-1.amazonaws.com:4040/video';
let promise = this.recordedVideo.play();
if (promise !== undefined) {
promise.then(datas => {
console.log(datas);
}).catch(error => {
console.log(error);
});
}
}
Server gets the request that the user started the stream:
app.get('/video', function(request, response){
const head = {
'Content-Length': stream.byteLength,
'Content-Type': 'video/mp4',
}
response.writeHead(200, head);
response.write(stream, 'binary');
response.end(null, 'binary');
});
This sort of works. If it stops recording before the second buffer is sent to the server. I can go to the link provided to get the stream and see the first buffer (It's only two seconds long). But anything else after that, I can't view it. The stream is also not continuous (viewing one buffer to another (which seems like another problem)).
Now here is what I'm trying to fix. It seems like each buffer after the first buffer sent doesn't send the file signature. Notice:
<Buffer 1a 45 df a3 a3 42 86 81 01 42 f7 81 01 42 f2 81 04 42 f3 81 08 42 82 88 6d 61 74 72 6f 73 6b 61 42 87 81 04 42 85 81 02 18 53 80 67 01 ff ff ff ff ff ... >
<Buffer 8c 81 0b 40 80 fb 03 ff fe ff fe ff fe a3 8c 81 0b 7c 80 fb 03 ff fe ff fe ff fe a3 45 51 82 0b 7c 00 00 00 00 01 09 30 00 00 00 01 61 9a 57 8b d5 ca ... >
<Buffer 8c 81 07 80 80 fb 03 ff fe ff fe ff fe a3 42 43 82 07 80 00 00 00 00 01 09 30 00 00 00 01 61 9a 3b 84 10 27 82 13 f6 77 9c 4f 0c 8a e3 85 70 d8 a7 c5 ... >
Notice the first four hexadecimals in the buffer.
1a 45 df a3
That is the webM file signature. I think because the other buffers don't have that file signature is the reason why I can't or view the other buffers when my node server gets updated.
