Raspberry pi 4 live video stream to flutter

Raspberry pi 4 live video stream to flutter

Hello and welcome to flutter buddy Playing video in your flutter application is not that hard of a task Especially since there are many packages out there that our video players that can help you But streaming video is a little bit of a different story and the number of packages out there for streaming video not that many What we are going to do in this video is Try to stream from a raspberry pi 4 camera to our flutter application live video I'm Cip your flutter, buddy

And Let's get to work first I'm using a Raspberry Pi 4 model B with 4 gigabytes of RAM other specs are on the screen and in the description below On it I installed motion an application to stream live video from a Raspberry Pi in the network You just have to install it set a port and some other configuration values in a config file, but this tutorial is for flutter So let's do flutter First I'm going to create the app Once it's done creating I open the folder where it was created and go to the maindart and build it It's your basic standard new flutter app We're going to clean it up a bit First we change the title to something more relevant what we are doing then we get rid of this pesky debug bar Then we go to pubspec

yaml and add the package flutter_vlc_player version 002 Save and go back in the maindart We import the package and the controller library for the package after that We're going to scroll down to the my home page state class and remove some code that we're not gonna use anymore Then we go to the build function and let's remove these two text widgets we scroll to the beginning of our class and add two new parameters a string to hold our string URL and The VLC player control variable to create our control for our video stream widget back to where we will remove the text previously We're going to create a new VLC player widget This widget has some parameters default head and default width For URL will set the string URL we just made and Remember, we just made a control variable We'll use that for property here Now we go to the increment counter method to set the stream URL whenever we press the bottom right button We'll wrap it in a set States or view will rebuild and use it Next we create an init state method and inside it We instantiate our controller as a new VLC player controller class

There's one more property We need to set to our VLC player widget and that is placeholder We set container as value and we can now test our application Aaaad it works! we see your low frame per second stream in our app Let's add more control over when the stream starts and stops first Let's turn this icon into a play arrow icon I'm going to use a ternary operator here and say if our stream URL is null We'll show an empty container if it's not no well show our VLC player widget in this empty container Let's make the child property or rich text widget and configure a TextSpan widget here The text will say stream closed then let's style our TextSpan widget Will give it a font size of 14 and a font weight and we'll make it bold We format the code and oh, yes, let's make sure the rich text widget is centered let's do this by wrapping it in at center widget like this and Then back to styling

Let's give our text color black and a background paint of red see how that looks Okay on second thought let's keep the text color white That's better Now Let's put the condition for when we are pressing the button So we go back here to the set state and add if stream URL is different than null Let's make it null If not, let's set our current URL string Now let's add a ternary for the icon if stream URL is no we keep it as it is If not, we show a pause icon Let's save run and test by default the show stream is closed When we click play it shows our stream click pause stream closed play again stream again, and so on and so forth The frame rate is low coming from the raspberry pi But the stream works the same from emulator and as you can see in a moment from the real device as well You can find links in the description below with the code for this tutorial app and Documentation links stuff like that Be sure to like if you liked this video subscribe If you haven't already and want to get notified when I post stuff I'm Cip your flutter buddy And as always, I'll see you next time