how-to-make-a-cross-platform-video-sharing-app-with-flutter-and-firebase

[utterances-bot]

How to make a cross-platform serverless video sharing app with Flutter, Firebase and Publitio | Jonathan's Dev Blog

cover What we’re building We’ll see how to build a cross-platform mobile app that allows users to upload and share videos. final The stack Flutter - A new cross-platform mobile app development framework by Google, using the Dart language. Firebase - The serverless real time…

https://www.learningsomethingnew.com/how-to-make-a-cross-platform-video-sharing-app-with-flutter-and-firebase

[trey-rosius]

Beautifully written. I've never heard of publitio, but it looks like a pretty good host for videos. I've been having lots of headache lately with video upload on flutter. Worst, i was uploading videos to firebase. If you don't use FFMPEG to encode the video, and a user selects a video with a large size. Won't they still have to be really patient during uploading of the video ?

[syonip]

Thanks Trey! Yeah I think some sort of client side encoding is probably the best approach in most cases (a raw video taken on an iphone can be HUGE). It will indeed take more time on the user side. The amount of time will differ depending on how powerful the mobile device is. This adds more complexity to the client app, as it has to handle these encoding jobs, and be able to resume/restart them if they fail. I'm in the process of implementing such code in my own app. Video is complicated...

On Wed, 4 Dec 2019 at 10:33, trey-rosius notifications@github.com wrote:

Beautifully written. I've never heard of publitio, but it looks like a pretty good host for videos. I've been having lots of headache lately with video upload on flutter. Worst, i was uploading videos to firebase. If you don't use FFMPEG to encode the video, and a user selects a video with a large size. Won't they still have to be really patient during uploading of the video ?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/syonip/blog-comments/issues/2?email_source=notifications&email_token=ABJKLCOWL7HRRZ57R7SXOYLQW5TNJA5CNFSM4JVE33TKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF4FFIQ#issuecomment-561533602, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABJKLCOCON3INAD6N3N2P23QW5TNJANCNFSM4JVE33TA .

[JaeYeopHan]

awesome blog, awesome article! thanks :)

[syonip]

Thanks for the awesome theme @Jbee!

On Fri, 6 Dec 2019 at 11:20, Jbee notifications@github.com wrote:

awesome blog, awesome article! thanks :)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/syonip/blog-comments/issues/2?email_source=notifications&email_token=ABJKLCMDUV2VQGAHUYS2KR3QXIKO5A5CNFSM4JVE33TKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGDQK5Q#issuecomment-562496886, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABJKLCLSKZBLRSLGVJ23UKLQXIKO5ANCNFSM4JVE33TA .

[DavidAPears]

Thanks - my first Flutter app :) Really appreciate the tutorial.

[syonip]

You're welcome David, and thanks for the coffee, made my day :)

[egnimos]

hey I want to know that how to delete the given file from publitio using flutter....please help me in this ...iam having trouble

[syonip]

Hi @egnimos , I haven't added the delete function yet, I can add it. You can open an issue at https://github.com/syonip/flutter_publitio with the functions you're missing and I'll have a look at it.

Cheers

[lorensewusu]

Hi,

Thank you for this, very much appreciated. I am building an app (including flutter Web) where I don't want everyone to be able to get the video url and play my videos, I only want authenticated users in my app to be able to play videos.

Does having the encoded videos solve this problem? I doubt because we pass a url to the video player and so it will show the download url in the network tab for developer tools.

Is there a way I can achieve this? Basically all I want is to be able to do something like Netflix does, you can't view a video unless you are authenticated even if you have a url.

Thanks Lawrence

[egnimos]

You can create .....without video encoding ....just setting up some conditions ....in the given code ....... If you are using as backhend firebase ...then its not that hard ....to set up authentication

On Wed, Jul 15, 2020, 12:56 PM lorensewusu <notifications@github.com wrote:

Hi,

Thank you for this, very much appreciated. I am building an app (including flutter Web) where I don't want everyone to be able to get the video url and play my videos, I only want authenticated users in my app to be able to play videos.

Does having the encoded videos solve this problem? I doubt because we pass a url to the video player and so it will show the download url in the network tab for developer tools.

Is there a way I can achieve this? Basically all I want is to be able to do something like Netflix does, you can't view a video unless you are authenticated even if you have a url.

Thanks Lawrence

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/syonip/blog-comments/issues/2#issuecomment-658595785, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANAD2WJ4NEVSOSE6Z4QN6HDR3VKZFANCNFSM4JVE33TA .

[lorensewusu]

Thanks for your reply, i think I should clarify my question.

I am using firebase storage to store some videos The app uses firebase authentication to allow users to login At this point, requests are made and the response includes the video urls These video urls can be seen on the developer console when the video player is given the url to load the video This url can be used by anyone on the internet. Is there a better way of preventing this from happening, i only want logged in users to have access to the videos and no one else.

[egnimos]

