Last active
December 28, 2017 18:45
-
-
Save llucasshenrique/3ee8ac3117410eb7e01217302acfb626 to your computer and use it in GitHub Desktop.
Firebase storage video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
}) | |
}) | |
}) | |
}) | |
}) | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preciso pegar a referencia do storage para salvar no formulario e executar o video.