Flutter-WebRTC 종합 가이드

전염병을 통해 우리는 음성/영상 통화 앱의 증가를 보았습니다. 많은 사람들이 전 세계의 사랑하는 사람들과 소통하기를 원했고 Zoom과 같은 화상 회의 앱인 Google Meet이 이를 가능하게 했습니다. Twitter는 Spaces를 도입했고 Discord는 스테이지를 추가했습니다. Clubhouse와 같은 오디오 전용 앱도 큰 인기를 끌었습니다.

당연히 개발자들은 요즘 같은 질문을 하고 있습니다. Flutter 앱에서 실시간 오디오 및 비디오를 설정하려면 어떻게 해야 합니까? Flutter WebRTC를 사용하여 간단한 앱을 빌드하는 방법이 궁금하시다면 잘 찾아오셨습니다.

이 기사에서는 WebRTC가 무엇이며 Flutter와 통합하는 방법에 대해 설명합니다. 또한 작업을 확장하기 위해 사용할 수 있는 옵션을 탐색합니다.



WebRTC는 웹사이트와 장치 간의 실시간 오디오-비디오 통신을 가능하게 합니다. 별도의 프로그램이나 플러그인 설치 없이 직접 P2P 통신이 가능한 오픈소스 프로젝트입니다. 모든 최신 브라우저에서 지원되며 사용 가능한 라이브러리를 사용하여 기본 애플리케이션에 임베드할 수도 있습니다.

Flutter에서 WebRTC를 사용하기 위해 flutter_webrtc라는 패키지를 사용할 수 있습니다.

다음 명령을 실행하여 패키지를 프로젝트 종속성에 추가합니다.

flutter pub add flutter_webrtc

Flutter와 통합하는 전체 프로세스는 상당히 쉽지만 잘 문서화되어 있지는 않습니다. 이에 대한 자세한 단계별 자습서는 여기comprehensive guide to Flutter WebRTC.를 참조하십시오.

WebRTC Flutter 데모

링크된 문서의 단계를 따르면 WebRTC를 사용하여 비디오 통신 및 오디오 활성화를 위해 두 피어를 연결하는 Flutter로 간단한 화상 회의 앱을 빌드할 수 있습니다.

You can find the complete code here.

URL을 복사하고 새 브라우저 창에 붙여넣어 두 개의 피어를 만듭니다.



오퍼를 생성하려면 창 1에서 '오퍼' 버튼을 클릭하십시오. Chrome의 개발자 도구를 사용하여 액세스할 수 있는 콘솔에 제안을 출력합니다.



이 제안을 창 2의 TextField에 복사하여 붙여넣고 '원격 설명 설정' 버튼을 클릭합니다. 기본 함수를 호출하여 원격 설명을 설정해야 합니다.
이제 'Answer'를 클릭하여 답변을 생성하고 창 1의 TextField에 복사하여 붙여넣습니다.



마지막으로 창 2에서 후보를 복사하여 창 1 TextField에 붙여넣고 '후보 설정' 버튼을 클릭합니다.



이렇게 하면 WebRTC 연결이 생성되고 원격 비디오가 아래와 같이 표시되어야 합니다.



그리고 그게 다야. 🎉

보시다시피 Flutter WebRTC 앱을 구축하는 과정은 다소 복잡해 보일 수 있지만 일단 요령을 터득하면 완료하기가 그리 어렵지 않습니다.