-
Notifications
You must be signed in to change notification settings - Fork 7
๐ชต 2. WebRTC์ ๋ํ์ฌ
ssum1ra edited this page Dec 5, 2024
·
1 revision
- ์น ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ์ฌ์ดํธ๊ฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ค์๊ฐ ์ค๋์ค, ๋น๋์ค, ๋ฐ์ดํฐ ์ ์ก์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ธฐ์
- P2P(Peer-to-Peer) ๊ธฐ์ ์ ํตํด ์ฌ์ฉ์ ๊ฐ์ ์ง์ ์ ์ธ ์ฐ๊ฒฐ์ ์ง์
- ๋น ๋ฅด๊ณ ์ง์ฐ์ด ์ ์ ํต์
- ํ๋ฌ๊ทธ์ธ์ด๋ ์ธ๋ถ ์ํํธ์จ์ด ์ค์น ์์ด ๋์
-
Peer Connection (ํ์)
- ํด๋ผ์ด์ธํธ ๊ฐ์ P2P ์ฐ๊ฒฐ์ ์ค์ ํ๊ณ ๊ด๋ฆฌ
- WebRTC์ ๊ธฐ๋ณธ ๊ตฌ์ฑ ์์๋ก, ๋ชจ๋ WebRTC ํต์ ์ ๊ธฐ๋ฐ์ด ๋๋ค.
-
Data Channel (์ ํ)
- ํ ์คํธ, ํ์ผ ๋ฑ ์ฌ์ฉ์ ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ค์๊ฐ ์ ์ก
-
Media Stream (์ ํ)
- ๋ก์ปฌ ์ค๋์ค, ๋น๋์ค ์คํธ๋ฆผ์ ๊ฐ์ ธ์ค๊ณ ์ ์ก
- Session Traversal Utilities for NAT
- ํด๋ผ์ด์ธํธ์ ๊ณต์ฉ IP ์ฃผ์์ ํฌํธ๋ฅผ ๋ฐ๊ฒฌํ์ฌ, ์๋๋ฐฉ๊ณผ ์ฐ๊ฒฐํ ์ ์๋๋ก ๋๋ ์๋ฒ
-
๋์ ๋ฐฉ์
- ํด๋ผ์ด์ธํธ๊ฐ STUN ์๋ฒ์ ์์ ์ ๊ณต์ฉ IP ์ฃผ์์ ํฌํธ๋ฅผ ์์ฒญํ๋ค.
- STUN ์๋ฒ๊ฐ ์๋ต์ผ๋ก ํด๋ผ์ด์ธํธ์ ๊ณต์ฉ IP์ ํฌํธ๋ฅผ ๋ฐํํ๋ค.
- ํด๋ผ์ด์ธํธ๋ ์ด ์ ๋ณด๋ฅผ ๋ค๋ฅธ ํผ์ด์๊ฒ ์ ๋ฌํ์ฌ P2P ์ฐ๊ฒฐ์ ์ค์ ํ ์ ์๋ค.
- Traversal Using Relays around NAT
- P2P ์ฐ๊ฒฐ์ด ๋ถ๊ฐ๋ฅํ ๊ฒฝ์ฐ ๋ฐ์ดํฐ๋ฅผ ์ค๊ณํ๋ ์๋ฒ
-
๋์ ๋ฐฉ์
- ํด๋ผ์ด์ธํธ๊ฐ TURN ์๋ฒ์ ์ฐ๊ฒฐ์ ์์ฒญํ๊ณ , TURN ์๋ฒ๋ ์ค๊ณ ์ญํ ์ ์ํํ๋ค.
- ๋ชจ๋ ๋ฐ์ดํฐ๊ฐ TURN ์๋ฒ๋ฅผ ํตํด ์ ๋ฌ๋๋ฏ๋ก ํด๋ผ์ด์ธํธ๋ ์ง์ ์ฐ๊ฒฐ์ด ์๋ ์๋ฒ๋ฅผ ํตํ ๊ฐ์ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๊ฒ ๋๋ค.
-
Session Description Protocol
-
๋ฏธ๋์ด ์ธ์ ์ ์ ๋ณด๋ฅผ ํฌํจํ ํ ์คํธ ํ์์ ๋ฐ์ดํฐ
-
์ญํ
- WebRTC๊ฐ ์ค๋์ค, ๋น๋์ค, ๋ฐ์ดํฐ ์คํธ๋ฆผ์ ๋ํ ์ค์ ๊ณผ ์๊ตฌ ์ฌํญ์ ์ํธ ๊ตํํ ์ ์๋๋ก ๋์์ค๋ค.
-
์์
v=0 o=- 4611739099356753928 2 IN IP4 127.0.0.1 s=- t=0 0 m=audio 49170 RTP/AVP 0 c=IN IP4 203.0.113.1 a=rtpmap:0 PCMU/8000 m=video 51372 RTP/AVP 31 a=rtpmap:31 H264/90000
-
SDP ๊ตํ
- WebRTC ์๊ทธ๋๋ง ๋จ๊ณ์์ ์ด๋ฃจ์ด์ง๋ฉฐ, ์ฐ๊ฒฐ ์ค์ ๋ฐ ํ์ ๊ณผ์ ์ ํฌํจํ๋ค.
- ๋ ํด๋ผ์ด์ธํธ๋ ๊ฐ์์ ๋ฏธ๋์ด ์ค์ ๊ณผ ๋คํธ์ํฌ ์ ๋ณด๋ฅผ ์ดํดํ๊ณ ์ํธ ํธํ ๊ฐ๋ฅํ ์ค์ ์ผ๋ก P2P ์ฐ๊ฒฐ์ ํ๋ฆฝํ๊ฒ ๋๋ค.
-
๊ตํ ๊ณผ์
- ์คํผ(Offer) ์ ์ก : ํ ํด๋ผ์ด์ธํธ๊ฐ SDP ์คํผ๋ฅผ ์์ฑํ์ฌ ์๋๋ฐฉ์๊ฒ ์ ์กํ๋ค. ์ฌ๊ธฐ์๋ ์ฐ๊ฒฐ์ ์ํ ๋ฏธ๋์ด ์ ๋ณด, ์ฝ๋ฑ, ๋คํธ์ํฌ ์ ๋ณด ๋ฑ์ด ํฌํจ๋๋ค.
- ์๋ต(Answer) ์ ์ก : ์คํผ๋ฅผ ๋ฐ์ ์๋๋ฐฉ์ ์ด๋ฅผ ์๋ฝํ๊ฑฐ๋ ์ค์ ์ ์กฐ์ ํ์ฌ SDP ์๋ต์ ์์ฑํ๊ณ ๋ค์ ์ ์กํ๋ค.
- Interactive Connectivity Establishment
- STUN๊ณผ TURN์ ํจ๊ป ์ฌ์ฉํ์ฌ ๋ ํด๋ผ์ด์ธํธ๊ฐ ์ฐ๊ฒฐํ ์ ์๋ ์ต์ ์ ๊ฒฝ๋ก๋ฅผ ์ฐพ๋ ํ๋ ์์ํฌ
-
๋์ ๋ฐฉ์
- ํด๋ผ์ด์ธํธ๋ ๋ก์ปฌ IP ์ฃผ์, ๊ณต์ฉ IP ์ฃผ์(STUN ์๋ฒ ์ฌ์ฉ), TURN ์๋ฒ ์ค๊ณ ์ฃผ์๋ฅผ ๋ชจ๋ ํฌํจํ ICE ํ๋ณด(Candidate)๋ฅผ ์์ฑํ๋ค.
- ์ด ํ๋ณด๋ค์ ์๋๋ฐฉ์๊ฒ ๋ณด๋ด๊ณ , ์๋๋ฐฉ๋ ํ๋ณด๋ฅผ ๋ณด๋ธ๋ค.
- ๋ ํด๋ผ์ด์ธํธ๋ ๊ฐ์ฅ ์ข์ ๊ฒฝ๋ก๋ฅผ ์ฐพ์ ์ต์ ์ P2P ์ฐ๊ฒฐ์ ์ค์ ํ๋ค.
- SDP ๊ตํ โ ICE ํ๋ณด ๊ตํ โ P2P ์ฐ๊ฒฐ ์ค์
- 1. ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ๋ฐ ํ๋ก์ ํธ ๋ฌธ์ํ
- 2. ์ค์๊ฐ ํต์
- 3. ์ธํ๋ผ ๋ฐ CI/CD
- 4. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด Canvas ๊ตฌํํ๊ธฐ
- 5. ์บ๋ฒ์ค ๋๊ธฐํ๋ฅผ ์ํ ์์ CRDT ๊ตฌํ๊ธฐ
-
6. ์ปดํฌ๋ํธ ํจํด๋ถํฐ ์น์์ผ๊น์ง, ํจ์จ์ ์ธ FE ์ค๊ณ
- ์ข์ ์ปดํฌ๋ํธ๋ ๋ฌด์์ธ๊ฐ? + Headless Pattern
- ํจ์จ์ ์ธ UI ์ปดํฌ๋ํธ ์คํ์ผ๋ง: Tailwind CSS + cn.ts
- Tailwind CSS๋ก ๋์์ธ ์์คํ ๋ฐ UI ์ปดํฌ๋ํธ ์ธํ
- ์น์์ผ ํด๋ผ์ด์ธํธ ๊ตฌํ๊ธฐ: React ํ๊ฒฝ์์ ํจ์จ์ ์ธ ์น์์ผ ์ํคํ ์ฒ
- ์น์์ผ ํด๋ผ์ด์ธํธ ์ฝ๋ ๋ถ์ ๋ฐ ๊ณต์
- 7. ํธ๋ฌ๋ธ ์ํ ๋ฐ ์ฑ๋ฅ/UX ๊ฐ์
- 1์ฃผ์ฐจ ๊ธฐ์ ๊ณต์
- 2์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 3์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 4์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- 5์ฃผ์ฐจ ๋ฐ๋ชจ ๋ฐ์ด
- WEEK 06 ์ฃผ๊ฐ ๊ณํ
- WEEK 06 ๋ฐ์ผ๋ฆฌ ์คํฌ๋ผ
- WEEK 06 ์ฃผ๊ฐ ํ๊ณ