Skip to content

Instantly share code, notes, and snippets.

@llucasshenrique
Last active December 28, 2017 18:45
Show Gist options
  • Save llucasshenrique/3ee8ac3117410eb7e01217302acfb626 to your computer and use it in GitHub Desktop.
Save llucasshenrique/3ee8ac3117410eb7e01217302acfb626 to your computer and use it in GitHub Desktop.
Firebase storage video
import { AngularFireAuth } from 'angularfire2/auth';
import { FirebaseStorageProvider } from './../firebase-storage/firebase-storage';
import { File } from '@ionic-native/file';
import { FilePath } from '@ionic-native/file-path';
import { FileChooser } from '@ionic-native/file-chooser';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { MediaCapture,
CaptureVideoOptions,
MediaFile,
CaptureError,
CaptureImageOptions,
MediaFileData } from '@ionic-native/media-capture';
import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';
import * as firebase from 'firebase';
import { Observer } from "rxjs/Observer";
import { Observable } from "rxjs/Observable";
import { MediaInfo } from "../../models/media-info/media-info";
declare var window: any;
@Injectable()
export class CameraProvider {
constructor(
private fileChooser: FileChooser,
private filePath: FilePath,
private file: File,
private mediaCapure: MediaCapture,
private firebaseStorageProvider: FirebaseStorageProvider) {
}
private makeFileIntoBlob(filePath, type): Promise<Blob> {
return new Promise((resolve, reject) => {
window.resolveLocalFileSystemURL(filePath, (fileEntry) => {
fileEntry.file((resultFile) => {
var reader = new FileReader();
reader.onloadend = (event: any) => {
var fileBlob: any = new Blob([event.target.result], { type: type });
resolve(fileBlob);
};
reader.onerror = (e) => {
alert('Failed file read: ' + e.toString());
reject(e);
};
reader.readAsArrayBuffer(resultFile);
});
});
});
}
captureVideo(): Observable<firebase.storage.UploadTaskSnapshot> {
const options: CaptureVideoOptions = { limit: 1 }
return new Observable((subscriber) => {
this.mediaCapure.captureVideo(options)
.then( (mediaFiles: MediaFile[]) => {
mediaFiles.map( mediaFile => {
this.filePath.resolveNativePath(mediaFile.fullPath)
.then(file => {
this.firebaseStorageProvider.upload(file, mediaFile)
.subscribe((upload: firebase.storage.UploadTaskSnapshot) => {
subscriber.next(upload)
}, (error) => {
subscriber.error(error)
}, () => {
subscriber.complete()
})
})
})
})
})
}
capturePhoto(): Observable<firebase.storage.UploadTaskSnapshot> {
const options: CaptureImageOptions = { limit: 1 }
return new Observable((subscriber) => {
this.mediaCapure.captureVideo(options)
.then( (mediaFiles: MediaFile[]) => {
mediaFiles.map( mediaFile => {
this.filePath.resolveNativePath(mediaFile.fullPath)
.then(file => {
this.firebaseStorageProvider.upload(file, mediaFile)
.subscribe((upload: firebase.storage.UploadTaskSnapshot) => {
subscriber.next(upload)
}, (error) => {
subscriber.error(error)
}, () => {
subscriber.complete()
})
})
})
})
})
}
}
import { LoadingController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { Pipe } from '@angular/core';
import { AngularFireOfflineDatabase } from 'angularfire2-offline';
import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
declare var window: any;
@Pipe({ name: 'fileSize' })
@Injectable()
export class FirebaseStorageProvider {
constructor(private afoDB: AngularFireOfflineDatabase,
private loadingCtrl: LoadingController,
private afAuth: AngularFireAuth) { }
private generateUUID(): string {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
makeFileIntoBlob(filePath, name, type) {
return new Promise((resolve, reject) => {
window.resolveLocalFileSystemURL(filePath, (fileEntry) => {
fileEntry.file((resFile) => {
var reader = new FileReader();
reader.onloadend = (evt: any) => {
var imgBlob: any = new Blob([evt.target.result], { type: type });
imgBlob.name = name;
resolve(imgBlob);
};
reader.onerror = (e) => {
alert('Failed file read: ' + e.toString());
reject(e);
};
reader.readAsArrayBuffer(resFile);
});
});
});
}
uploadVideo(video, videoData, extension, userId) {
let loader = this.loadingCtrl.create({content: '<p>O video está sendo enviado por favor aguarde...</p>'})
let storageRef = firebase.storage().ref();
let videoName = this.generateUUID();
let videoInfo: firebase.storage.Reference;
let videoRef = storageRef.child(`/video/${userId}/${videoName}.${extension}`);
loader.present();
videoRef.put(video.blob, videoData)
.on(firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {
let videoTotalBytes = Math.round(snapshot.totalBytes);
let videoTransferredBytes = Math.round(snapshot.bytesTransferred);
let percent = (videoTransferredBytes / videoTotalBytes) * 100;
videoInfo = snapshot.ref;
loader.setContent(`<p>Upload: ${this.transform(videoTransferredBytes)} / ${this.transform(videoTotalBytes)}, ${Math.round(percent)}%</p>`);
},
(error) => {
loader.setContent(`${error}`);
setTimeout(() => loader.dismiss(), 3000);
alert(error);
console.log(`Error no upload ${error}`);
},
() => {
videoRef.getDownloadURL()
.then( dURL => {
console.log(videoRef);
loader.setContent(`<p>Upload Completo.</p>`);
this.saveVideoRef(videoInfo, dURL, userId );
setTimeout(() => loader.dismiss(), 2000);
let videoReturn = [{
name: videoRef.name,
bucket: videoRef.bucket,
fullPath: videoRef.fullPath,
downloadURL: dURL}];
return videoReturn;
});
return videoInfo
});
};
private saveVideoRef(videoRef: firebase.storage.Reference, downURL, userId: string) {
console.log('Salvando dados no DB');
console.log('Video Ref >>'+ videoRef.getMetadata());
console.log('userId >>'+ userId);
console.log("Push video info");
return this.afoDB.list(`/video/${userId}`).push({
name: videoRef.name,
bucket: videoRef.bucket,
fullPath: videoRef.fullPath,
downloadURL: downURL
});
}
private units = [ 'bytes', 'kB', 'MB', 'GB', 'TB', 'PB'];
transform(bytes: number = 0, precision: number = 2 ) : string {
if ( isNaN( parseFloat( String(bytes) )) || ! isFinite( bytes ) ) return '?';
let unit = 0;
while ( bytes >= 1024 ) {
bytes /= 1024;
unit ++;
}
return bytes.toFixed( + precision ) + ' ' + this.units[ unit ];
}
uploadImage(image: string, userId: string): any {
console.log("Upload Image firebase.ts");
console.log(`Upload Image firebase.ts>> ${image.length}`);
let storageRef = firebase.storage().ref();
let imageName = this.generateUUID();
let imageRef = storageRef.child(`/images/${userId}/${imageName}.jpg`);
this.uploadImageSave(imageName, userId);
return imageRef.putString(image);
}
private uploadImageSave(imageName: string, userId: string) {
this.afoDB.list(`/images/${userId}`).push(`${imageName}.jpg`);
}
getImage(imageId: string, userId: string): any {
let storageRef = firebase.storage().ref();
let imageRef = storageRef.child(`${userId}/${imageId}`);
return imageRef.getDownloadURL();
}
}
@llucasshenrique
Copy link
Author

Preciso pegar a referencia do storage para salvar no formulario e executar o video.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment