Can't preview the video recorded when downloaded - RecordRTC

问题

steps that will reproduce the problem : I am recording a video using camera of my device using recordRTC and save and download the recorded video. After downloading the recorded video, I can only hear the audio but cannot see the video in my ipad/windows 10 machine . (Suspecting that webm video format is not supported.)

  initMediaRecorder(mediaStream: MediaStream) {
     this.mediaRecorder = new window['MediaRecorder'](mediaStream, mimeType: 'video/webm');
     const recordedChunks = [];
// zone.js doesn't patch mediaRecorder
// to make change detection work the callback has to be executed inside a zone
     this.mediaRecorder.ondataavailable = e => {
     this._zone.run(() => {
        if (e.data.size > 0) {
           recordedChunks.push(e.data);
         }
        });
     };
this.mediaRecorder.onstop = () => {
  this._zone.run(() => {
    this.isRecordingVideo = false;
    this.recordedVideo = new Blob(recordedChunks, { type:  'video/webm'});
    this.letGoOffCamera();
    this.isPreviewing = true;
    this.liveFeedElement.nativeElement.srcObject = null;
    this.liveFeedElement.nativeElement.src = URL.createObjectURL(this.recordedVideo);
    this.liveFeedElement.nativeElement.muted = false;
    this.liveFeedElement.nativeElement.controls = true;
    this.isRecordingVideoPaused = false;
    this.videoRecordEnded = true;
  });
};
this.mediaRecorder.onstart = () => this._zone.run(() => this.isRecordingVideo = true, 
this.isRecordingVideoPaused = false);
/**
  * onpause();
 * onResume();
 */
this.mediaRecorder.onpause = () => {
  this._zone.run(() => {
    this.isRecordingVideoPaused = true;
    this.isRecordingVideo = false;
    console.log("recordedChunks", recordedChunks);
    this.recordedVideo = new Blob(recordedChunks, { type: 'video/webm' });
    this.isPreviewing = true;
    this.liveFeedElement.nativeElement.src = URL.createObjectURL(this.recordedVideo);

  });
};
this.mediaRecorder.onresume = () => this._zone.run(() => this.isRecordingVideoPaused = false, 
this.isRecordingVideo = true);
}

What is the expected result?

To download the response which is being received as Content-Type: application/octet-stream into local machine(ipad/windows) and play it using applications

getDocumentToShow(blobObj){
  this.service.getDocument(url,blobObj).subscribe((data:any)=>{      
    var blob = new Blob([data], {type: "octet/stream"});
    this.objectUrl = URL.createObjectURL(blob);   
    //followed by creating a anchor tag and downloading it
  })
}

Here is response format from service:

What happens instead?

able to download the file as video video.webm but when tried to play the file it doesnt show video but can hear the recorded audio

来源：https://stackoverflow.com/questions/60965143/cant-preview-the-video-recorded-when-downloaded-recordrtc

标签

javascript