# WEBRTC

[React] Openvidu Tutorial 따라하기
목적: Openvidu를 이용한 WebRTC 비디오 공유 연습기술스택 : Python, React, DockerDocker잘 돌아간다.Openvidu가 제공하는 Tutorial repo를 clone한다.연습을 위해 익숙한 언어로 서버환경을 셋팅하기 위해 파이썬 선택했다

[TIL] WebRTC
RTC가 필요한 이유 (출처:노마드코더) Http 프로토콜 일반적으로 서버가 브라우저의 요청에 응답하고 나면 브라우저-서버 간 통신은 끝남! 서버가 브라우저에 데이터를 보낼 수 있는건 오쥑(호쥑ㅎ) 브라우저가 요청을 보냈기 때문!! Web Socket 요청을 보내고
업 스케일링, 다운 스케일링
업 스케일링(Up Scaling)픽셀 사이에 새로운 픽셀을 끼워 해상도를 높이는 방식이다. 해상도가 낮은 소스를 해상도가 높은 영상으로 변환할 때 사용한다.다운 스케일링(Down Scaling)업 스케일링의 반대로 고 해상도의 소스를 낮은 해상도로 변환한다.
비트레이트란?
비트레이트는 초당 처리할 수 있는 비트의 수이다.1초 동안 1개의 비트를 처리할 수 있다면 1bps가 된다.특정 해상도의 동영상의 필요한 비트레이트를 계산하려면해상도(width height) fps / 8 을 하면 분당 필요한 비트레이트가 나온다.

[project] WebRTC signaling [ 4 ] // Exit 방나가기
오늘은 RTC 시그널링을 드디어 완료 했습니다 ㅠㅠㅠ !!!!N:N 연결 완료후 해당 방에서 나가는 로직까지 구현이 완료 되었습니다 !!!아래의 코드는 금일까지 작성한 코드입니다방나가기 기능까지 작동 잘 되며 현재 수정할 사항은 P2P 연결 이후 클라이언트에서각자의 s
WebRTC의 다양한 방식들
WebRTC에서 개발자가 구현할 수 있는 서버는 크게 3가지가 있는데, Signaling, SFU, MCU이다.peer간의 offer,answer라는 session 정보 signal만 중계한다. 따라서 처음 WebRTC가 peer간의 정보를 중계할 때만 서버에 부하가
[project] WebRTC signaling [ 3 ] // using SokcJS
WenRTC p2p 통신을 이용하여 다대다 통신연결을 위한 코드를 작성중입니다!현재 offer 를 주고받는데 까지 성공하였고내일은 answer와 candidate 송수신까지 구현을 목표로 하고있습니다!오늘 새로 알게된 내용으로는 객체의 키값을 변수로 불러올때의 문법입니

Flutter WebRTC 구현 정리
Flutter WebRtc는 2가지의 dependencies가 필요합니다. flutter_webrtc 와 socket_io_client입니다. pubspec.yaml에 아래 2가지를 추가한 후 Pub get을 합니다. 반드시 socket.io을 사용해야 하는 것은 아닙

webRTC 공부 (P2P 연결)
webRTC는 P2P 연결 해서 영상, 음성 등 데이터를 주고받기 위한 프로토콜시그널링은 webRTC에서 피어간의 정보 (코덱, IP주소, 미디어 타입 등)을 확인하기 위한 과정시그널링은 시그널링 서버를 통해서 두 피어가 SDP를 교환하는 과정이다. 이때 ICE can
[project] WebRTC signaling [ 1 ]
해당 글은 제가 공부하면서 이해한 WebRTC 시그널링 파트를제가 이해한대로 주관적으로 서술한 글입니다!잘못된 부분이 있으며 아직 테스트를 마치지 못하였습니다.저희조 프론트분들의 WebRTC 통신의 이해를 돕기 위한 글이며, 테스트 후 수정 될 수 있습니다.시그널링을
230102 [ERROR] srcObject가 원하는 유형 MediaSourceHandle 또는 MediaStream
사용한 툴 REDUX/TOOLKIT 오류내용 > Uncaught TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type '(Medi

[WebRTC] WebRTC 이해하기
Web Real-Time Communication웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림 할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술드라이버나 플러그인 설치 없이 웹 브라우저 간 P2P 연결로

WebRTC 개념
Interactiev Connectivity Establishment의 약자로 웹 브라우저가 피어(peer)와 연결할 수 있게 도와주는 프레임워크다. 즉시 피어 간 연결은 방화벽을 우회해야하고, 고유 주소(public IP)를 가지고 있어야 한다. 또한 만약 relay
실시간 회의 서비스에 사용되는 기술
WebRTC 기술을 이용한 서비스를 만들면서 Zoom과 같은 서비스는 300명 가량 되는 회의를 진행하는 데에도 어떻게 안정적인 클라이언트 환경을 제공하는지에 대한 궁금증이 생김→ Livekit이라는 오픈소스 블로그에서 분석한 기술 포스팅을 읽고 작성하게 되었습니다.W
kurento미디어 서버에 turn서버 연결하는법
1.kurento-media-server에 깔려 있는 파일하나만 수정해주면 된다.turnURL=id:password@외부IP:3478(포트번호)로 수정해주면 끝!

coturn을 활용한 stun 서버 구축
화상채팅에 필요한 WebRTC에서 사용자간의 IP주소를 전송해주려면 stun서버가 필요!! aws프리티어를 활용해 구축해보자 1.AWS ec2프리티어 생성 2.ec2에 coturn 설치(putty로 ec2접속) sudo apt-get -y update sudo

webRTC 지옥편
위 코드를 보면 app.use(cors{origin: "\*", }) );부분이 있을거다. socket.js 파일에서 cors: origin: "\*" 가 들어가기 때문에 혹시 몰라서 app.use(cors()); 변경해주니까 갑자기 너무 잘되는 거 아니겠는가?!하지만

WebRTC란?
WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준

webRTC 정리편
그래서 한번 이 곳에 webRTC의 종류와 장단점에 대해 이야기하고 싶어서 적게 되었다.먼저 P2P에 대해 설명하도록 하겠다. P2P는 말그대로 Peer To Peer 사용자의 컴퓨터(클라이언트)를 직접 서로 연결 시키는 것이다. 나의 비디오 오디오 데이터 & 상대방의