muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

Home Page:https://www.webrtc-experiment.com/RecordRTC/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using RecordRTC with AWS Multipart Upload for Real-time Uploading

mardesnic opened this issue · comments

I am developing a 1 on 1 video call web app leveraging WebRTC (using the simple-peer library) and I'm using RecordRTC to record the calls on the client-side.

Current Workflow:

  1. Combine the local and remote stream using MultiStreamsMixer.
  2. Record the combined streams with RecordRTC.
  3. Upload to AWS S3 once recording is stopped.

This has been working well.

Objective: I'd like to reduce the waiting time for users post-call by uploading the video while the call is ongoing.

Proposed Workflow & Question:

I'm exploring the possibility of utilizing the timeSlice and ondataavailable options from RecordRTC to obtain chunks of the stream as it's being recorded, and then uploading these chunks in real-time to AWS using multipart upload. Here are my questions:

  1. Is this feasible with RecordRTC?
  2. If so, are there any potential pitfalls or challenges I should be aware of, especially concerning the size and consistency of the chunks?
  3. Are there any examples of this?

Thank you in advance for any guidance!

Interested in this too

Super curious about your existing workflow @mardesnic, is this complex to build?
I'm basically trying to build the same thing

@RobinLbt, I've successfully implemented this, and it's been performing great!

I am working on React TypeScript frontend for the recording and uploading, paired with a Node.js backend to handle AWS S3 interactions (such as obtaining the uploadId, fetching the part signed URL, aborting uploads, and completing them).

One small challenge I encountered was AWS S3's minimal upload size requirement for multipart uploads: each part must be at least 5MB, except for the last part which can be any size. I had initially tried to upload slices as soon as they were generated, but due to the size restriction, I had to create an accumulator. This accumulator would collect the data until it had a minimum of 5MB and then upload that chunk.

Hey @mardesnic,

I'd like to split 2-second recordings into chunks using RecordRTC and upload them to AWS S3. My goal is to avoid delaying the upload time while serving the recorded video to users. Have you made any progress on this, and can I review the code base?

To answer to my own questions so I can close this:

  1. Is this feasible with RecordRTC?

Yes, I managed to build this with RecordRTC by leveraging timeSlice and ondataavailable:

      let recorder = new RecordRTC(mixedStream, {
        ...(multipartUploadEnabled
          ? {
              timeSlice: 5 * 1000,
              ondataavailable: addUploadPart,
            }
          : {}),
        mimeType: 'video/webm;codecs=vp8',
        disableLogs: true,
      });
      recorder.startRecording();
  1. If so, are there any potential pitfalls or challenges I should be aware of, especially concerning the size and consistency of the chunks?

Parts for uploading need to be at least 5MB (except the last chunk), so timeSlices need to be accumulated before uploading them, here are some helper functions:

const concatenateBlobs = (blobs: Blob[], contentType: string) => {
  return new Blob(blobs, { type: contentType });
};
const calculateBlobSize = (blobs: Blob[]) => {
  return blobs.reduce((totalSize, blob) => totalSize + blob.size, 0);
};
  1. Are there any examples of this?

I didn't find any examples, and @ozkalai I unfortunately can't share my code base.