Timeslice blobs are corrupted

[Hothi-Jimit]

Hi there.

Hi, I am facing the issue. The first slice is only playable. The rest of the slices seems to be corrupt.

My Code on Angular 10

startRecording(){
    if (!this.isRecording){
      this.isRecording = true;
      navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(s => {
        this.stream = s;
        this.video.nativeElement.srcObject = this.stream;

        this.video.nativeElement.muted = 'muted';
        // tslint:disable-next-line: prefer-const
        var thatRef = this;
        this.recorder = new RecordRTC.MediaStreamRecorder(this.stream, {
          type: 'video',
          mimeType: 'video/webm;codecs=vp9',
          numberOfAudioChannels: 1,
          timeSlice: 20000,
          videoBitsPerSecond: 180000,
          ondataavailable(blob) {

            // tslint:disable-next-line: prefer-const
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = (e) => {
              thatRef.base64data = reader.result;
              const formPayload = {
                duration: ((new Date().getTime() - thatRef.questionStartTime) / 1000),
                order: thatRef.chunkNumber,
                file: thatRef.base64data,
                fileName: thatRef.chunkNumber + '.webm'
              };
              thatRef.questionStartTime = new Date().getTime();
              thatRef.chunkNumber = thatRef.chunkNumber + 1;
              thatRef.api.post(thatRef.utils.apiVersion, thatRef.appModuleInterface.saveChunkAPI, formPayload).subscribe(response => {
                console.log('Enter in a startRecording() method. Success()');
              }, (error) => {
                  this.logger.error('error : ' + JSON.stringify(error));
              });
            };
          }
        });

        this.recorder.record();
        this.questionStartTime = moment();
      });
    }
  }

[bakaiadam]

i have the same problem. I thought i was doing something wrong.

[gypsicoder]

I have the same problem also.

[farizyoga]

does the first sliced video playable?

[gypsicoder]

@farizyoga Yes, the first sliced video playable. And what I have found is, if I merge all the slices then the whole thing is playable. I think the slices except the first slice doesn't contain required metadata to play the slices alone.

[farizyoga]

yea, it should be merged first, then all videos playable

[MichaelJC91]

Is there a way around that issue? I want to upload the chunks on dataavailable callback and join them on the server after the recording is finished.

[farizyoga]

@MichaelJC91 , i am able to merge the chunked file in the server (PHP) by doing this

foreach ($chunks as $chunk) { file_put_contents('file.webm', file_get_contents($chunk), FILE_APPEND); }

note that $chunks variable is array of chunk file path

[MichaelJC91]

@farizyoga my flow at the moment is I upload the chunks to an S3 bucket then I plan to combine them at a later time. How would I go about this using something like Node?

[farizyoga]

you should retrieve all chunked videos first, then process the video with your Node server or PHP server

cmiiw