Flutter WebRTC: 실시간 통신 앱 개발 가이드

Flutter WebRTC: 실시간 통신 앱 개발 가이드

Flutter에서 실시간 오디오 및 비디오 통신을 구현하려면 flutter_webrtc 패키지를 사용하는 것이 일반적입니다. 이 패키지는 WebRTC 기술을 Flutter 애플리케이션에서 활용할 수 있도록 도와주며, 화상 회의 앱, 실시간 스트리밍 앱 등 다양한 실시간 통신 솔루션을 구축할 수 있게 합니다.

---

1. WebRTC란?

**WebRTC (Web Real-Time Communication)**는 브라우저나 모바일 애플리케이션이 플러그인 없이 오디오, 비디오 및 데이터 스트림을 주고받을 수 있도록 지원하는 오픈 소스 프로젝트입니다. Google이 주도하고 있으며, 다음과 같은 특징을 갖습니다:

• 실시간 음성 및 영상 통신 지원
• 데이터 채널을 통한 P2P 데이터 교환
• 높은 성능과 낮은 지연 시간

---

2. flutter_webrtc 패키지 소개

flutter_webrtc는 Flutter에서 WebRTC 기능을 제공하는 강력한 패키지입니다. 이 패키지는 플랫폼 네이티브 WebRTC API를 호출하여 Android, iOS, Web, macOS 등 다양한 플랫폼에서 실시간 통신 기능을 구현할 수 있습니다.

설치

flutter pub add flutter_webrtc

필수 권한 설정

Android (AndroidManifest.xml)

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

iOS (Info.plist)

<key>NSCameraUsageDescription</key>
<string>Camera access is required for video calls</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for audio calls</string>

---

3. 기본 코드 예제

다음은 flutter_webrtc를 사용하여 간단한 비디오 스트림을 설정하는 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';

class SimpleVideoCall extends StatefulWidget {
  @override
  _SimpleVideoCallState createState() => _SimpleVideoCallState();
}

class _SimpleVideoCallState extends State<SimpleVideoCall> {
  final RTCVideoRenderer _localRenderer = RTCVideoRenderer();

  @override
  void initState() {
    super.initState();
    initRenderers();
    startVideo();
  }

  @override
  void dispose() {
    _localRenderer.dispose();
    super.dispose();
  }

  Future<void> initRenderers() async {
    await _localRenderer.initialize();
  }

  Future<void> startVideo() async {
    final mediaConstraints = {
      'audio': true,
      'video': {'facingMode': 'user'}
    };
    
    try {
      var stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
      _localRenderer.srcObject = stream;
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Video Call')),
      body: Center(
        child: RTCVideoView(_localRenderer),
      ),
    );
  }
}

설명

• RTCVideoRenderer: 비디오 렌더링을 위한 클래스입니다.
• getUserMedia: 카메라와 마이크 스트림을 가져오는 함수입니다.
• RTCVideoView: 비디오 스트림을 렌더링하는 위젯입니다.

---

4. Peer-to-Peer 통신 설정

실제 통신에서는 두 클라이언트 간에 연결을 설정하기 위해 PeerConnection이 필요합니다.

import 'package:flutter_webrtc/flutter_webrtc.dart';

late RTCPeerConnection _peerConnection;

Future<void> createPeerConnection() async {
  final configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};

  _peerConnection = await createPeerConnection(configuration);

  _peerConnection.onIceCandidate = (candidate) {
    print('ICE Candidate: ${candidate.toMap()}');
  };

  _peerConnection.onAddStream = (stream) {
    print('Stream added: ${stream.id}');
  };
}

설명

• stun:stun.l.google.com:19302: STUN 서버 URL로, 클라이언트의 공인 IP 주소를 확인합니다.
• createPeerConnection: 두 클라이언트 간 연결을 설정합니다.

---

5. Signal 서버와 통신

P2P 연결을 위해서는 Signaling 서버가 필요합니다. Signaling 서버는 두 클라이언트가 SDP(Session Description Protocol)와 ICE(Interactive Connectivity Establishment) 정보를 교환하도록 돕습니다.

서버는 WebSocket이나 Firebase Realtime Database 등을 사용할 수 있습니다.

예제 코드 (WebSocket 사용)

import 'package:web_socket_channel/io.dart';

final channel = IOWebSocketChannel.connect('ws://example.com:1234');

void sendSignal(String message) {
  channel.sink.add(message);
}

channel.stream.listen((message) {
  print('Received signal: $message');
});

---

6. 주의사항 및 최적화 팁

1. 네트워크 품질 관리:
   • 네트워크 상태에 따른 비트레이트 조정 필요
   • QoS(Quality of Service) 설정 검토
2. 오디오 및 비디오 품질:
   • 최적의 코덱(H.264, VP8) 선택
   • 비디오 프레임 크기와 FPS 조정
3. 보안:
   • TLS 암호화 적용
   • DTLS-SRTP 보안 프로토콜 사용

---

결론

flutter_webrtc는 Flutter에서 강력한 실시간 통신 기능을 제공하여 다양한 혁신적인 앱을 개발할 수 있도록 돕습니다. WebRTC의 기본 개념과 실습 코드 예제를 통해 실시간 오디오, 비디오 및 데이터 통신 앱을 구현하는데 참고하시기 바랍니다.