Flutter Video Calling Tutorial

In this tutorial, we will learn how to build a video calling app similar to Google Meet or Zoom using Stream's Video Calling API.

To start with, log in to the Stream dashboard and create a new project for your new video calling app.

You will need to fill in the relevant fields, like this:

Once the project is created, navigate to the Video&Audio section. Note your API key from the overview:

To begin developing your video calling app, you need to create a new Flutter project. If you do not have Flutter or an IDE configured to work with it, we highly recommend following the Install and Set up an editor steps from the official documentation.

Please make sure you are using the latest version of Flutter from the stable channel:

Now, open your IDE and start a new Flutter application called flutter_video_calling_demo. If you are using Android Studio (recommended) make sure to create the project as a Flutter application and keep all default settings.

You can also create a new project using this command

The next step is to add Stream Video to your dependencies, to do that just open pubspec.yaml and add it inside the dependencies section.

Stream has several packages that you can use to integrate video into your application.

In this tutorial, we will use the stream_video_flutter package which contains pre-built UI elements for you to use.

You can also use the stream_video package directly if you need direct access to the low-level client.

The stream_video_push_notification package helps in adding push notifications and an end-to-end call flow (CallKit).

To start adding the SDK to your app, initialise the Stream Video SDK with a user:

:::note Connecting a user usually takes places after authentication and token creation originating from your backend. This example uses a demo token for the user.

You can replace the ApiKey and user token with those from your newly created Stream app. For testing purposes, you can manually generate a token here :::

Your user is now connected.

Before you go ahead, you need to add the required permissions for video calling to your app.

In your AndroidManifest.xml file, add these permissions:

For the corresponding iOS permissions, open the Info.plist file and add:

Now that the dependencies, permissions, and initialisations are set, we can get onto creating a call.

Let's create a simple screen with a button that joins a call:

To instantiate a call, you can use the StreamVideo.makeCall() method. You then need to create this on the backend using the call.getOrCreate() method.

Here is how that looks in code:

The UI as of the moment is a simple button on the screen:

You have created a Stream Video call. Let's set up the call screen UI so that the user can see other users and interact.

To set up a call screen, set up a new file named 'call_screen.dart' and create a new widget to handle the call screen:

In this widget, we take the call we created previously as a parameter.

In the build() method, we use the StreamCallContainer widget - a widget made by the Stream team to make it easy to build video calls:

And that's... pretty much it.

Once you navigate to the CallScreen after the button press, this is what you will be greeted with:

:::note When connecting other users, you can use the same process. The call.getOrCreate() method will create a call if it doesn't exist, and simply return the existing call if it already does. :::

To customise any aspect of the call screen made previously, you can use the CallContentBuilder parameter of the StreamCallContainer.

For example, if you want to add your own call controls to the call, you can do it using the callControlsBuilder:

When building Whatsapp/Telegram style calling, you need to add incoming and outgoing screens to the app. The StreamCallContainer also has these screens inbuilt and allows you to change these using the incomingCallBuilder and outgoingCallBuilder.

Final Thoughts

In this video app tutorial we built a fully functioning Flutter messaging app with our Flutter SDK component library. We also showed how easy it is to customize the behavior and the style of the Flutter video app components with minimal code changes.

Both the video SDK for Flutter and the API have plenty more features available to support more advanced use-cases.

Give us Feedback!

Did you find this tutorial helpful in getting you up and running with Flutter for adding video to your project? Either good or bad, we’re looking for your honest feedback so we can improve.

No

Almost

Yes

Send