我实际上正在使用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视频文件并将其直接发送到我的后端。