2

I am recording a webcam-video through recordRTC which has an ondataavailable callback which is called every 2000 milliseconds. The ondataavailable method provides a Blob as parameter, so it will always contain the current video blob. I would like to upload the video in slices to the server while the recording is ongoing to avoid having a big file to upload in the end as one.

For that, the blobs are sliced with Blob.slice():

ondataavailable(blob) {
        // Create a new blob from last blob size to the end of the blob
        const sliceBlob = blob.slice(this._state.lastBlobSize, blob.size, blob.type)
        this.setState('lastBlobSize', blob.size)
        this.fileHandler.upload(sliceBlob)
}

When I upload the blobs to the server and convert them to .webm videos which are later concatenated again using FFMpeg, only the first blob is a valid video, but every following webm-file does not play.

Here is what the logged blobs look like: enter image description here

I assume that the blobs are invalid due to the byte-length not containing valid sizes or something like that, so all videos after the first start with an illegal offset and can not be read therefore. But I have no idea how to change the slices to get properly working parts.

Also, the videoBitsPerSecond is set to 128000 * 4 on the recordRTC config, which would be 32000 byte per video slice (16000 per second) which might help finding the correct offset. Hover, looking at the "sliced blob" sizes, this does not seem to directly correlate - the blob sizes are bigger.

If there is no way to easily perform the slices like this, is there another way to achieve "streaming" smaller files to the server while the recording is ongoing?

Edit:

As to CBroe's comment, I modified the controller to do the following when a blob is received:

            $filePath = "/var/www/html/public/assets/blob.webm";
            $fp       = fopen($filePath, file_exists($filePath) ? "a" : "w");
            fwrite($fp, file_get_contents($_FILES["blob"]["tmp_name"]));
            fclose($fp);

So it will always append the latest blob to the complete file. However, the file is still invalid when the video is properly stopped and the last blob is uploaded. Any suggestions?

marks
  • 1,501
  • 9
  • 24
  • 1
    Well if you started by slicing something, then the _first_ step on the receiving end should probably be to undo that slicing again. _“When I upload the blobs to the server and convert them to .webm videos which are later concatenated again using FFMpeg”_ - why would you convert the slices, which in themselves are probably not all valid videos, into webm? Treat this a unspecified binary data, until you are able to put it all together again (concatenating all the slices together again) - and only then process the full thing _as_ video data again afterwards. – CBroe Mar 01 '21 at 10:16
  • Ok I see what you mean, just store the binary data raw and in the end throw everything together in a single `.webm` file... that makes sense and completely omits the need of concatinating through ffmpeg. Overcomplicated things here I gues... I will try that. Thank you! – marks Mar 01 '21 at 10:28

0 Answers0