My images are stored in firebase storage. I have noticed that if I store the image in a folder, I am no longer able to use it with the SocialSharing plugin from ionic native.
Anyone has found any workaround on this?
whatsappShare() {
let image = "https://firebasestorage.googleapis.com/v0/b/instagram-test-fe4a8.appspot.com/o/000.jpg?alt=media&token=64dd92cd-27c2-4c36-9c1d-2ab376ffd16c" //This is working
//let image = "https://firebasestorage.googleapis.com/v0/b/instagram-test-fe4a8.appspot.com/o/test%2F000.jpg?alt=media&token=2bc49648-cf1c-41fe-8e1f-071d54f56402" //This is failing because stored in test/ folder
//shareViaWhatsApp(message, image, url)
SocialSharing.shareViaWhatsApp("Checkout this picture!", image, "lycos.com/")
.then( () => {
alert("WhatsApp Success");
}, () => {
alert("WhatsApp failed")
})
}
I have found this github which seems related
https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin/issues/696
It means the plugin can work in iOS and fail in android?
Any possible solution to this?
Yes. Finally I got a way to share images from Firebase Storage to any service. Just follow these two conditions:
Convert the image from the uri to a base64 string. You can find plenti of examples of that conversion out there.
Send the image data using shareWithOptions(). Other methods seem not to work with image data encoded that way.
I'm interested in any other updates regarding this issue. Hope that helps anyone.
Related
so I am trying to add image moderation to my firebase app, using this guide here here is the repo and this also might be useful. I tested it out and it seems to work well, however I wanted to update the same image from storage, not upload it to a separate path. This caused the firebase function to fire recursively and I cost my company a couple of dollars. To solve this I decided whenever an image is uploaded there would be custom metadata saying if it has been blurred or not. The code for this is down below and works.
const metaData = {
customMetadata: {
blurred: 'false',
},
}
const imageBytes = await uploadBytesResumable(storageRef, blobFile, metaData);
Now in my firebase function every time an image is uploaded it will check the object.metaData to see if it is equal to 'true'. Here is the code down below for that.
export const blurOffensiveImages = functions.storage.object().onFinalize(async (object) => {
// Ignore things we've already blurred
if (object.metadata?.customMetadata.blurred === 'true') {
functions.logger.log(`meta datas are the same, stopping function`);
return null;
}
If the metadata is equal to false then it will run the normal function and check if the image is worth blurring. If it is then all it does is change the metadata to true since this will stop the recursion.
My problem, I am having type errors saying 'Property "blurred' does not exist on type 'string'". I have played around with this for a while and cant seem to find a solution to get the customMetaData to come out the way I would like. If i remove the .blurred I get no errors but I also know this would not give the correct data when I check if it is equal to 'true'or 'false'. If anyone knows how to fix this that would be really appreciated. OR if someone has a good solution to stop this recurson from happening that would also be great since this has been giving me issues for a few days. Thanks!
Background
I'm trying to upload images to firebase storage manually (using the upload file button in the web page), however I have no clue how to later link them to a firestore document. What I have come up with (I'm unsure if it works) is copying the url for the image in the storage bucket and adding it to a string type field in the document called profilePicture. The reason I'm unable to get this to work is that I'm really new to React Native and I don't know how to properly require the images other than typing in the specific local route. Mind you also, the way I'm requiring user data such as a profile name is after logging in with email/password auth I pass the data as a param to react navigation and require it as extraData.
What I have tried
Once I've copied the image url and pasted it in the firestore document I'm doing this:
const profilePicture = props.extraData.profilePicture;
<Image source={require({profilePicture})}/>
I have also tried using backticks but that isn't working either. The error message I'm getting is:
TransformError src\screens\Profile\ProfileScreen.js: src\screens\Profile\ProfileScreen.js:Invalid call at line 27: require({
profilePicture: profilePicture
})
Note: this is an expo managed project.
Question
Is the problem in the code or in the way I'm linking both images? Maybe both? Should I require the document rather than relying on the data passed previously?
Thanks a lot in advance!
Edit 1:
I'm trying to get all info from the current user signed in, after a little research I've come to know about requiring images in this manner:
const ref = firebase.storage().ref('path/to/image.jpg');
const url = await ref.getDownloadURL();
and then I'd require the image as in <Image source={{uri: url}}/>
I get that this could be useful for something static, but I don't get how to update the ref for every single different user.
Edit 2:
Tried using the method mentioned in Edit 1, just to see what would happen, however It doesn't seem to work, the image just does not show up.
Maybe because my component is a function component rather than a class component (?
I understand that your goal is to generate, for each image that is uploaded to Cloud Storage, a Firestore document which contains a download URL.
If this is correct, one way is to use a Cloud Function that is triggered each time a new file is added to Cloud Storage. The following Cloud Function code does exactly that. You may adapt it to your exact requirements.
exports.generateFileURL = functions.storage.object().onFinalize(async object => {
try {
const bucket = admin.storage().bucket(object.bucket);
const file = bucket.file(object.name);
// You can check that the file is an image
const signedURLconfig = { action: 'read', expires: '08-12-2025' }; // Adapt as follows
const signedURLArray = await file.getSignedUrl(signedURLconfig);
const url = signedURLArray[0];
await admin.firestore().collection('profilePictures').add({ fileName: object.name, signedURL: url }) // Adapt the fields list as desired
return null;
} catch (error) {
console.log(error);
return null;
}
});
More info on the getSignedUrl() method of the Admin SDK here.
Also note that you could assign the Firestore document ID yourself, instead of having Firestore generating it as shown in the above code (with the add() method). For example, you can add to the image metadata the uid of the user and, in the Cloud Function,get this value and use this value as the Document ID.
Another possibility is to name the profile image with the user's uid.
I'm running in trouble here with Firebase.
The code is in flutter, I am testing in iOS
It's all going well, but when I try to get the dynamic link sent from:
auth.sendSignInWithEmailLink(parameters);
I get a debug message:
[Firebase/Analytics][I-ACS023001] Deep Link does not contain valid required params. URL params: {
amv = 16;
apn = "com.myproject.app";
ibi = "com.myproject.app";
ifl = "https://myproject-com.firebaseapp.com/__/auth/action?apiKey=XXXXXXXXXXX&mode=signIn&oobCode=XXXXXX&continueUrl=https://myproject-com.firebaseapp.com/email123&lang=en";
link = "https://myproject-com.firebaseapp.com/__/auth/action?apiKey=XXXXXXX&mode=signIn&oobCode=XXXXXX&continueUrl=https://myproject-com.firebaseapp.com/email123&lang=en";
}
where I changed my project name to "myproject" and put XXX inplace of apiKey/oobcode
and then, when I try to get the dynamic link with my app
final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
data is null.
So I am guessing Firebase Analytics is processing it and "killing" the dynamic link before my app can parse it.
Anyone managed to go through this?
I found the problem.
It is not that Firebase Analytics was "consuming" and killing the deep link.
The thing is that in iOS still today there is a delay the link and the state cycle...
https://medium.com/#diegoveloper/flutter-firebase-dynamic-link-6f1b79278ce0
This link explains it, problem 2 in the blog post.
Solved. I can still use analytics in Firebase.
It is impossible to remove analytics btw, you can only disable it.
I'm trying to make an image upload button and link it to Firebase such that each time the button is pressed, the image is sent to Firebase Storage. Here are the relevant snippets of my code:
// Files, and references
File _imageFile;
StorageReference _reference =
FirebaseStorage.instance.ref().child('myimage.jpg');
Future uploadImage() async {
// upload the image to firebase storage
StorageUploadTask uploadTask = _reference.putFile(_imageFile);
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;
// update the uploaded state to true after uploading the image to firebase
setState(() {
_uploaded = true;
});
}
// if no image file exists, then a blank container shows - else, it will upload
//the image upon press
_imageFile == null
? Container()
: RaisedButton(
color: Colors.orange[800],
child: Text("Upload to Firebase Storage"),
onPressed: () {uploadImage();}),
However, each time I press this button, the image overwrites the pre-existing image with the same name, and I was wondering if there's a way to make it so that each time I press the button, the name of the image changes, and as a result the original image isn't overridden. I'd greatly appreciate any help I could get as I'm very new to Flutter and Firebase.
Thank you!
I think you're looking for a UUID generator.
Fortunately there is a packege for that : uuid
String fileID = Uuid().v4(); // Generate uuid and store it.
Now you can use postID as name for your file.
NOTE When you upload your file you may want to generate new uuid to avoid using the old one :)
One more thing: PLEASE dont use DateTime.now() think about if two users uploaded an image at the same time !!
Basically, when you call:
FirebaseStorage.instance.ref().child('myimage.jpg');
You're uploading the file with the same name everytime:
myimage.jpg
In order to fix your problem, you just need to generate a random key for the image. There are a couple ways you could do this:
Ideally, you would use the Uuid package which is specifically for use-cases like this.
If you are set up with Firestore (the database that Firebase offers) then you can push the name of the image to the database, and have it return the DocumentID which Firestore will create a random ID for you that isn't used.
You could also use the current Date/Time (which would be considered a bad practice for major applications, but for a personal project it will serve you just fine):
DateTime.now().toString()
or
DateTime.now().toIso8601String();
Or of course, you can always write your own hashing function, based on the name of the file that you are uploading, which you would get by doing:
_imageFile.toString();
Then once you get the random name of the file, you should upload it like this:
FirebaseStorage.instance.ref().child(myImageName).putFile(_imageFile);
This maybe a late answer but hope it helps someone in future,had the same challange my solution:
I used DateTime.now().toString(),but before that i got the current logged in user UID from firebase,
then added it to every outgoing save to storage request like this
DateTime.now().toString() + (_auth.currentUser!.uid),
This made every file unique and solved the overwriting issue for me.
ARK*
Simply Add a Document Reference
DocumentReference myDoc = FirebaseFirestore.instance
.collection('COLLECTION')
.doc();
myDoc having your new Document Id.
myDoc.set({'data':'test'});
I'm working on an app that has video streaming functionality. I'm using firebase database and firebase storage. I'm trying to find some documentation on how firebase storage handles video files, but can't really find much.
There's mentioning in the docs that firebase storage works with other google app services to allow for CDN and video streaming, but all searches seem to lead to a dead end. Any advice?
I think there are several types of video streaming, which could change our answer here:
Live streaming (subscribers are watching as an event happens)
Youtube style (post a video and end users watch at their convenience)
Having built a live streaming Periscope style app using Firebase Storage and the Firebase Realtime Database, I pretty strongly recommend against it--we uploaded three second chunks and synced them via the Realtime Database. While it worked (surprisingly well), there was ~5 second latency over very good internet, and it also wasn't the most efficient solution (after all, you're uploading and storing that video, plus there wasn't any transcoding). I recommend using some WebRTC style, built for video transport, and using the Realtime Database for signaling along side the stream.
On the other side, it's definitely possible to build mobile YT on Firebase features. The trick here is going to be transcoding the video (using something like Zencoder or Bitmovin, more here: https://cloud.google.com/solutions/media/) to chop up your uploaded video into smaller chunks of different resolutions (and different formats, iOS requires HLS for streaming, for instance). You client can store chunk information in the Realtime Database (chunk name, resolutions available, number of chunks), and can download said chunks from Storage as the video progresses.
If you want to steam a video from Firebase Storage, this is the best way I found. This will depend on the size of your video file. I'm only requesting 10-30mb files so this solution works good for me. Just treat the Firebase Url as a regular url:
String str = "fire_base_video_URL";
Uri uri = Uri.parse(str);
videoViewLandscape.setVideoURI(uri);
progressBarLandScape.setVisibility(View.VISIBLE);
videoViewLandscape.requestFocus();
videoViewLandscape.start();
If you want to loop the video:
videoViewLandscape.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
#Override
public void onPrepared(MediaPlayer mp) {
mp.setLooping(true);
}
});
And if you want to show a progress bar before the video starts do this:
videoViewLandscape.setOnInfoListener(new MediaPlayer.OnInfoListener() {
#Override
public boolean onInfo(MediaPlayer mp, int what, int extra) {
if (what == MediaPlayer.MEDIA_INFO_BUFFERING_END) {
progressBarLandScape.setVisibility(View.GONE);
return true;
}
else if(what == MediaPlayer.MEDIA_INFO_BUFFERING_START){
progressBarLandScape.setVisibility(View.VISIBLE);
return true;
}
return false;
}
});
This is not the best way of doing things but it works for me for now until I can find a good video streaming service.
2020: Yes, firebase storage video streaming is easy and possible.
All other questions suggest that you use a protocol like HLS. However, this is only necessary if you develop an app for the Apple AppStore that serves videos that are longer than 10 minutes.
In all other cases, you can simply encode your videos in mp4 and upload them to firebase. Your clients can then stream the mp4 without a problem. Just make sure that your moov atom is at the beginning of your mp4 file. This allows to start playing the video immediately, even if it is not fully loaded.
Users can also skip ahead or go back thanks to variable bit requests which are supported by firebase storage.
To test it, just upload a video to your firebase storage and open it in your browser.
You can host HLS videos on Firebase Cloud Storage. It works pretty well for me.
The trick is to modify the playlist .m3u8 files to contain the storage folder prefix, and the ?alt=media suffix for each file entry in the playlist:
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:2.760000,
<folder_name>%2F1_fileSequence_0.ts?alt=media
#EXT-X-ENDLIST
You also don't really have to use server-side transcoding, you can have the client who uploads the video do it, and save considerable costs.
I've written a full tutorial with source code here: https://itnext.io/how-to-make-a-serverless-flutter-video-sharing-app-with-firebase-storage-including-hls-and-411e4fff68fa
this is my exact implementation for it to start a video playing from storage on firebase as soon as the view is open, and then have the view disappear and then addded a button to click after to replay the video.
I have a demo link with the key so you can see it works. any questions hit me up.
you will just have to create a IBAction if you want the button after the video disappears.
// BackMuscles.swift
// Messenger
//
// Created by Zach Smith on 8/12/21.
// Copyright © 2021 spaceMuleFitness. All rights reserved.
//
import UIKit
import AVKit
import AVFoundation
class BackMuscles: UIViewController {
#IBOutlet weak var playv: UIButton!
let avPlayerViewController = AVPlayerViewController()
var avPlayer:AVPlayer?
override func viewDidLoad() {
super.viewDidLoad()
self.view.addBackground()
let movieUrl:NSURL? = NSURL(string: "https://firebasestorage.googleapis.com/v0/b/messenger-test-d225b.appspot.com/o/test%2FTestVideo.mov?alt=media&token=bd4ccba3-b446-43bc-809e-b1152aa3c2ff")
if let url = movieUrl {
self.avPlayer = AVPlayer(url: url as URL)
self.avPlayerViewController.player = self.avPlayer
}
NotificationCenter.default.addObserver(self, selector: #selector(playerDidFinishPlaying), name: NSNotification.Name.AVPlayerItemDidPlayToEndTime, object: avPlayerViewController.player?.currentItem)
self.present(self.avPlayerViewController, animated: true) { () -> Void in
self.avPlayerViewController.player?.play() // Do any additional setup after loading the view.
}
}
#objc func playerDidFinishPlaying(note: NSNotification) {
self.avPlayerViewController.dismiss(animated: true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
#IBAction func playV(sender: UIButton) {
let amovieUrl:NSURL? = NSURL(string: "https://firebasestorage.googleapis.com/v0/b/messenger-test-d225b.appspot.com/o/test%2FTestVideo.mov?alt=media&token=bd4ccba3-b446-43bc-809e-b1152aa3c2ff")
if let aurl = amovieUrl {
self.avPlayer = AVPlayer(url: aurl as URL)
self.avPlayerViewController.player = self.avPlayer
self.present(self.avPlayerViewController, animated: true) { () -> Void in
self.avPlayerViewController.player?.play()
}
}
}
}
If you want to create a YT like app, you can first compress the video, I recommend using this library to manage video compression, i recommend the one in this link. I've manage to compress a video of 118 mg to 6 mg in under 42 seconds. It also has a great demo app, just follow the example.
After you get the compressed file upload the file to Storage, in you client app you will play the video url using a player like Exo Player.
The video below is pretty good it uses exoplayer to stream instead of mediaplayer or videoViewLanscape
https://www.youtube.com/watch?v=s_D5C5e2Uu0
try{
BandwidthMeter bandwidthMeter = new DefaultBandwidthMeter();
TrackSelector trackSelector = new DefaultTrackSelector(new AdaptiveTrackSelection.Factory(bandwidthMeter));
simpleExoPlayer = ExoPlayerFactory.newSimpleInstance(this, trackSelector);
String vid = "https://www.youtube.com/watch?v=s_D5C5e2Uu0";
Uri uri= Uri.parse(vid);
DefaultHttpDataSourceFactory dataSourceFactory = new DefaultHttpDataSourceFactory("exoplayer_video");
ExtractorsFactory extractorsFactory = new DefaultExtractorsFactory();
MediaSource mediaSource = new ExtractorMediaSource(uri,dataSourceFactory,
extractorsFactory, null, null);
videoView.setPlayer(simpleExoPlayer);
simpleExoPlayer.prepare(mediaSource);
simpleExoPlayer.setPlayWhenReady(true);
}
catch (Exception e){
}
The below is the implements in the buid gradle app file that you will need.
implementation 'com.google.android.exoplayer:exoplayer:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-core:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-dash:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-hls:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-smoothstreaming:r2.4.0'
implementation 'com.google.android.exoplayer:exoplayer-ui:r2.4.0'
To use firestorage to play videos, all you need is the full url to the video. You then pass this url into a video view or exoplayer. No full download is needed. The videoview will stream the content YT style
see first of all you need to understand firebase rules okay
like make it true for development mode
then you have to create a storage reference for storing videos in your app
okay
then you have to select video you want to upload okay
then use Uploadtask for creating a task
and upload video file in storage
now for retrieving video use exoplayer library in android
you can visit here for more