Corrupt video uploads when chunking MediaRecorder to Google Cloud platform

I currently am using react hook powered component to record my screen, and subsequently upload it to Google Cloud Storage. However, when it finishes, the file created inside Google Cloud appears to be corrupt.

This is the gist of the code within my React component, where useMediaRecorder is from here: https://github.com/wmik/use-media-recorder

let {
    error,
    status,
    mediaBlob,
    stopRecording,
    getMediaStream,
    startRecording,
    liveStream,
  } = useMediaRecorder({
    onCancelScreenShare: () => {
      stopRecording();
    },
    onDataAvailable: (chunk) => {
      // do the uploading here:
      onChunk(chunk);
    },
    recordScreen: true,
    blobOptions: { type: "video/webm;codecs=vp8,opus" },
    mediaStreamConstraints: { audio: audioEnabled, video: true },
  });

As data becomes available through this hook – it calls onChunk( chunk ) passing a binary Blob through to that method, to perform the upload, I tie in with this section of code to perform the upload:

 const onChunk = (binaryData) => {
    var formData = new FormData();
    formData.append("data", binaryData);
    let customerApi = new CustomerVideoApi();
    customerApi.uploadRecording(
      videoUUID,
      formData,
      (res) => {},
      (err) => {}
    );
  };

customerApi.uploadRecording looks like this (using axios).

const uploadRecording = (uuid, data, fn, fnErr) => {
    axios
      .post(endpoint + "/stream/upload", data, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then(function (response) {
        fn(response);
      })
      .catch(function (error) {
        fnErr(error.response);
      });
  };

The HTTP request succeeds, and all is well with the world: the server side code to upload is based on laravel:

// this is inside the controller.

 public function index( Request $request )
    {

            // Set file attributes.
            $filepath = '/public/chunks/';
            $file = $request->file('data');
            $filename = $uuid . ".webm"; 
          
            // streamupload
            File::streamUpload($filepath, $filename, $file, true);

            return response()->json(['uploaded' => true,'uuid'=>$uuid]);
      
    }

// there’s a service provider used to create a new macro on the File:: object, providing the facility for appropriate handling the stream:

public function boot()
    {
        File::macro('streamUpload', function($path, $fileName, $file, $overWrite = true) {
            
            $resource = fopen($file->getRealPath(), 'r+');
           
            $storageClient = new StorageClient([
                'projectId' => 'myprjectid',
                'keyFilePath' => '/my/path/to/servicejson.json',
            ]);
            
            $bucket = $storageClient->bucket('mybucket');
            $adapter = new GoogleStorageAdapter($storageClient, $bucket);
            $filesystem = new Filesystem($adapter);

            return $overWrite 
                    ? $filesystem->putStream($fileName, $resource) 
                    : $filesystem->writeStream($fileName, $resource);
        });
    }

So to reiterate:

  1. React app chunks out blobs,
  2. server side determines if it should create or append in Google Cloud Storage
  3. server side succeeds.

4) Video inside Google Cloud platform is corrupted.

However, the video file, inside the Google Cloud container is corrupted and won’t play. I’m unsure exactly why it is corrupted, but my guesses so far:

  1. Some sort of Dodgy Mime type problem.. – different browsers seem to handle the codec / filetype differently from the mediarecorder: e.g. Chrome seems to be x-matroska (.mkv?) – firefox different again.. Ideally I would have a container of .webm – notice how I set the file name server side, and it isn’t coming from the client. Should it? I’m unsure how to force the MediaRecorder to be a specific mimeType – I thought the blobOptions option should do it, but changing the extension and mime type seems to have little to no impact on the corruption occurring.

  2. Some sort of problem during upload where an HTTP request doesn’t execute and finish in order – e.g.

1 onDataAvailable completes second
2 onDataAvailable completes first
3 onDataAvailable completes third

I’ve sort of ruled this out because I think the chunks should be small enough.

  1. Some sort of problem with Google Cloud Storage APIs that I’m using, perhaps in the wrong way? Does the cloud platform support streaming, and does this library send the correct params to do so?

  2. Some sort of problem with how I’m uploading – should the axios headers be multipart formdata, or something else?

This is the package I’m using for the Server side: https://github.com/Superbalist/flysystem-google-cloud-storage

Can anyone could shed any light on how to achieve this goal of streaming up into Google Cloud without the video from the mediarecorder being corrupted? Hopefully there’s enough detail here in the question to help figure it out.

Source: Laravel

Leave a Reply