{"id":26833341,"url":"https://github.com/mr-won/webrtc","last_synced_at":"2025-03-30T15:28:44.627Z","repository":{"id":138423060,"uuid":"601424219","full_name":"mr-won/WebRTC","owner":"mr-won","description":"Flutter 1:1 영상 통화 앱 구현","archived":false,"fork":false,"pushed_at":"2023-02-16T04:36:18.000Z","size":447,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T02:27:17.076Z","etag":null,"topics":["agora","agora-webrtc","flutter","webrtc","webrtc-video"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mr-won.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-02-14T03:02:01.000Z","updated_at":"2024-09-28T22:52:57.000Z","dependencies_parsed_at":"2023-08-20T14:07:20.496Z","dependency_job_id":null,"html_url":"https://github.com/mr-won/WebRTC","commit_stats":null,"previous_names":["wonttan/webrtc","wonchihyeon/webrtc","chihyunwon/webrtc","mr-won/webrtc","chihyeonwon/webrtc"],"tags_count":null,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FWebRTC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FWebRTC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FWebRTC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FWebRTC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mr-won","download_url":"https://codeload.github.com/mr-won/WebRTC/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246337778,"owners_count":20761267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agora","agora-webrtc","flutter","webrtc","webrtc-video"],"created_at":"2025-03-30T15:28:44.065Z","updated_at":"2025-03-30T15:28:44.614Z","avatar_url":"https://github.com/mr-won.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 1:1 영상 통화 앱 구현 video_call\n\n```\n개발 툴 : Flutter\n개발 언어 : Dart\n개발 일시 : 2023-02-14 ~\n개발자 : Won Chi Hyeon\n```\n\n## 앱 개요\n```\n기능 : 실제 핸드폰을 사용해서 1:1 화상 통화 기능\n       화상 통화를 종료할 수 있는 기능\n       \n사용한 플러그인 : agora_rtc_engine, permission_handler\n```\n\n## 아고라에서 필요한 상수값 가져오기\n[아고라 홈페이지](https://www.agora.io)\n```\n아고라 홈페이지에서 회원가입을 진행하고 새로운 프로젝트를 생성합니다.\n이 때 Secured mode: APP ID + Token (Recommanded)\n프로젝트 config 설정페이지에서 Generate temp RTC Token을 눌러서\n토큰을 발급받습니다. 토큰의 유효기간은 24시간만 유효합니다.\nChannel Name은 핸드폰끼리 통신할 때 사용할 채널의 이름으로 원하는 대로 짓습니다.\n\n프로젝트에 필요한 App ID, Channel Name, Temp Token을 안전한 곳에 복사해둡니다.\n```\n### [필요한 아고라 상수값들 APP ID, Channel Name, Temp Token]\n![image](https://user-images.githubusercontent.com/58906858/218630843-183c655b-3f89-47d5-ab80-65ace56ace58.png)\n\n## 아고라에서 얻은 상수값들을 프로젝트에 파일로 저장\n```\n아고라에서 얻은 필요한 상수값들(App ID, Channel Name, Temp Token) 이 세 개를\nlib/const 폴더를 생성해서 그 안에 넣어줍니다.\nTemp Token은 24시간만 유효하기에 24시간이 지나면 새로 발급받은 토큰값을 넣어줍니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218631335-7db9254d-340d-4f6b-ae16-96a718ed0c83.png)\n\n### 이미지와 추가하기\n[이미지 사이트](https://github.com/codefactory-co/golden-rabbit-flutter-novice/tree/main/ch12/video_call)\n```\nasset/img 파일에 logo, home_img를 프로젝트의 asset/img 파일에 추가합니다.\npubspec.yaml 파일을 다음과 같이 수정합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218633292-9766f420-d87c-42ac-9ced-7e41fc9d2091.png)   \n![image](https://user-images.githubusercontent.com/58906858/218633251-e6b14f0b-e217-40d9-b0cb-13805d2c19e6.png)\n\n### 프로젝트에 필요한 라이브러리 설치\n```\nflutter pub add agora_rtc_engine와 flutter pub add permission_handler로 프로젝트에 필요한\n라이브러리를 설치하고 pub get을 실행해서 변경 사항을 저장합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218633476-c4d0a614-8279-45af-b8c7-d247f434e924.png)\n\n### 네이티브 설정하기\n```\n안드로이드에서 추가할 네이티브 권한들을 설정해줍니다.\n네트워크 상태를 읽는 READ_PHONE_STATE, ACCESS_NETWORK_STATE\n인터넷을 이용해서 영상을 스트리밍해야하기에 INTERNET\n녹음과 녹화 기능과 관련된 RECORD_AUDIO, MODIFY_AUDIO_SETTING, CAMERA\n블루투스를 이용한 녹음과 녹화 기능 BLUETOOTH_CONNECT\n\n모듈의 build.gradle 파일의 compileSdkVersion을 33으로 변경합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218634687-f29f4206-00b2-4715-bc90-a61695d2f33b.png)   \n![image](https://user-images.githubusercontent.com/58906858/218634663-16be9e8b-c23a-435e-aae5-bf822fc1677b.png)\n\n## 로고 UI 작성\n```\nScaffold의 배경색으로 blue[100]!을 적용하였습니다.\n그림자가 있는 로고는 안에 아이콘과 글자가 Container안에 위치한 형태입니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218936962-ea1358ca-63b0-4009-8e8e-e043f6c25e3f.png)\n\n## 이미지 UI 작성\n```\n가운데에 asset/img/ 폴더에 추가한 home_img.png 이미지를 넣어주었습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218937370-1ecabd78-1310-499d-973e-d41d60637122.png)\n\n## 화상 통화 시작 버튼 UI 작성\n```\n앱의 맨 밑에 화상 통화 시작 버튼을 생성하였습니다.\nMainAxisAlignment.end으로 맨 밑에 배치하고 CrossAxisAlignment.stretch로 가로방향을 꽉 채우도록 하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/218940713-2180af18-eda6-4dd6-9027-fcbc6893c19c.png)\n       \n## 화상 통화 시작 버튼에 화면 이동 기능 구현\n```\n버튼에 Navigator를 사용해서 캠 스크린으로 화면 전환하는 기능을 추가하였습니다.\n```\n### [버튼을 누르면 캠 스크린으로 화면 전환]\n![image](https://user-images.githubusercontent.com/58906858/219267715-4a24ad80-bf71-423b-84f2-fe8895287937.png)\n\n## 화상 통화에 필요한 권한을 요청하고 응답받기\n```\n캠 스크린 cam_screen.dart 페이지에서 화상통화에 필요한 권한들(카메라, 마이크) 요청하고 응답을 받아야 합니다.\n권한 관리 라이브러리인 permission_handler 라이브러리를 import하고 카메라와 마이크에 대한 요청과 요청에 대한 응답을\n받습니다. 요청이 허가된(granted) 상태라면 true값을 아니라면 '카메라 또는 마이크 권한이 없습니다.'라는 문구가 출력되도록\n하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/219268804-6a9e0ddd-f8d9-4f8e-bb8b-b35f2d59cf6c.png)\n\n## Future로 위젯 렌더링하기\n```\n권한을 요청하고 응답받는 Future형 함수 init()의 상태값에 따라 위젯을 다르게 렌더링하기 위해서\nFutureBuilder를 사용하여 에러 유무, 데이터 유무 상태에 따라 위젯을 다르게 렌더링하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/219269688-1091d02b-ace1-4ad4-8b1f-741c88c3f066.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Fwebrtc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-won%2Fwebrtc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Fwebrtc/lists"}