DevDiana

안녕하세요 Diana 입니다. 오늘은 WebRTC 글에 이어 화상 통화를 구현하기 전, 통화를 구현하기 위해 핵심 개념인 VoIP와 CallKit에 대해 알아보도록 하겠습니다.우선 통화의 과정은 크게 아래와 같습니다. PushKit은 앱을 깨우고 CallKit은 화면을 보여주며 WebRTC는 실제로 목소리를 전달합니다.이제 각각의 개념에 대해 알아보도록 하겠습니다. ✅ VoIP(Voice over IP)VoIP는 이름 그대로 IP 네트워크 위로 음성을 보내는 것을 의미합니다.VoIP는 음성을 잘게 쪼개 데이터 패킷으로 만들어 인터넷으로 흘려보내는 패킷 교환 방식을 사용하며 카카오톡의 보이스톡, 페이스 타임, 디스코드 통화 등이 모두 이 VoIP 를 사용합니다. iOS13 이후 부터는 VoIP와 Push..

안녕하세요 오늘은 WebRTC의 연결에 이어 채팅을 구현해보려고 합니다. 제일 어려운 연결 부분은 해결했으니 바로 구현해보도록 하겠습니다. ✅ 채팅 구현연결을 전부 구현해놨기 때문에 채팅은 어렵지 않습니다.우선 이전에 만들어놨던 WebTRCClient의 Delegate에 text 전송을 위한 데이터 타입들을 생성해줍니다.이후 text 외에도 다른 타입들을 추가할 예정이므로 MessageKind를 생성해줍니다.enum MessageKind: String, Codable { case text}struct Envelope: Codable { let kind: MessageKind let text: String?}struct ChatMessage: Identifiable { let id ..

안녕하세요 Diana 입니다. 오늘은 WebRTC 구현을 이어나가보도록 하겠습니다. 앞선 글의 WebRTCClient 코드에서는 SDP를 생성하여 이를 등록한 뒤 이를 어디에도 올리지 않고 끝냈습니다. 이번 글에서는 생성된 SDP와 ICE 후보들을 Firestore에 올려 상대가 읽을 수 있도록 통신 부분을 구현해주도록 하겠습니다. ✅ DataChannel 생성우선 WebRTC를 위해 필요한 객체는 아래와 같습니다.MediaStream: 카메라와 마이크 등의 데이터 스트림 접근RTCPeerConnection: 암호화 및 대역폭 관리 및 오디오, 비디오 연결RTCDataChannel: 일반적인 데이터의 P2P 통신현재 offer가 만든 SDP 텍스트와 수집된 ICE Candidates 들은 전부 폰 메모..

오늘은 앞에서 배운 WebRTC의 개념을 활용해 채팅, 파일전송 그리고 화상 통화 등의 간단한 기능들을 구현해보려고 합니다. 시작하기에 앞서 저는 이 세 기능을 따로 만드는 것이 아닌 하나의 연결 위에 얹는다는 관점으로 진행할 예정입니다.WebRTC의 연결을 하나 뚫어 놓으면 그 안에는 임의의 데이터를 전송하는 데이터 채널과 음성, 영상 전용인 미디어 트랙이 생성됩니다. 채팅과 파일 전송 등의 기능은 데이터 채널을 사용하고 화상 통화 등의 기능은 미디어 트랙을 거치게 되죠. 즉, 연결의 기반이 되는 노란색 칸을 제대로 만들 필요가 있습니다.✅ 프로젝트 세팅우선 시작에 앞서 SPM으로 WebRTC 패키지를 추가합니다.그리고 Info.plist에는 NSCameraUsageDescription과 NSMicr..

안녕하세요 Diana 입니다. 오늘은 WebRTC에 대해 알아보려고 합니다.시작할게요~ ✅ WebRTC(Web RealTime Communication)WebRTC는 앱이나 브라우저끼리 서버를 거치지 않고 비디오, 오디오, 데이터 등을 실시간 P2P로 주고 받는 방식입니다.화상통화, 음성통화, 실시간 데이터 전송을 서버 중계 없이 단말끼리 처리하는게 핵심이죠. 배경이 되는 네트워크 개념을 훑어보면 아래와 같습니다.일반 통신 vs 직접 통신우리가 흔히 쓰는 HTTP는 TCP 기반이라 요청이기 때문에, 응답이 서버를 거치고 패킷 순서와 재전송을 보장하느냐고 지연이 생깁니다.반면, 음성/영상의 경우 전송에 지연이 없고 빨라야 하기 때문에 WebRTC는 UDP 위에서 작동합니다.화상통화를 할 때 프레임이 하나 ..