Never give up

일반적인 웹 브라우저 간(Web-to-Web)의 WebRTC 애플리케이션이라면 브라우저의 네이티브 런타임에서 관대하게 작동합니다 패킷 순서가 조금 뒤바뀌어 오더라도 자체적으로 버퍼링을 하거나 암호화 핸드셰이크 과정에서 일어나는 일시적인 상태 미스매치를 알아서 복구해 주죠 하지만 이 피어 연결을 브라우저 밖으로 꺼내서 Headless 에이전트에 올리고 비동기 메시지 브로커와 동기화하는 순간 그 자비로움(?)은 눈 씻고 찾아볼 수 없습니다(Node.js 미디어 런타임은 눈물이 없을 정도로 엄격합니다) ICE Candidate나 SDP Offer가 단 1밀리초라도 순서가 뒤바뀌어 도착하면 엔진은 기다려주지 않고 즉시 invalid state 예외를 뿜으며 미디어 세션을 통째로 날려버립니다 이 무자비한 비동기 ..

회사에서 진행한 프로젝트 중 CCTV와 연결하는 프로젝트가 있었습니다 맡은 역할은 프론트엔드쪽 WebRTC 연결부분이었지만 전반적인 부분을 이해하고자 간단하게 스터디 한 부분을 남겨볼까 합니다 먼저 NVR과 DVR에 대해 알아보도록 하겠습니다NVR(Network Video Recorder) : 카메라에서 디지털 신호로 변환된 영상을 네트워크를 통해 전송 후 저장DVR(Digital Video Recorder) : 카메라에서 전송하는 아날로그 영상을 디지털로 변환하여 저장먼저 공동점은 다음과 같습니다CCTV 카메라에서 수집한 영상 저장 및 관리실시간 녹화, 일정 시간 후 자동삭제 지원인터넷 연결을 통한 원격 모니터링사용자 인증, 암호 설정 등 보안 기능차이점은 다음과 같습니다카메라NVR : LAN 케이블을..

마지막으로 완성된 예제와 삽질 포인트 그리고 깃헙 링크와 함께 마무리 하도록 하겠습니다  필자가 작업하면서 마주친 삽질 포인트1. 상대방의 media가 연결이 안될 때 iceCandidate가 잘 연결되었는지 확인이 필요합니다 sveltekit으로 개발할 때, npm run을 했을 때 서브된 ip가 여러개가 나온것을 확인했습니다 정상적으로 하나의 ip에서 작동되고 있는지 확인이 필요합니다 2. 소리가 echo처럼 울릴 때 본인의 미디어 사운드를 끕니다 안그러면 계속해서 울리고 더 심해지면 귀가 아파질 정도였습니다.. 3. media 를 전달 하거나 전달 받을 때, on/off할 때 media를 track하는 부분에 조금 더 신경을 써야됩니다 turn on/off과정에서 이전 track을 확실하게 초기화 ..

먼저 사용한 패키지는 3가지입니다 1. flutter_webrtc : webRTC를 사용하기 편하도록 개발해놓은 패키지 2. socket_io_client : 소켓연결 3. vibration : 전화 온것같은 효과(?) 여기서 상태관리는 어디있냐 라는 의문이 들 수 있는데 해당 예제에서는 기본으로 제공하는 setState, ValueListenableBuilder로 구현했습니다 main.dart import 'package:flutter/material.dart'; import 'package:web_rtc/view/webrtc_main_view.dart'; void main() { runApp(const MaterialApp(home: WebRTCMainView())); } models // iceCa..

web은 svelte로 개발하고 react로 옮겨서 다시 작업을 했습니다 하다보니 svelte가 정말 편하구나.. 싶었던 순간이 많았던것 같습니다 상태관리 라이브러리는 사용하지 않았고 socket io로 소켓 통신을 처리했습니다 src/main/index.tsx import React from "react"; import useWebRTCHook from "src/hooks/useWebRTCHook"; import BtnArea from "./BtnArea"; import CallPopup from "./CallPopup"; import UserListArea from "./UserListArea"; import VideoArea from "./VideoArea"; import styles from '...

이전 포스트에서 peer와 peer를 연결할 때 signaling server를 이용한다고 했는데 필자는 socket으로 구현을 해봤습니다 const ip = require('ip') const express = require('express'); const app = express(); const server = app.listen(9000, ip.address(), () => { const address = server.address() console.log(`[scoket] on ${address.address}:${address.port}`) }); const io = require('socket.io')(server, { cors: { origin: "*", } }) let userList = ..

최근에 Web RTC를 개발해볼 기회가 생겨서 한번 간단하게 예제를 만들어봤는데 이것저것 설명할 부분, 그리고 node, react, flutter 이렇게 3가지를 구현해서 각각 간단하게(?) 설명드리고자 포스트를 여러개로 나눴습니다 ---- 서론은 여기까지 하고 WebRTC(Web Real-Time Communication)은 별도의 서버를 사용하지않고 peer와 peer가 연결을 해서 음성, 영상 통화 및 데이터 등을 교환할 수 있는 기술입니다 자세한 설명은 MDN을 참고하시길 바랍니다(링크 : https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API) 먼저 WebRTC로 영상통화 구현을 위해 필요한 지식들은 크게 3가지로1. STUN(Session Tra..