How to Make a Live Streaming App with Mux

Поділитися
Вставка
  • Опубліковано 4 гру 2022
  • In this video we're going to build a live streaming app with FlutterFlow (flutterflow.io) and Mux (www.mux.com).
    //
    FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. Drag-and-drop to build pixel-perfect UIs. Connect your app to live data via Firebase or APIs. Easily add advanced features like push notifications, payments, animations, and more. Build your own custom widgets or write custom code that you can use in FlutterFlow. When your app is complete, export your code or deploy straight to the app stores.
    Start building now: flutterflow.io/
  • Розваги

КОМЕНТАРІ • 68

  • @oussamabengagi3256
    @oussamabengagi3256 Рік тому +19

    Thank you for the tutorial, We want more tutorials and more pre built templates

  • @naked-and-mad
    @naked-and-mad Рік тому +1

    Great, robust voice of teacher! To listen with pleasure.

  • @thelonglincoln
    @thelonglincoln 10 місяців тому

    Your teaching is top tier, bro 🤝

  • @BeforeLeavingLife
    @BeforeLeavingLife Рік тому

    This is a great video!!! I do not know why but I feel the same as watching a great football match!!! Keep going !!!

  • @Butterychef
    @Butterychef 9 місяців тому +1

    For playbackID function, updated so you just need two of those lines put them in the “modify below”! Took me noob self a sec to figure out.

  • @Zp00kie
    @Zp00kie Рік тому

    One word: AMAZING!

  • @sectionel
    @sectionel Рік тому +2

    This is sick! could you technically create a facetime like app with this?

  • @nickandalina
    @nickandalina Рік тому +2

    This is such an awesome video thank you! How do we set up our FF app to take advantage of the RTMP ability that Mux already has baked in? Streaming from our app is awesome, but we have a super professional streaming setup with high end cameras and microphones, and we really need to be able to stream with it to our users. Thanks!

  • @tattguy690
    @tattguy690 9 місяців тому

    Thank you! This explained so much on call from a reference. Can you make a video on doing the same from api? As some of us refuse to use firebase;).

  • @ahmedkamal87
    @ahmedkamal87 Рік тому +1

    I'd like to see a video using the API to sign up sellers on stripe connect and modifying flutterflow stripe cloud function to add destination and app fees

  • @Isaac_pina
    @Isaac_pina Рік тому +2

    Advice it will give you fail 401 if when you encode the Base64 tokens you do not put: between one and the other it is a small character that makes a difference 😃 I hope it helps someone because in the video they do not say it is in the documentation

  • @n1027
    @n1027 Рік тому

    Thanks for this video. Does flutter flow video player support hls m3u8 list?

  • @jigga_pops4000
    @jigga_pops4000 Рік тому +1

    Is there any way to set the length for how long a video or live stream upload can be ? I want to have a chat app were everyone gets to speak without being interrupted. Example: speaker 1 has 1min to talk. Speaker 2 can then respond for 1min. Is there a way to do that ?

  • @ManuMarea
    @ManuMarea Рік тому

    What about streaming audio , with audio player widget you have could you?What about having more than one track and a playlist?Is it doable?

  • @FunkoKoning
    @FunkoKoning Рік тому

    i`m really liking this thanks for the tutorial. Can you use other stream services instead of mux? Like zoom or teams?

    • @FlutterFlow
      @FlutterFlow  Рік тому +1

      Not natively at this point. Zoom does have a Flutter SDK: marketplace.zoom.us/docs/sdk/video/flutter/?AI_Month&

  • @mp-fb4ds
    @mp-fb4ds Рік тому +3

    very cool ... FF is awesome ... great work ... is it possible ....... on the live stream page to add the viewers video widget so you could simulate live video calling between 2 users? WOuld be great to see some video calling demos between users ... like video chat or something similar to using Twilio, etc ... for 1:1 and group video calling.

    • @ShadiEl-fares
      @ShadiEl-fares 6 місяців тому

      did you ever figure out something like this?

    • @Tahycoon
      @Tahycoon 4 місяці тому

      @@ShadiEl-fares did you figure it out?

  • @fk4618
    @fk4618 Рік тому

    Hello, Thank you for the great video. but I am facing one issue when I use this with my own project on this line of code "record.name.toString() +" and the error is "The getter 'name' isn't defined for the type 'DocumentReference'.
    Try importing the library that defines 'name', correcting the name to the name of an existing getter, or defining a getter or field named 'name'", ALthough, I followed all other steps properly from changing the Document reference name and adding the dependency in code. So can you please guide me with this?

  • @ayojunior9933
    @ayojunior9933 Рік тому +1

    Do we need to encode all Secret key that we use for API call like in @20:29 ? Thanks

  • @user-hr6hb9wr8n
    @user-hr6hb9wr8n 9 місяців тому

    Is there a github repositories to get all the project files?? Likewise the Homepage and logged in Page consist of what?? Glad if you could share

  • @zhixory
    @zhixory Місяць тому

    Question: Can you use mux as a real-time camera instead of a live-stream tool? Or is it better with custom widgets if so

  • @herbalpointsv
    @herbalpointsv Рік тому +1

    Hello. Thank you for the great tutorial.
    I really need to know if we can set a limit to the max. number of minutes a user can live stream at a time from the settings. I am building a video app and I won't be able to proceed unless I know this. I have been looking for answers for the past 2 days
    Thanks alot

    • @ShadiEl-fares
      @ShadiEl-fares 6 місяців тому

      did you ever figure out something like this?

  • @regalstoic
    @regalstoic Рік тому +2

    hello, my mux is not deploying on flutterflow after adding the keys. can someone help?

  • @macaumusica
    @macaumusica Рік тому +5

    While this implementation is great, I've been struggling quite a bit with choosing the correct player so Mux can also track stream data (number of active viewers, etc). I feel most will require a playback page or somewhere to see the actual stream and not integrating a MuxPlayer widget of some sort is a dealbreaker as Mux is great to track user data and even gives each video a user experience rating, but this cannot be implemented with FF right now unfortunately.

    • @happyboss555
      @happyboss555 Місяць тому

      Hi bro, can Mux be setup the function like timer? when the video reach the duration I set, it trigger a action in my flutterflow.

  • @happyboss555
    @happyboss555 Місяць тому

    Hi FF expert, can Mux be setup the function like timer? when the video reach a certain duration I set, it trigger a action in my flutterflow.

  • @marlonjm
    @marlonjm Рік тому

    having issues with the is_live field updating to false on broadcast stop, although action is setup correctly. Any ideas?

  • @swapanpreetkaur3091
    @swapanpreetkaur3091 Рік тому

    Voice and video calling possible in flutterflow ?

  • @itsafact7166
    @itsafact7166 11 місяців тому +1

    I have watched this video 5x I am still not sure where to find the playback ID for the API.

  • @craigdoriot317
    @craigdoriot317 5 місяців тому

    ive been trying to recreate this project and gotten a good deal of it to function, but there are some issues due to changes within the UI of FF. Specifically, the actions have different field values now, so it doesn't quite work the way shown. The last 10 minutes of the video was kind of frustrating as it was whipping through API and actions which isn't the most helpful for someone new to FF

  • @josephandres4324
    @josephandres4324 Рік тому

    Although the broadcast is created successfully, it is not possible to play videos in .m3u8 format with the VideoPlayer widget, I don't know why the documentation doesn't give an alternative solution.

  • @hari.s4966
    @hari.s4966 Рік тому +1

    Need help to form json from text field

  • @fictionplus
    @fictionplus Рік тому

    Any integration with Protopie?

  • @SpeaknowLiveTV
    @SpeaknowLiveTV Рік тому

    I follow the video but I want more advance live streaming.

  • @RiteshKumar-gj4xd
    @RiteshKumar-gj4xd Рік тому +1

    mux token, not deployed in my project. Pls help me

  • @LoganMullinixdoes
    @LoganMullinixdoes Рік тому

    can you make a video on how to save text to a users profile when they generate it. Trying to figure out how to save text to a users profile.

    • @FlutterFlow
      @FlutterFlow  Рік тому +1

      Have you set up Firebase yet?

    • @LoganMullinixdoes
      @LoganMullinixdoes Рік тому

      @@FlutterFlow yes. I’m just a beginner with FF so I struggle lol. Got part of the AI custom function working though lol still got errors though

  • @PankajSharma-it1bz
    @PankajSharma-it1bz Рік тому

    I have followed your video step by step and created this app successfully. Thanks for providing this video to the flutterflow community.
    But When I am using this app in 2 mobile phones one for live streaming and the second for viewing same live stream then I found there is a lot of lag between in video. Even some time I am not able to see the live video it takes a lot of time to process the video in flutterflow.
    Is this because we are using free MUX API or is this a flutterflow issue ????

    • @FlutterFlow
      @FlutterFlow  Рік тому

      Are you exporting the code and then testing it?

    • @PankajSharma-it1bz
      @PankajSharma-it1bz Рік тому

      @@FlutterFlow No, I have created the apk from flutterflow and then testing it.

    • @FlutterFlow
      @FlutterFlow  Рік тому

      @@PankajSharma-it1bz Have you tested your network speed?

    • @PankajSharma-it1bz
      @PankajSharma-it1bz Рік тому

      @@FlutterFlow Yes, I have tested with my broadband internet and my mobile internet. It was working slowly.

    • @PankajSharma-it1bz
      @PankajSharma-it1bz Рік тому

      @@FlutterFlow I am facing this issue in my client project so It would be really helpful if you could share a working app demo video with us. So at least I can share with my client and gain this confidence.

  • @rajatsharma6137
    @rajatsharma6137 5 днів тому

    You did not tell how to get the playback ID from mux during API config step, i guess you had already created a live stream, a new user wont see any ID.

  • @anwarallahdan
    @anwarallahdan 4 місяці тому

    Hi , Thank you , But I am geting 412 Failure , error , any help , please.

  • @wilsonumoh3241
    @wilsonumoh3241 Рік тому

    hi
    please i am having this issue when trying to deploy mux parameters on flutterflow (Error: Your Firebase project must be on the Blaze plan in order to deploy functions. Please upgrade your plan and try deploying again). is there any other way i can develop app using superbase or any other db?
    thanks
    wilson

  • @zyan...
    @zyan... 8 місяців тому

    olá, eu queria criar um editor de vídeos simples, poderia mostrar um tutorial com as páginas com as funções básicas?

  • @SpeaknowLiveTV
    @SpeaknowLiveTV Рік тому +2

    I can't get the Api to work, it fails on test reponse

  • @desmond7760
    @desmond7760 Рік тому

    I'm looking for someone that can develop live sports streaming website can you?

  • @anwarallahdan
    @anwarallahdan 4 місяці тому

    I have , error , "type": "unauthorized", ?

  • @dreamytalescom
    @dreamytalescom Рік тому

    is there easy way to set up mongodb as backend? thank you FF team

    • @FlutterFlow
      @FlutterFlow  Рік тому

      We have a robust API system that you could use to access your mongodb backend, but mongo is not natively supported.

  • @valirmasha4718
    @valirmasha4718 Рік тому +1

    Tiktok pls?

  • @say5s
    @say5s Рік тому

    We want video how create app like Twitter
    And we want How to connect directly to MySQL databases

    • @darrengalvin4059
      @darrengalvin4059 Рік тому

      Link to SQL DB would be a great tutorial

    • @bigdata9605
      @bigdata9605 Рік тому

      Do not connect directly to SQL, create secure api that connect to SQL

  • @Isaac_pina
    @Isaac_pina Рік тому +1

    Consejo les dara fail 401 si cuando codifican los tokens Base64 no ponen : entre uno y otro es pequeño caracter hace la diferencia 😃espero a alguien le sirva por que en le video no lo dicen esta en la documentacion

    • @fluttetflowpro
      @fluttetflowpro 7 місяців тому

      Hola bro yo la verdad no he podido me puedes ayudar , cuando le doy texto a la función me vota error codigo 400 algo así

    • @Isaac_pina
      @Isaac_pina 7 місяців тому

      Hola cuando yo lo hice en la api call tuve que opner dos puntos y asi me funciono pero no se exactamente que requieres hacer?@@fluttetflowpro

  • @user-qc7po5ke8o
    @user-qc7po5ke8o 8 місяців тому

    status 400 (failure) me ajude