Como fazer chamadas de vídeo usando o Vonage Video e o Flutter

O Flutter está ganhando cada vez mais popularidade, por isso decidimos criar um aplicativo simples que permite fazer chamadas de vídeo entre dois dispositivos. As duas tecnologias utilizadas para desenvolver o aplicativo são os SDKs do Flutter e do Vonage Video. Vamos recapitular rapidamente essas tecnologias:

• Flutter - kit de desenvolvimento de software de interface do usuário (UI) de código aberto usado para desenvolver aplicativos multiplataforma para Android, iOS, Linux e Mac. A principal linguagem de programação é Dart.

• Vonage Video - usado para estabelecer chamadas de vídeo entre diversos dispositivos. As linguagens de programação utilizadas são Kotlin para a plataforma Android e Swift para a plataforma iOS.

Este aplicativo é o equivalente em Flutter do aplicativo Basic-Video-Chat (Basic-Video-Chat para Android / Basic-Video-Chat para iOS). Aqui estão os principais recursos do aplicativo:

• Conecte-se a uma sessão do Vonage Video

• Publicar um fluxo de áudio e Video na sessão

• Assinar o fluxo de áudio e Video de outro cliente

NOTA: O código-fonte do aplicativo está disponível no GitHub.

O Flutter é a principal tecnologia utilizada aqui. Trata-se de uma plataforma usada para desenvolver um aplicativo móvel que roda no Android e no iOS. Ele será responsável por gerenciar e exibir a interface do usuário, além de conter a lógica do aplicativo. Dessa forma, a lógica do aplicativo é escrita apenas uma vez para ambas as plataformas.

Nos bastidores, este aplicativo Flutter utilizará o SDK de vídeo da Vonage para Android e SDK de vídeo da Vonage para iOS (por meio de projetos nativos para Android/iOS):

O código nativo da plataforma (Android, iOS) se comunica com o Flutter por meio do Flutter MethodChannel, que utiliza chamadas de método. O MethodChannel funciona como uma ponte para enviar mensagens entre o Flutter e o código nativo (adicionado ao projeto nativo do Android e ao projeto nativo do iOS). Isso nos permite fazer o login do usuário e configurar a sessão de vídeo para realizar uma videochamada:

O Flutter pode enviar mensagens para a parte nativa (Android/iOS) do aplicativo, e a parte nativa do aplicativo pode enviar uma mensagem de volta para o Flutter. O Flutter chama o initSession método e passa o apiKey, sessionId, e token para o código nativo para iniciar uma sessão do Vonage Video. O código nativo informará à parte do aplicativo desenvolvida em Flutter sobre um login bem-sucedido (ou um erro), e o código do lado do Flutter atualizará a interface do usuário.

NOTA: Um aplicativo Flutter pode ser empacotado como um aplicativo para Android ou iOS, mas nunca para ambos ao mesmo tempo. Quando a plataforma de destino é definida como Android, o MethodChannel se comunica com o código nativo do aplicativo Android. Quando a plataforma de destino é definida como iOS, o MethodChannel se comunica com o código nativo do aplicativo iOS.

Para executar o aplicativo , você precisará instalar o Flutter. Isso varia de plataforma para plataforma, como você pode ver nas instruções detalhadas.

NOTA: Certifique-se de executar flutter doctor para verificar sua configuração local do Flutter.

Para acessar a sessão do Vonage Video, você precisará de uma Vonage Video Account e gerar initSession, apiKey, e sessionId. Você pode obter esses valores no Painel do Vonage Video. Agora abra o main.dart arquivo e use esses valores nas variáveis correspondentes:

static String API_KEY = "";
static String SESSION_ID = "";
static String TOKEN = "";

Abra o aplicativo móvel para iniciar a videochamada.

NOTA: Você pode usar o Developer Playground para se conectar à mesma sessão do dispositivo móvel que está executando o aplicativo Flutter.

Resumo

Ainda há algumas desvantagens, mas a integração geral entre o Flutter e o Vonage Video é bastante tranquila. Mesmo sem um pacote nativo do Flutter, é possível criar rapidamente um aplicativo completo no Flutter que utilize os SDKs móveis do Vonage Video nos bastidores e seja executado em dispositivos Android e iOS.