You have to set the security rules ....for that ....to not allow the user to access your URL

On Wed, Jul 15, 2020, 8:05 PM lorensewusu <notifications@github.com wrote:

Thanks for your reply, i think I should clarify my question.

I am using firebase storage to store some videos The app uses firebase authentication to allow users to login At this point, requests are made and the response includes the video urls These video urls can be seen on the developer console when the video player is given the url to load the video This url can be used by anyone on the internet. Is there a better way of preventing this from happening, i only want logged in users to have access to the videos and no one else.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/syonip/blog-comments/issues/2#issuecomment-658806220, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANAD2WLNBONLSHG5BJNHJWTR3W5EFANCNFSM4JVE33TA .

[egnimos]

Is flutter web is showing the URL link in inspect section of the google??

On Wed, Jul 15, 2020, 9:42 PM Engineer Monster <egnimos25@gmail.com wrote:

You have to set the security rules ....for that ....to not allow the user to access your URL

On Wed, Jul 15, 2020, 8:05 PM lorensewusu <notifications@github.com wrote:

Thanks for your reply, i think I should clarify my question.

I am using firebase storage to store some videos The app uses firebase authentication to allow users to login At this point, requests are made and the response includes the video urls These video urls can be seen on the developer console when the video player is given the url to load the video This url can be used by anyone on the internet. Is there a better way of preventing this from happening, i only want logged in users to have access to the videos and no one else.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/syonip/blog-comments/issues/2#issuecomment-658806220, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANAD2WLNBONLSHG5BJNHJWTR3W5EFANCNFSM4JVE33TA .

[lorensewusu]

Yes and that is the problem, with that url, anyone can have access to the video

[egnimos]

you have to set a security rules in the storage and database section of the firebase... so that only authecticated can read and access the URL link

EXAMPLE:: For Database section

`rules_version = '2'; service cloud.firestore { match /databases/{database}/documents {

match /users/{uid} {
  allow read, write: if request.auth != null && request.auth.uid == uid;
}

match /{document=**} {
  allow read, write: if request.auth != null;
}

} }`

For storage section it will look like this

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } }

and you can check this link if you want to know more about security rules of firebase https://firebase.google.com/docs/rules

[birchb]

I'll buy you a weeks worth of coffee is you can explain how to use ffmpeg to crunch a video with a web worker prior to uploading!

[egnimos]

I'll buy you a weeks worth of coffee is you can explain how to use ffmpeg to crunch a video with a web worker prior to uploading!

So you want to ask... how to compress the video file before uploading am, I right??

[syonip]

Hi @lorensewusu, If you need security rules, you can use Firebase Storage to host the videos. Then you can configure security rules to allow only specific users to access the files: https://firebase.google.com/docs/storage/security/start. You can take a look at this post I wrote about using firebase storage to host videos: https://www.learningsomethingnew.com/flutter-video-upload-firebase-storage-hls

[syonip]

Hi @birchb , I'm not sure I can handle so much coffee :) Why do you want the encoding to run in a web worker? Are you using this in flutter web? I don't know if this code works in flutter web, at least I haven't tested it.

[lorensewusu]

@syonip and @egnimos this section of the article explains the problem i have https://www.learningsomethingnew.com/flutter-video-upload-firebase-storage-hls

Public access to stored videos HLS serving from Cloud Storage with this method requires public read access for all files. If you need authenticated access to the videos, you’ll have to find a way to dynamically update the .m3u8 playlist with the Firebase token each time the client downloads the file (because the token will be different).

Basically anyone can use their browser to get the download url and download the videos themselves. This is massive security issue for me.

[syonip]

@lorensewusu This will only be a problem if you plan to use HLS with Firebase Storage. If you just store plain video files you don't have a problem. Do you need HLS?

[lorensewusu]

I use plain videos, but it is exactly the same problem. The video player expects a url to play a video. To get the url you do getDownloadUrl and that is a permanent url that anyone can use to download the video and this url can be seen when you use it via the web. The firebase storage security rules only apply if you are using the cloud api to access the data, but if you use the url straight then it bypasses the security rules. Am i missing something?

[syonip]

The firebase storage security rules only apply if you are using the cloud api to access the data

I'm not sure that's the case, where did you see that?

To get the url you do getDownloadUrl and that is a permanent url that anyone can use to download the video

You'll probably have to save the path and call getDownloadUrl for every user, instead of saving the download url, because the token will be different. A user without viewing permission should be blocked from getting the url by the security rules.

Having said that, I didn't test this myself, so I could be wrong :)

[lorensewusu]

I'm not sure that's the case, where did you see that?

https://firebase.google.com/docs/reference/android/com/google/firebase/storage/StorageReference#getDownloadUrl() https://stackoverflow.com/questions/41088164/enforce-authentication-for-firebase-storage-downloadable-urls

You'll probably have to save the path and call getDownloadUrl for every user, instead of saving the download url, because the token will be different. A user without viewing permission should be blocked from getting the url by the security rules.

