如何正确下载和发送Blob视频? (Firefox / Chrome)

时间:2019-07-15 02:33:21

标签: html angular firebase blob firebase-storage

我实际上正在使用Angular7开发一个应用程序,当他直接在网站上观看视频时,该应用程序会捕获用户网络摄像头。 视频结束后,我需要将摄像机视频直接发送到我的firebaseStore。 我的问题是我可以下载视频,但是我必须先下载它,然后再使用HTML输入在应用程序中再次上传它,因为我使用Blob URL来获取视频,而我没有找不到任何将其自动发送到我的firebaseStore的方法。

我已经在寻找不同的下载或直接在我的应用程序中获取我的Blob URL的方式,但是到目前为止,实际上还没有任何工作...

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>

目前,我只能使用下载html下载blob文件,然后将其上传到输入中。 我正在寻找一种解决方案,使我可以下载blob视频文件并将其直接发送到我的后端。

0 个答案:

没有答案