How to download and send blob video properly ? (Fi

问题:

I'm actually developing an application with Angular7 which capture the user webcam when he his watching a video directly on the website. When the video is over, I need to send the camera video directly to my firebaseStore. My problem is that I can download my video, but I have to download it first, and then upload it again in the app using an HTML input, because I'm using a blob URL in order to get the video, and I didn't find any way to send it automatically to my firebaseStore.

I have already look on differents way to download or to get my blob URL directly in my app, but nothing's really working so far ...

public prepareArchive(event) {
  if (event.target.files.length > 0) {
    for (let i = 0; i < event.target.files.length; i++) {
      this.messageArchive = `Preparing the archive: ${event.target.files[i].name}`;
      this.numberArchive = event.target.files[i].name;
      this.dataForm.delete('archive');
      this.dataForm.append('archive', event.target.files[i], event.target.files[i].name)
    }
  } else {
    this.messageArchive = 'There is not a selected file';
  }
}

public sendArchive() {
  let archive = this.dataForm.get('archive');
  let reference = this.firebaseStorage.referenciaCloudStorage(this.numberArchive);
  let task = this.firebaseStorage.tareaCloudStorage(this.numberArchive, archive);

  task.percentageChanges().subscribe((percentage) => {
    this.percentage = Math.round(percentage);
    if (this.percentage == 100) {
      this.percentageEnd = true;
    }
  });

  reference.getDownloadURL().subscribe((URL) => {
    this.URLPublicated = URL;
  });
}


ngOnInit() {
  this.myForm = new FormGroup({
    'feedback': new FormControl(null),
    'video': new FormControl(null),
  });


  this.selectedFile = this.videoService.webcamRecorder.chunks;
  //This is the variable where I put the webcam Video !
);
const data = this.selectedFile;
console.log(data);
const blob = new Blob([data], {
  type: 'video/webm'
});

this.videoSend = data;
this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));
this.videoName = Date();
}

<div class="container">
  <div class="container_form">
    <h1 class="is-size-1">
      Send Datas to Firebase
    </h1>
    <a [href]="fileUrl" download="{{ videoName }}" type="video/webm">
	      Download And send the vidéo
	    </a>
    <form [formGroup]="archiveForm" (ngSubmit)="sendArchive()">
      <div class="file has-name is-boxed">
        <label class="file-label">
          <input class="file-input" type="file" formControlName="archiveForm" (change)="prepareArchive($event)">
        </label>
      </div>
      <hr>
      <progress *ngIf="percentage > 0 && percentage < 100" class="progress is-large is-success" value="{{percentage}}" max="100">{{percentage}}%</progress>
      <button [ngClass]="{'button': true, 'is-success': true, 'is-large': true, 'is-loading': percentage > 0 && percentage < 100}" [disabled]="!archiveForm.valid && (percentage > 0 && percentage < 100)">
	    Send The video
     	 </button>
    </form>
  </div>
</div>

For the moment, I can only download the blob file using the download html, and then upload it in an input. I'm looking for a solution that offer me the possibility to download and send the blob video file directly to my backend.