# WEBRTC

113개의 포스트
post-thumbnail

[React] Openvidu Tutorial 따라하기

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

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

[TIL] WebRTC

RTC가 필요한 이유 (출처:노마드코더) Http 프로토콜 일반적으로 서버가 브라우저의 요청에 응답하고 나면 브라우저-서버 간 통신은 끝남! 서버가 브라우저에 데이터를 보낼 수 있는건 오쥑(호쥑ㅎ) 브라우저가 요청을 보냈기 때문!! Web Socket 요청을 보내고

2023년 1월 17일
·
0개의 댓글
·

업 스케일링, 다운 스케일링

업 스케일링(Up Scaling)픽셀 사이에 새로운 픽셀을 끼워 해상도를 높이는 방식이다. 해상도가 낮은 소스를 해상도가 높은 영상으로 변환할 때 사용한다.다운 스케일링(Down Scaling)업 스케일링의 반대로 고 해상도의 소스를 낮은 해상도로 변환한다.

2023년 1월 16일
·
0개의 댓글
·

비트레이트란?

비트레이트는 초당 처리할 수 있는 비트의 수이다.1초 동안 1개의 비트를 처리할 수 있다면 1bps가 된다.특정 해상도의 동영상의 필요한 비트레이트를 계산하려면해상도(width height) fps / 8 을 하면 분당 필요한 비트레이트가 나온다.

2023년 1월 16일
·
0개의 댓글
·
post-thumbnail

[project] WebRTC signaling [ 4 ] // Exit 방나가기

오늘은 RTC 시그널링을 드디어 완료 했습니다 ㅠㅠㅠ !!!!N:N 연결 완료후 해당 방에서 나가는 로직까지 구현이 완료 되었습니다 !!!아래의 코드는 금일까지 작성한 코드입니다방나가기 기능까지 작동 잘 되며 현재 수정할 사항은 P2P 연결 이후 클라이언트에서각자의 s

2023년 1월 11일
·
0개의 댓글
·

WebRTC의 다양한 방식들

WebRTC에서 개발자가 구현할 수 있는 서버는 크게 3가지가 있는데, Signaling, SFU, MCU이다.peer간의 offer,answer라는 session 정보 signal만 중계한다. 따라서 처음 WebRTC가 peer간의 정보를 중계할 때만 서버에 부하가

2023년 1월 11일
·
0개의 댓글
·
post-thumbnail

[project] WebRTC signaling [ 3 ] // using SokcJS

WenRTC p2p 통신을 이용하여 다대다 통신연결을 위한 코드를 작성중입니다!현재 offer 를 주고받는데 까지 성공하였고내일은 answer와 candidate 송수신까지 구현을 목표로 하고있습니다!오늘 새로 알게된 내용으로는 객체의 키값을 변수로 불러올때의 문법입니

2023년 1월 10일
·
0개의 댓글
·

화상상담을 위한 Janus 구성

Janus를 리눅스에 설치하면서 사용한 명령어 정리 > Coturn Server도 함께 설치

2023년 1월 3일
·
0개의 댓글
·
post-thumbnail

Flutter WebRTC 구현 정리

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

2023년 1월 3일
·
0개의 댓글
·
post-thumbnail

webRTC 공부 (P2P 연결)

webRTC는 P2P 연결 해서 영상, 음성 등 데이터를 주고받기 위한 프로토콜시그널링은 webRTC에서 피어간의 정보 (코덱, IP주소, 미디어 타입 등)을 확인하기 위한 과정시그널링은 시그널링 서버를 통해서 두 피어가 SDP를 교환하는 과정이다. 이때 ICE can

2023년 1월 3일
·
0개의 댓글
·
post-thumbnail

[project] WebRTC signaling [ 1 ]

해당 글은 제가 공부하면서 이해한 WebRTC 시그널링 파트를제가 이해한대로 주관적으로 서술한 글입니다!잘못된 부분이 있으며 아직 테스트를 마치지 못하였습니다.저희조 프론트분들의 WebRTC 통신의 이해를 돕기 위한 글이며, 테스트 후 수정 될 수 있습니다.시그널링을

2023년 1월 2일
·
0개의 댓글
·

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

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

[WebRTC] WebRTC 이해하기

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

2022년 12월 28일
·
0개의 댓글
·
post-thumbnail

WebRTC 개념

Interactiev Connectivity Establishment의 약자로 웹 브라우저가 피어(peer)와 연결할 수 있게 도와주는 프레임워크다. 즉시 피어 간 연결은 방화벽을 우회해야하고, 고유 주소(public IP)를 가지고 있어야 한다. 또한 만약 relay

2022년 12월 22일
·
0개의 댓글
·

실시간 회의 서비스에 사용되는 기술

WebRTC 기술을 이용한 서비스를 만들면서 Zoom과 같은 서비스는 300명 가량 되는 회의를 진행하는 데에도 어떻게 안정적인 클라이언트 환경을 제공하는지에 대한 궁금증이 생김→ Livekit이라는 오픈소스 블로그에서 분석한 기술 포스팅을 읽고 작성하게 되었습니다.W

2022년 12월 9일
·
0개의 댓글
·

kurento미디어 서버에 turn서버 연결하는법

1.kurento-media-server에 깔려 있는 파일하나만 수정해주면 된다.turnURL=id:password@외부IP:3478(포트번호)로 수정해주면 끝!

2022년 12월 8일
·
0개의 댓글
·
post-thumbnail

coturn을 활용한 stun 서버 구축

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

2022년 12월 8일
·
0개의 댓글
·
post-thumbnail

webRTC 지옥편

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

2022년 11월 28일
·
0개의 댓글
·
post-thumbnail

WebRTC란?

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

2022년 11월 28일
·
0개의 댓글
·
post-thumbnail

webRTC 정리편

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

2022년 11월 26일
·
0개의 댓글
·