[003] 플러터 (Flutter) & 아고라 (Agora) 연동 - Flutter 영상 통화(Voice Call) UI 및 기능 구현

안녕하세요~ totally 개발자입니다.

 

지난 포스팅에서는 Voice Call(음성통화)에 대해서 살펴보았고 이어서 Video Call(영상통화)을 구현해보도록 하겠습니다. 지난 포스팅에서 소개한 Voice Call을 구현하지 않으신 경우에 권한 등 여러 세팅이 필요하기 때문에 지난 포스팅을 보시고 오셔야 합니다.

https://totally-developer.tistory.com/197

[002] 플러터 (Flutter) & 아고라 (Agora) 연동 - Flutter 음성 통화(Voice Call) UI 및 기능 구현

 

Step 1: video_call_screen.dart 파일을 만들어주시고 아래처럼 StatefulWidget으로 기본 세팅 및 필요한 패키지들을 import 해줍니다. Widget build 부분에는 SafeArea 위젯을 먼저 만들어주시고 Stack 위젯을 두시면 됩니다.

import 'package:flutter/material.dart';

class VideoCallScreen extends StatefulWidget {

const VideoCallScreen({super.key});

@override

State<VideoCallScreen> createState() => _VideoCallScreenState();

}

class _VideoCallScreenState extends State<VideoCallScreen> {

@override

Widget build(BuildContext context) {

return SafeArea(

child: Stack(

children: [

],

),

);

}

}

 

 

Step 2: pubspec.yaml에 agora_uikit 패키지를 설치해주시면 되는데 이 때 버전에 유의하셔야 합니다. 지난 포스팅에서의agora_rtc_engine과 permission_handler 버전이 다르기 때문에 아래처럼 일치시켜 주시면 됩니다.

 

 

Step 3: 아래 내용을 import 해줍니다.

import 'package:flutter/material.dart';

import 'package:agora_uikit/agora_uikit.dart';

import 'main.dart';

 

 

Step 4: AgoraClient 인스턴스를 만들어줍니다. 이 때 appId, channelName, token은 모두 main.dart에 있는 것을 가지고 옵니다. 이 channelName과 token은 지난 포스팅에서 소개한 대로 Generate temp RTC Token 버튼을 누르시면 가능합니다.

 

테스트 용도로는 uid는 주석처리하셔도 됩니다. 기본 값으로 0 들어갑니다.

final AgoraClient client = AgoraClient(

agoraConnectionData: AgoraConnectionData(

appId: appId,

channelName: channelName,

tempToken: token,

// uid: uid,

),

);

 

 

Step 5: 초기화해줍니다.

@override

void initState() {

super.initState();

initAgora();

}

void initAgora() async {

await client.initialize();

}

 

 

Step 6: 위젯 구성을 해줍니다. AgoraVideoViewer는 현재 영상통화되는 화면이며 사용자가 증가되어도 자동으로 레이아웃이 조정됩니다. AgoraVideoButtons 위젯은 통화 종료, 카메라 전환 등 버튼들을 제공하는 위젯입니다. 

@override

Widget build(BuildContext context) {

return SafeArea(

child: Stack(

children: [

AgoraVideoViewer(client: client),

AgoraVideoButtons(client: client),

],

),

);

}

 

 

Step 7: 아래처럼 main.dart의 body 부분에 VideoCallScreen() 호출해서 완료하시면 됩니다.