FirebaseWebGL
FirebaseWebGL copied to clipboard
rotolonico
Storage example
Dear Nico,
I'm trying to run the Storage example but failed. Where I have to add my gs://bucket.appspot.com? Also what other changes I need to do to upload image and get the link of the image?
Thanks.
Hello Nico can you explain how can we use Firebase storage with WebGL. I'm trying to run the example in your project but I failed.
Thanks in advance.
Hello!, I also need an example, I got the error "firebase.storage is not a function" on built. Thanks!!
Dear Nico,
I'm trying to run the Storage example but failed. Where I have to add my gs://bucket.appspot.com? Also what other changes I need to do to upload image and get the link of the image?
Thanks.
The README.txt file (included in the package) mentions the following instruction:
For Firebase Storage to work properly on the web, you need to set up cors for your bucket.
You can look more into it here: https://firebase.google.com/docs/storage/web/download-files#cors_configuration
Or just open a terminal in this folder and run this command gsutil cors set cors.json gs://
I installed gsutil and then, I ran the command gs://<your-cloud-storage-bucket>
Dear @MPulgarImova, Have you succeeded in running the Firebase Storage in WebGL? If yes can you give me guidance, please?
Thanks in advance!
Hello! @mhadji05 , I have succeeded.
This code works for me in the index.html tha was generated on the built. But before, you must configurate CORS.
<head>
...
</head>
<script src="https://www.gstatic.com/firebasejs/9.8.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.2/firebase-storage-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({
apiKey: "xxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxx"
});
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const storage = firebaseApp.storage().ref();
</script>
<body>
...
...
<script>
...
...
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
window.unityInstance = unityInstance;
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
Finally, I have used the following rules for testing in Firebase->Storage->Rules
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
I hope that helps you