개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-02-14 ~
개발자 : Won Chi Hyeon
기능 : 실제 핸드폰을 사용해서 1:1 화상 통화 기능
화상 통화를 종료할 수 있는 기능
사용한 플러그인 : agora_rtc_engine, permission_handler
아고라 홈페이지에서 회원가입을 진행하고 새로운 프로젝트를 생성합니다.
이 때 Secured mode: APP ID + Token (Recommanded)
프로젝트 config 설정페이지에서 Generate temp RTC Token을 눌러서
토큰을 발급받습니다. 토큰의 유효기간은 24시간만 유효합니다.
Channel Name은 핸드폰끼리 통신할 때 사용할 채널의 이름으로 원하는 대로 짓습니다.
프로젝트에 필요한 App ID, Channel Name, Temp Token을 안전한 곳에 복사해둡니다.
아고라에서 얻은 필요한 상수값들(App ID, Channel Name, Temp Token) 이 세 개를
lib/const 폴더를 생성해서 그 안에 넣어줍니다.
Temp Token은 24시간만 유효하기에 24시간이 지나면 새로 발급받은 토큰값을 넣어줍니다.
asset/img 파일에 logo, home_img를 프로젝트의 asset/img 파일에 추가합니다.
pubspec.yaml 파일을 다음과 같이 수정합니다.
flutter pub add agora_rtc_engine와 flutter pub add permission_handler로 프로젝트에 필요한
라이브러리를 설치하고 pub get을 실행해서 변경 사항을 저장합니다.
안드로이드에서 추가할 네이티브 권한들을 설정해줍니다.
네트워크 상태를 읽는 READ_PHONE_STATE, ACCESS_NETWORK_STATE
인터넷을 이용해서 영상을 스트리밍해야하기에 INTERNET
녹음과 녹화 기능과 관련된 RECORD_AUDIO, MODIFY_AUDIO_SETTING, CAMERA
블루투스를 이용한 녹음과 녹화 기능 BLUETOOTH_CONNECT
모듈의 build.gradle 파일의 compileSdkVersion을 33으로 변경합니다.
Scaffold의 배경색으로 blue[100]!을 적용하였습니다.
그림자가 있는 로고는 안에 아이콘과 글자가 Container안에 위치한 형태입니다.
가운데에 asset/img/ 폴더에 추가한 home_img.png 이미지를 넣어주었습니다.
앱의 맨 밑에 화상 통화 시작 버튼을 생성하였습니다.
MainAxisAlignment.end으로 맨 밑에 배치하고 CrossAxisAlignment.stretch로 가로방향을 꽉 채우도록 하였습니다.
버튼에 Navigator를 사용해서 캠 스크린으로 화면 전환하는 기능을 추가하였습니다.
캠 스크린 cam_screen.dart 페이지에서 화상통화에 필요한 권한들(카메라, 마이크) 요청하고 응답을 받아야 합니다.
권한 관리 라이브러리인 permission_handler 라이브러리를 import하고 카메라와 마이크에 대한 요청과 요청에 대한 응답을
받습니다. 요청이 허가된(granted) 상태라면 true값을 아니라면 '카메라 또는 마이크 권한이 없습니다.'라는 문구가 출력되도록
하였습니다.
권한을 요청하고 응답받는 Future형 함수 init()의 상태값에 따라 위젯을 다르게 렌더링하기 위해서
FutureBuilder를 사용하여 에러 유무, 데이터 유무 상태에 따라 위젯을 다르게 렌더링하였습니다.