That makes sense, but the problem is the video player will be given this url and that will be seen by anyone looking the network tab of the browser and this url can be accessed by anyone.

[egnimos]

hey @lorensewusu I want to ask that ...you are using all the services of the firebase...?? and you can see the link of the file, store in firebase storage in "INSPECT SECTION OF THE BROWSER"... If YOU are able see the video file link in the INSPECT SECTION then you can do one thing that you can hide it with fake link ...

[lorensewusu]

hey @lorensewusu I want to ask that ...you are using all the services of the firebase...?? Yes I am using firebase for the storage and authentication too.

and you can see the link of the file, store in firebase storage in "INSPECT SECTION OF THE BROWSER"... If YOU are able see the video file link in the INSPECT SECTION then you can do one thing that you can hide it with fake link ...

How do i provide a valid url to the video player but hide the link in the browser with a fake one?

[birchb]

I'll buy you a weeks worth of coffee is you can explain how to use ffmpeg to crunch a video with a web worker prior to uploading!

So you want to ask... how to compress the video file before uploading am, I right??

@egnimos: Yes, I have a research/teaching web app in which the users upload video and then view them to self-assess. See https://emirror.org. (Note: this demo video is from early Spring.)

In order to save bandwidth and storage, my users use Handbrake to reduce the video size prior to uploading. I would prefer that they didn't need to install a separate piece of software, so crunching the video with a service worker seems to be the best solution. (I considered using a firebase function to upload the video and crunch the video there, but that would be a major bottleneck.)

I was able to compile a stand-alone test electron app that compresses the video and uploads, but that defeats the idea of not having another install and, for now, I'd rather keep the whole operation on a web app.

So, the short answer is yes: I'd like to compress prior to uploading but within the web app.

Regarding security: My users have to specifically share their video for any of the other users--classmates-- to see it. And, users must be authenticated to see anything.

Any help would be greatly appreciated and rewarded with coffee and/or beer!

[birchb]

@syonip See my commented directed at @egnimos.

I think the web worker would be easier for my users; If I could just have them click 'upload a media file,' they'd have an easier experience and they wouldn't attempt to upload a 5 GB file from their phone...

When experimenting with the Electron test app, I found Handbrake-js to be easier to use than FFmpeg. All I did was import hbjs from 'handbrake-js, set some options, and then hbjs.spawn(options) {}. On 'end,' the file gets uploaded to Storage and the download URL gets added to a document in Firestore.

UPDATE: Import Cost VSCode extension reports that handbrake-js is a mere 25.7K, gzipped: 7.9K.

[egnimos]

so you want to know, how to compress the video file in flutter web... sorry to say but there is no package available right now for flutter web, so you have to externally compress the video before storing in the firebase...

but for android and IOS platform flutter provides you a package for video compression follow these links https://pub.dev/packages/flutter_video_compress https://pub.dev/packages/flutter_ffmpeg

[birchb]

@egnimos Sorry, I should have specified that I'm not using Flutter. But, good to know that it exists for iOS and Android in case I get there.

[egnimos]

@birchb okay so you are asking for electron??

[syonip]

@birchb, I saw that there's this library that claims to run ffmpeg in a web worker, but I didn't test it: https://www.npmjs.com/package/ffmpeg-webworker

Notice that handbrake-js claims to be a node package, so I'm not sure it will run in a browser (where your web app is running I assume).

[syonip]

@lorensewusu , It seems that the download link really isn't affected by security rules, it's public. So the question in your case is how to play a video using direct SDK access, without using the download link. I'm afraid I don't know the answer to that... Let me know if you find a way.

[lorensewusu]

@syonip thanks for that, that's exactly my problem. I will keep looking and let you know if I find something

[amitsingh6391]

Thanks man it's really very useful for me

[syonip]

Hi @amitsingh6391 , Glad you found it useful!

[syonip]

@trey-rosius and anyone else who asked, I just wrote a guide about how to move the encoding to Cloud Functions, you can check it out if you're still interested: https://itnext.io/serverless-video-upload-and-encoding-with-firebase-storage-cloud-functions-and-publitio-a4b2997b1508

The code is here: https://github.com/syonip/flutter_cloud_function_publitio

[ob1y2k]

Jonathan can you update https://github.com/syonip/flutter_publitio ? tnx

[syonip]

Hi. This is a previous version, so I won't be updating this. Please see the previous comment if you are interested : https://github.com/syonip/blog-comments/issues/2#issuecomment-675886539

Thanks.

On Thu, Sep 16, 2021, 2:37 PM ob1y2k @.***> wrote:

Jonathan can you update https://github.com/syonip/flutter_publitio ? tnx

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/syonip/blog-comments/issues/2#issuecomment-920825259, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABJKLCK3W6NWY3JYHKXTAV3UCHJHBANCNFSM4JVE33TA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.