OpenTok Flutter Sample

Please note this is a community supported repository and is not offically supported by Vonage.

If you face any problems with the code in this repository please raise a Github Issue and someone from the community will take a look when available.

This project provides a sample Flutter project that highlights how to make use of the Android and iOS OpenTok SDK features within a cross platform flutter application.

Setup flutter SDK

The flutter site has a solid install guide follow this to make sure that flutter is setup correctly.

Note that if you plan to build for iOS you will need to do this on a Mac, for Android all platforms are supported.

Set up credentials

To get started you will need a valid Vonage Video API account. You will find your API credentials (API_KEY, SESSION_ID, TOKEN) which you can find in the Video API Dashboard.

Add these credentials to lib/src/config/open_tok_config.dart.

Run the App

The quickest way to run/test the project is to open the project using Android Studio using the Flutter plugin. Once opened you can run the project targeting your platform of choice. For more details on other options please see the flutter test drive guide

App Features

The app is broken down into separate classes for separate SDK features, this architecture would not be used in a production application however it allows for clean code readability on what you will need to implement for each specific feature.

One to One video

This is a basic one to one video chat implementation, the flutter code can be found in lib/one_to_one_video.dart.

The supporting Android native code can be found in the directory android/app/src/main/kotlin/com/vonage/tutorial/opentok/opentok_flutter_samples/one_to_one_video.

The supporting iOS native code can be found in the directory ios/Runner/OneToOneVideo.

For Android a native FrameLayout is used to hold the video render view for both streams (the subscriber and the publisher). The flutter layout highlights how to make use of these native views.

Multi Party Video

This is an example of how you can implement multi party video chat, the flutter code can be found in lib/multi_video.dart.

The supporting Android native code can be found in the directory android/app/src/main/kotlin/com/vonage/tutorial/opentok/opentok_flutter_samples/multi_video.

The supporting iOS native code can be found in the directory ios/Runner/MultiVideo.

For Android a native ConstraintLayout to which views are added/removed as users join/leave the session.

Signalling (Text Messaging)

This shows how to implement a basic "messaging" client between those within a opentok session. This allows you to send text messages back and forth and often is a feature that's used alongside the video chat functionality.

The flutter code can be found in lib/signalling.dart. This makes use of a all UI elements being rendered by Flutter and only data being sent/received by the SDK and native code.

The supporting Android native code cen be found in the directory android/app/src/main/kotlin/com/vonage/tutorial/opentok/opentok_flutter_samples/signalling

The supporting iOS native code can be found in the directory ios/Runner/Archiving.

Screen/View Sharing

This shows how you can set and use a custom video capturer based on a webview as the source fo a published video stream instead of taking the camera feed.

The flutter code can be found in lib/screen_sharing.dart.

The supporting Android native code cen be found in the directory android/app/src/main/kotlin/com/vonage/tutorial/opentok/opentok_flutter_samples/screen_sharing

Archiving

This shows how to interact with a webservice and the OpenTok cloud to enable the recording (Archiving) of video chat sessions as well as replaying them.

The flutter code can be found in lib/archiving.dart.

The supporting Android native code cen be found in the directory android/app/src/main/kotlin/com/vonage/tutorial/opentok/opentok_flutter_samples/archiving

The supporting iOS native code can be found in the directory ios/Runner/Archiving.

Recording archives are stored on OpenTok cloud (not on the user device), so we'll need to set up a web service that communicates with OpenTok cloud to start and stop archiving.

In order to archive OpenTok sessions, you need to have a server set up (hardcoded session information will not work for archiving). To quickly deploy a pre-built server click at one of the Heroku buttons below. You'll be sent to Heroku's website and prompted for your OpenTok API Key and API Secret — you can obtain these values on your project page in your TokBox account. If you don't have a Heroku account, you'll need to sign up (it's free).

PHP server	Node.js server
Repository	Repository

This sample web service provides a RESTful interface to interact with archiving controls.

Note: You can also build your server from scratch using one of the server SDKs.

After deploying the server open android/app/src/main/kotlin/com/vonage/tutorial/opentok/opentok_flutter_samples/config/ServerConfig.kt and configure the CHAT_SERVER_URL with your domain to fetch credentials from the server.