Flutter Twilio: como fazer videochamadas com Flutter

Flutter Twilio é um tutorial que ensina como usar o Twilio Programmable Video SDK com Flutter para fazer chamadas de vídeo em seu aplicativo. Você aprenderá como configurar o Twilio, criar uma UI Flutter e implementar a funcionalidade de videochamada.

Pré-requisitos

Para acompanhar este tutorial do Flutter Twilio, você precisa:

1. Conhecimento básico de Dart e Flutter
2. Flutter SDK instalado
3. Um IDE de sua escolha (como VSCode ou Android Studio)
4. Uma conta Twilio

Configurando o SDK da Twilio

Depois de configurar sua conta Twilio, você receberá um SID de conta Twilio e um token de autenticação. Você também precisará criar uma chave de API e um segredo, o que pode ser feito no console da Twilio. Isto é crucial para a integração do Twilio com o Flutter.

Iniciando um projeto Flutter

Inicie um novo projeto Flutter usando o seguinte comando em seu terminal:

flutter create video_call_app

Substitua video_call_app pelo nome do seu projeto.

Adicionando pacote de vídeo Twilio

Adicione o pacote Twilio Video ao seu pubspec.yaml arquivo:

dependencies:
  flutter:
    sdk: flutter
  twilio_programmable_video: ^0.6.3

Lembre-se de executar flutter pub get em seu terminal para buscar o pacote.

Implementando videochamadas em Flutter com Twilio

Dividiremos a implementação das videochamadas Flutter Twilio em várias partes para simplificar.

Inicializando o Twilio

Para interagir com o serviço Twilio, precisamos inicializá-lo com nossas credenciais. No nosso caso, inicializaremos o Twilio no arquivo main.dart.

import 'package:flutter/material.dart';
import 'package:twilio_programmable_video/twilio_programmable_video.dart';

void main() {
  runApp(MyApp());
  TwilioProgrammableVideo.debug(on: true); // Turn on for debugging
  TwilioProgrammableVideo.initialize();
}

Lembre-se de substituir 'SID' e 'TOKEN' pelo seu SID e token de autenticação reais da Twilio.

Conectando ao quarto

Para fazer uma videochamada, o usuário precisa se conectar a uma sala de vídeo. Veja como você pode fazer isso:

try {
  final connectOptions = ConnectOptions('ROOM_NAME', //replace with room name
    accessToken: 'ACCESS_TOKEN', //replace with your access token
  );
  room = await TwilioProgrammableVideo.connect(connectOptions);
} catch (e) {
  print('Error while connecting to room: $e');
}

Exibindo vídeo

Uma vez conectado a uma sala, os vídeos locais e remotos podem ser exibidos usando LocalVideoTrack e RemoteVideoTrack:

final localVideoTrack = LocalVideoTrack(true, 'camera');

final localVideoWidget = LocalVideoTrackWidget(localVideoTrack);

final remoteVideoTrack = room.remoteParticipants.first.videoTracks.first;

final remoteVideoWidget = RemoteVideoTrackWidget(remoteVideoTrack);

O LocalVideoTrackWidget e RemoteVideoTrackWidget serão os widgets Flutter onde os feeds de vídeo locais e remotos serão exibidos.

Desconectando do quarto

Terminada a chamada, o usuário pode se desconectar da sala com o seguinte código:

await room.disconnect();

#flutter