https://github.com/mr-won/webrtc
Flutter 1:1 영상 통화 앱 구현
https://github.com/mr-won/webrtc
agora agora-webrtc flutter webrtc webrtc-video
Last synced: over 1 year ago
JSON representation
Flutter 1:1 영상 통화 앱 구현
- Host: GitHub
- URL: https://github.com/mr-won/webrtc
- Owner: mr-won
- Created: 2023-02-14T03:02:01.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-16T04:36:18.000Z (over 3 years ago)
- Last Synced: 2025-03-18T02:27:17.076Z (over 1 year ago)
- Topics: agora, agora-webrtc, flutter, webrtc, webrtc-video
- Language: C++
- Homepage:
- Size: 437 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 1:1 영상 통화 앱 구현 video_call
```
개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-02-14 ~
개발자 : Won Chi Hyeon
```
## 앱 개요
```
기능 : 실제 핸드폰을 사용해서 1:1 화상 통화 기능
화상 통화를 종료할 수 있는 기능
사용한 플러그인 : agora_rtc_engine, permission_handler
```
## 아고라에서 필요한 상수값 가져오기
[아고라 홈페이지](https://www.agora.io)
```
아고라 홈페이지에서 회원가입을 진행하고 새로운 프로젝트를 생성합니다.
이 때 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]
## 아고라에서 얻은 상수값들을 프로젝트에 파일로 저장
```
아고라에서 얻은 필요한 상수값들(App ID, Channel Name, Temp Token) 이 세 개를
lib/const 폴더를 생성해서 그 안에 넣어줍니다.
Temp Token은 24시간만 유효하기에 24시간이 지나면 새로 발급받은 토큰값을 넣어줍니다.
```
### 이미지와 추가하기
[이미지 사이트](https://github.com/codefactory-co/golden-rabbit-flutter-novice/tree/main/ch12/video_call)
```
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으로 변경합니다.
```
## 로고 UI 작성
```
Scaffold의 배경색으로 blue[100]!을 적용하였습니다.
그림자가 있는 로고는 안에 아이콘과 글자가 Container안에 위치한 형태입니다.
```
## 이미지 UI 작성
```
가운데에 asset/img/ 폴더에 추가한 home_img.png 이미지를 넣어주었습니다.
```
## 화상 통화 시작 버튼 UI 작성
```
앱의 맨 밑에 화상 통화 시작 버튼을 생성하였습니다.
MainAxisAlignment.end으로 맨 밑에 배치하고 CrossAxisAlignment.stretch로 가로방향을 꽉 채우도록 하였습니다.
```
## 화상 통화 시작 버튼에 화면 이동 기능 구현
```
버튼에 Navigator를 사용해서 캠 스크린으로 화면 전환하는 기능을 추가하였습니다.
```
### [버튼을 누르면 캠 스크린으로 화면 전환]
## 화상 통화에 필요한 권한을 요청하고 응답받기
```
캠 스크린 cam_screen.dart 페이지에서 화상통화에 필요한 권한들(카메라, 마이크) 요청하고 응답을 받아야 합니다.
권한 관리 라이브러리인 permission_handler 라이브러리를 import하고 카메라와 마이크에 대한 요청과 요청에 대한 응답을
받습니다. 요청이 허가된(granted) 상태라면 true값을 아니라면 '카메라 또는 마이크 권한이 없습니다.'라는 문구가 출력되도록
하였습니다.
```
## Future로 위젯 렌더링하기
```
권한을 요청하고 응답받는 Future형 함수 init()의 상태값에 따라 위젯을 다르게 렌더링하기 위해서
FutureBuilder를 사용하여 에러 유무, 데이터 유무 상태에 따라 위젯을 다르게 렌더링하였습니다.
```
