DEV Community

Gunwoo
Gunwoo

Posted on

๐Ÿค” WebRTC?

๐Ÿ“ ๊ถ๊ธˆํ•œ ๋ชจ๋“  ๊ฒƒ์„ ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค.
๐Ÿ˜Ž ๊ธฐ๋ก์—์„œ ๋ฉˆ์ถ”์ง€ ์•Š๊ณ  ๋‚˜์˜ ๊ฒƒ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
๐Ÿ™ˆ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ๋‹ค๋ฉด ์–ธ์ œ๋“ ์ง€ ๋Œ“๊ธ€์— ๋‚จ๊ฒจ์ฃผ์„ธ์š” :D

๐Ÿค” WebRTC?

Web Real-Time Communication์˜ ์•ฝ์ž๋กœ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜(๋˜ํ•œ android, ios๋„ ์ง€์›)์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์ด๋‹ค. ์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์ ์€ ๋ณ„๋„์˜ ์†Œํ”„ํŠธ์›จ์–ด์˜ ๋„์›€ ์—†์ด(๋“œ๋ผ์ด๋ฒ„, ํ”Œ๋Ÿฌ๊ทธ์ธ ์—†์ด) ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ†ต์‹ ์„(p2p) ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์˜์ƒ, ์Œ์„ฑ ๋ฐ ๋ฐ์ดํ„ฐ ํ†ต์‹ ์„ ํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ API๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.(๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›ํ•ด์ฃผ๊ณ  ์žˆ๋‹ค.=>IE๋Š” ์ง€์›๋˜์ง€ ์•Š๋Š”๋‹ค..., ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด์Šˆ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ adapter.js) WebRTC๋ฅผ ํ†ตํ•ด ์Œ์„ฑํ†ตํ™”, ๋น„๋””์˜ค์ฑ„ํŒ… ๋ฐ ํŒŒ์ผ ๊ณต์œ ๋ฅผ ์œ„ํ•œ ์›น-์•ฑ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ˜„ WebRTC์— ๋Œ€ํ•œ ๋˜๋‹ค๋ฅธ ์ •๋ณด!

  • ๊ตฌ๊ธ€์—์„œ ์Œ์„ฑ/์˜์ƒ ์ฝ”๋ฑ ๋ฐ ์—์ฝ” ์บ”์Šฌ๋ง ๊ธฐ์ˆ ์„ ๊ฐ€์ง„ 2๊ฐœ์˜ ํšŒ์‚ฌ๋ฅผ ์ธ์ˆ˜ํ•œ ํ›„, ํˆฌ์ž์™€ ๊ฐœ๋ฐœ์„ ๊ฑฐ์ฒ˜ 2011๋…„๋„์— WebRTC๋ฅผ ์˜คํ”ˆ์†Œ์Šคํ™”ํ•˜์—ฌ API ํ˜•ํƒœ๋กœ ๊ณต๊ฐœํ–ˆ๋‹ค.
  • WebRTC๊ฐ€ ์žˆ๊ธฐ ์ „์—๋Š” ์›น์—์„œ ํ™”์ƒ ํ†ต์‹ ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„  ์‚ฌ์šฉ์ž๊ฐ€ ๋ณ„๋„์˜ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•ด์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋Ÿฌ์›€ ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ WebRTC๋กœ ์ธํ•ด ์ด๋Ÿฐ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐ๋˜์—ˆ๋‹ค.
  • W3C์—์„œ WebRTC์˜ ํ‘œ์ค€๊ณผ API ์ •์˜๋ฅผ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ , IETF(๊ตญ์ œ ์ธํ„ฐ๋„ท ํ‘œ์ค€ํ™” ๊ธฐ๊ตฌ)์—์„œ ํ”„๋กœํ† ์ฝœ์˜ ํ‘œ์ค€ํ™” ์ž‘์—…์„ ์‹œ์ž‘ํ–ˆ๋‹ค.
  • WebRTC๋Š” ๊ตฌ๊ธ€๋ฟ ์•„๋‹ˆ๋ผ, Mozilla, Opera ๋“ฑ๊ณผ ๊ฐ™์€ ์›น๋ธŒ๋ผ์šฐ์ € ์ฃผ์š” ๊ธฐ์—…๋“ค์˜ ์ „์ ์ธ ์ง€์›์„ ๋ฐ›๋Š”๋‹ค.

๐Ÿ˜ WebRTC๋ฅผ ์ดํ•ดํ•˜๋ ค๋ฉด ํ•„์š”ํ•œ ์ง€์‹!

  • NAT(Network Address Translation)
    NAT์€ ํ•ด๋‹น ๊ธฐ๊ธฐ์˜ ๊ณต์ธ(public) IP๋ฅผ ๋ถ€์—ฌํ•˜๋Š”๋ฐ, ๋ผ์šฐํ„ฐ๊ฐ€ ๊ณต์ธ IP๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ณ , ์—ฌ๊ธฐ์— ์—ฐ๊ฒฐ๋œ ๊ธฐ๊ธฐ๋Š” ์‚ฌ์„ค(private) IP ์ฃผ์†Œ๋ฅผ ๊ฐ–๊ฒŒ๋œ๋‹ค. ๊ณต์ธIP๋Š” ์œ ์ผํ•œ IP๋ฉฐ, ์‚ฌ์„คIP๋Š” ํŠน์ • ๋„คํŠธ์›Œํฌ ์•ˆ์—์„œ๋งŒ ์œ ํšจํ•˜๋‹ค.
    ์—ฌ๊ธฐ์„œ ๊ณต์ธIP๋Š” ์‹ค์ œ ์ฃผ์†Œ์™€ ๊ฐ™๊ณ  ์™ธ๋ถ€์— ๊ณต๊ฐœ๋˜์–ด ์žˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ๋‹ค๋ฅธ ์ปดํ“จํ„ฐ์—์„œ ๊ฒ€์ƒ‰, ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๊ณต์ธIP๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋ณด์•ˆ ๋ฐฉํ™”๋ฒฝ์ด ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•˜๋‹ค.
    ์‚ฌ์„คIP๋Š” ์™ธ๋ถ€์— ๊ณต๊ฐœ๋˜์ง€ ์•Š์•„ ๊ฒ€์ƒ‰, ์ ‘๊ทผ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ์ฃผ๋กœ ์ธํ„ฐ๋„ท์„ ์‚ฌ์šฉํ•  ๋•Œ, ๋ผ์šฐํ„ฐ์— ๊ณต์ธIP๋ฅผ ๋‘๊ณ  ๊ทธ ๋ผ์šฐํ„ฐ์— ์—ฌ๋Ÿฌ๋Œ€์˜ ๋””๋ฐ”์ด์Šค๋“ค์ด ์‚ฌ์„คIP๋ฅผ ๊ฐ€์ง€๊ณ ์„œ ์ ‘์†ํ•˜๊ฒŒ ๋œ๋‹ค.
    ๋‹ค์‹œ NAT์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ฒŒ ๋˜๋ฉด, ํ†ต์ƒ์ ์œผ๋กœ ๋„คํŠธ์›Œํฌ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๊ธฐ์œ„ํ•ด์„  ๊ณต์ธ IP๊ฐ€ ํ•„์š”ํ•˜๋‹ค. NAT์€ ์‚ฌ์„คIP๋ฅผ ๊ณต์ธIP๋กœ 1๋Œ€1 ๋Œ€์‘์‹œ์ผœ ๋ณ€ํ™˜ํ•˜๋Š” ์žฅ์น˜์ด๋‹ค.
    ์—ฌ๊ธฐ์„œ WebRTC๋Š” P2P ๋ฐฉ์‹์œผ๋กœ ์„œ๋กœ์˜ ์ •๋ณด(๊ณต์ธIP)๋ฅผ ์•Œ์•„์•ผํ•œ๋‹ค.

  • Signaling
    RTCPeerConnection์ด ์ƒ์„ฑ๋˜๊ธฐ ์ „์— ์„œ๋กœ ๋‹ค๋ฅธ ๋„คํŠธ์›Œํฌ์˜ ๊ธฐ๊ธฐ๋ผ๋ฆฌ ์„œ๋กœ์˜ ์œ„์น˜ ํ™•์ธ๊ณผ ๋ฏธ๋””์–ด ํฌ๋ฉง์— ๋Œ€ํ•œ ํ˜‘์˜๋ฅผ ํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ์‹œ๊ทธ๋„๋ง์ด๋ผ ๋ถ€๋ฅธ๋‹ค.

  • Signaling Server
    P2P ํ†ต์‹ ์„ ์œ„ํ•ด ์„œ๋กœ๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ๋Š” ์—ญํ™œ์„ ํ•œ๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‚ฌ์šฉ์ž์˜ ์žฅ์น˜์— ์ ‘๊ทผํ•œ๋‹ค.

  • Signaling ์„œ๋ฒ„๋ฅผ ํ†ตํ•ด ์ƒ๋Œ€๋ฐฉ์˜ ์ •๋ณด๋ฅผ ์–ป๋Š”๋‹ค.

  • Peer to Peer connection์„ ํ†ตํ•ด ํ†ต์‹ ํ•œ๋‹ค.
    ์ฆ‰, ๊ฐ Peer๊ฐ€ ์—ฐ๊ฒฐ๋˜๊ธฐ ์œ„ํ•ด์„  Signaling ์„œ๋ฒ„์— ๋จผ์ € ์ ‘๊ทผํ•˜์—ฌ ์ƒ๋Œ€๋ฐฉ์˜ ์ •๋ณด๋ฅผ ์•Œ์•„๋‚ธ ํ›„ P2P Connection์„ ํ•œ๋‹ค. Caller๊ฐ€ ์ƒ๋Œ€ ์‚ฌ์šฉ์ž์—๊ฒŒ Signaling์„œ๋ฒ„๋ฅผ ํ†ตํ•ด ์ž์‹ ์˜ ์ •๋ณด๋“ค์„ ์ œ๊ณตํ•˜๊ณ , Callee๋Š” ๊ทธ ์ •๋ณด๋“ค์— ๋Œ€ํ•ด ์ž์‹ ์˜ ์ •๋ณด๋ฅผ ๋‹ด์•„ ๋‹ต์žฅํ•œ๋‹ค.
    Signaling ์„œ๋ฒ„์—์„œ ๊ตํ™˜ํ•ด์•ผ ํ•  ์ •๋ณด๋“ค์€ ์„ธ์…˜ ์ œ์–ด ๋ฉ”์„ธ์ง€(ํ†ต์‹ ์„ ์ดˆ๊ธฐํ™”ํ•˜๊ฑฐ๋‚˜ ๋‹ซ๊ณ  ์˜ค๋ฅ˜๋ฅผ ๋ณด๊ณ ํ•œ๋‹ค), IP์ฃผ์†Œ/ํฌํŠธ, ๋ณด์•ˆํ‚ค, ์ฝ”๋ฑ/ํ•ด์ƒ๋„, ์—๋Ÿฌ๋ฉ”์„ธ์ง€, ๋ฏธ๋””์–ด ์œ ํ˜•, ๋“ฑ์ด ์žˆ๋‹ค.
    Signaling ์„œ๋ฒ„๋Š” ์ง์ ‘ ๊ตฌ์ถ•ํ•ด๋„ ๋˜๊ณ (WebSocket, SPI, XMPP/Jingle, Netty), cloud message platform(Pusher, Kaazing, PubNub), ์•„๋งˆ์กด์˜ Kinesis Video Stream , ๊ตฌ๊ธ€์˜ AppRTC์—์„œ๋Š” Google App Engine์œผ๋กœ ๊ตฌํ˜„๋œ ์‹œ๊ทธ๋„๋ง ์„œ๋ฒ„์„ ์‚ฌ์šฉํ•ด๋„ ๋œ๋‹ค.

  • SDP (Session Description Protocol)

    SDP๋Š” P2P๋กœ ์„œ๋กœ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ดํ•ดํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋œ๋‹ค.

    ๋ฐ์ดํ„ฐ์˜ ํ•ด์ƒ๋„, ํ˜•์‹, ์ฝ”๋ฑ, ์•”ํ˜ธํ™” ๋ฐฉ๋ฒ• ๋“ฑ์„ ๊ธฐ์ˆ ํ•˜๋Š” ํ‘œ์ค€(ํ”„๋กœํ† ์ฝœ)์ด๋ฉฐ, ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

  • JSEP (JavaScript Session Establishment Protocol)

  • ICE (Interactive Connectivity Establishment)

    ICE๋Š” P2P๊ฐ„ ํ†ต์‹ ์„ ์œ„ํ•œ ๊ธฐ์ˆ ๋กœ ์„œ๋กœ์˜ ๊ธฐ๊ธฐ๊ฐ€ ํ†ต์‹ ํ•˜๊ธฐ ์œ„ํ•œ ์ตœ์ ์˜ ๊ฒฝ๋กœ(ํ†ต์‹  ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ์ฃผ์†Œ๋“ค์„ ๊ฐ€์ ธ์˜จ๋‹ค)๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. ICE๋Š” ์ตœ์ ์˜ ๊ฒฝ๋กœ๋ฅผ ์ฐพ๊ธฐ์œ„ํ•ด STUN๊ณผ TURN์„ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋กœ SDP ์ œ์•ˆ ๋ฐ ์ˆ˜๋ฝ ๋ชจ๋ธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. NATํ™˜๊ฒฝ์—์„œ ์ž์‹ ์˜ ๊ณต์ธIP๋ฅผ ํŒŒ์•…ํ•˜๊ณ  ์ƒ๋Œ€๋ฐฉ์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ธฐ ์œ„ํ•œ ์‘๋‹ต ํ”„๋กœํ† ์ฝœ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ICE Candidate

    ICE๋ฅผ ํ†ตํ•ด ์–ป๊ฒŒ๋œ ํ›„๋ณด๋ฅผ Candidate๋ผ ๋ถ€๋ฅธ๋‹ค. SDP๋ฅผ ๊ฒฐ์ •ํ•œ ํ›„์—๋Š” ICE Candidate์„ ์„œ๋กœ ๊ตํ™˜ํ•˜๋ฉฐ ์—ฌ๋Ÿฌ ๊ฒฝ๋กœ์ค‘ ์ตœ์ ์˜ ICE๋ฅผ ๊ฒฐ์ •ํ•˜๊ฒŒ ํ•œ๋‹ค. ์ด ๊ณผ์ •์—์„œ ์ด๋ฏธ ์ŠคํŠธ๋ฆฌ๋ฐ์ด ์‹œ์ž‘๋˜์–ด๋„ ์—ฐ๊ฒฐ์ดˆ๋ฐ˜์— ์˜์ƒ ์ €ํ’ˆ์งˆ ํ˜„์ƒ์ด ์ผ์–ด๋‚  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ›„๋ณด๋ฅผ ์ˆ˜์ง‘ํ•˜๋ฉด ์ผ๋ฐ˜์ ์œผ๋กœ 3๊ฐœ์˜ ์ฃผ์†Œ๋ฅผ ์–ป๊ฒŒ๋œ๋‹ค: ์ž์‹ ์˜ ์‚ฌ์„คIP์™€ ํฌํŠธ๋„˜๋ฒ„ / ์ž์‹ ์˜ ๊ณต์ธIP์™€ ํฌํŠธ๋„˜๋ฒ„ (STUN, TURN ์„œ๋ฒ„๋กœ ๋ถ€ํ„ฐ ๋ฐ›๋Š”๋‹ค) / TURN์„œ๋ฒ„์˜ IP์™€ ํฌํŠธ๋„˜๋ฒ„ (TURN ์„œ๋ฒ„๋กœ ๋ถ€ํ„ฐ ๋ฐ›๋Š”๋‹ค.)

  • STUN ์„œ๋ฒ„ (Session Traversal Utilities for NAT)

    STUN ์„œ๋ฒ„๋Š” ๊ธฐ๊ธฐ์˜ ๊ณต์ธ IP๋ฅผ ์ฐพ๊ณ  P2P ์—ฐ๊ฒฐ์„ ๋ฐฉํ•ดํ•˜๋Š” ์š”์†Œ๊ฐ€ ๋ผ์šฐํ„ฐ์— ์žˆ๋Š”์ง€ ์•Œ์•„๋‚ด๋Š” ํ”„๋กœํ† ์ฝœ์ด๋‹ค. ์ฆ‰, ํ•ด๋‹น Peer์˜ ๊ณต์ธIP ์ฃผ์†Œ๋ฅผ ๋ณด๋‚ด๋Š” ์—ญํ™œ์€ ๋‹ด๋‹นํ•œ๋‹ค. ๋˜ํ•œ ๋‘ ์—”๋“œํฌ์ธํŠธ ๊ฐ„์˜ ์—ฐ๊ฒฐ์„ ํ™•์ธํ•˜๊ณ  ๋‘˜์˜ ์—ฐ๊ฒฐ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ•ญ์ƒ ํšจ๊ณผ์ ์œผ๋กœ ์ผ์„ ์ฒ˜๋ฆฌํ•˜์ง€ ๋ชปํ•œ๋‹ค. NAT์˜ ๋ณด์•ˆ ์ •์ฑ… ๋“ฑ์ด ์—„๊ฒฉํ•˜๋ฉด ์—ฐ๊ฒฐํ•˜์ง€ ๋ชปํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

  • TURN ์„œ๋ฒ„ (Traversal Using Relays around NAT)

    TURN์€ STUN ์„œ๋ฒ„์—์„œ ์—ฐ๊ฒฐ์ด ์‹คํŒจํ–ˆ์„ ๊ฒฝ์šฐ ์˜ค๋””์˜ค, ๋น„๋””์˜ค ๋“ฑ์„ ๋ฆด๋ ˆ์ด ํ•ด์ฃผ๋Š” ์—ญํ™œ์„ ํ•œ๋‹ค. TURN ์„œ๋ฒ„๋Š” ์ธํ„ฐ๋„ท๋ง์— ์œ„์น˜ํ•˜๊ณ  ๊ฐ Peer๋“ค์ด ์‚ฌ์„คIP์•ˆ์—์„œ ํ†ต์‹ ํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ๊ฐ Peer๋“ค์ด ์ง์ ‘์ ์œผ๋กœ ํ†ต์‹ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๋ฆด๋ ˆ์ด ์—ญํ™œ์„ ํ•˜๋Š” TURN ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฒฝ์œ ํ•œ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ์—„๋ฐ€ํžˆ ๋งํ•˜๋ฉด P2P ํ†ต์‹ ์ด์•„๋‹Œ ์ค‘๊ฐ„์— ์„œ๋ฒ„(TURN)๋ฅผ ๊ฑฐ์น˜๊ฒŒ ๋˜๋ฉฐ, ๊ทธ ๊ตฌ์กฐ์ƒ ์ง€์—ฐ์ด ํ•„์—ฐ์ ์œผ๋กœ ๋ฐœ์ƒํ•œ๋‹ค.

    TURN๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ์ •๋ณด๋ฅผ ์ค‘๊ณ„ํ•˜๊ณ , STUN์— ๋น„ํ•ด ๋ฆฌ์†Œ์Šค๋‚ญ๋น„๊ฐ€ ์‹ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ICE Candidate๊ณผ์ •์—์„œ ๋ชจ๋“  ํ›„๋ณด๊ตฐ์„ ์ฐพ์€ ํ›„, ๋Œ€์•ˆ์ด ์—†๋Š” ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉํ•œ๋‹ค.

P2P ๋™์ž‘ ๊ณผ์ •

  1. ๊ฐ ๋ธŒ๋ผ์šฐ์ €๊ฐ€(๋””๋ฐ”์ด์Šค) P2P ์—ฐ๊ฒฐ์— ๋™์˜ํ•œ๋‹ค.
  2. ์„œ๋กœ์˜ ์ฃผ์†Œ๋ฅผ ๊ณต์œ ํ•œ๋‹ค.
  3. ๋ณด์•ˆ์‚ฌํ•ญ ๋ฐ ๋ฐฉํ™”๋ฒฝ์„ ์šฐํšŒ, ํ†ต๊ณผํ•œ๋‹ค.
  4. ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ตํ™˜ํ•œ๋‹ค.

์ถ”๊ฐ€ ์„ค๋ช…

๊ฐ ๊ฐœ์ธ์˜ ๋””๋ฐ”์ด์Šค(์ปดํ“จํ„ฐ)์—๋Š” ๊ณต์ธIP๊ฐ€ ํ• ๋‹น๋˜์–ด ์žˆ์ง€ ์•Š๋‹ค. ๊ทธ ์ด์œ ๋Š” ๋ณด์•ˆ๋ฌธ์ œ(๋ฐฉํ™”๋ฒฝ), NAT ๋“ฑ์ด ์žˆ๋‹ค. ๋‹จ์ˆœํžˆ ๊ณต์ธIP๋ฅผ ์•Œ์•„๋ƒˆ๋‹ค๊ณ , ํŠน์ • ์‚ฌ์šฉ์ž๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค. ํ•ด๋‹น ๋„คํŠธ์›Œํฌ(๊ณต์ธIP)์— ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š” ์‚ฌ์„คIP(๊ณ ์œ ์˜) ์ฃผ์†Œ๊นŒ์ง€ ์•Œ์•„๋‚ด์•ผ ํŠน์ • ์‚ฌ์šฉ์ž๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๋ผ์šฐํ„ฐ๊ฐ€ NAT ์—ญํ™œ(๊ณต์ธIP์™€ ํฌํŠธ๋ฒˆํ˜ธ๋ฅผ ํ™•์ธ ํ›„, ํ˜„์žฌ ๋„คํŠธ์›Œํฌ์— ์—ฐ๊ฒฐ๋œ ์‚ฌ์„คIP๋ฅผ ์—ฐ๊ฒฐํ•ด์ค€๋‹ค)์„ ๋‹ด๋‹นํ•˜๊ธฐ ๋•Œ๋ฌธ์— P2P ์—ฐ๊ฒฐ์„ ์œ„ํ•ด์„  ๊ฐ Peer๊ฐ€ ์—ฐ๊ฒฐ๋œ ๋ผ์šฐํ„ฐ์˜ ๊ณต์ธIP ์ฃผ์†Œ์™€ ํฌํŠธ๋ฅผ ๋จผ์ € ์•Œ์•„์•ผํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์–ด๋–ค ๋ผ์šฐํ„ฐ๋Š” ํŠน์ • ์ฃผ์†Œ๋‚˜ ํฌํŠธ์˜ ์—ฐ๊ฒฐ์„ ์ฐจ๋‹จํ•˜๋Š” ๋ฐฉํ™”๋ฒฝ์ด ์„ค์ •๋˜์–ด ์žˆ์„ ์ˆ˜ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋ผ์šฐํ„ฐ๋ฅผ ํ†ต๊ณผํ•ด์„œ ์—ฐ๊ฒฐํ•  ๋ฐฉ๋ฒ•์„ ์ฐพ๋Š” ๊ฒƒ์„ NAT traversal ์ด๋ผ ํ•˜๊ณ , ์ด ์ž‘์—…์„ STUN ์„œ๋ฒ„์— ์˜ํ•ด ์ด๋ฃจ์–ด์ง„๋‹ค.
STUN ์„œ๋ฒ„์˜ ์—ญํ™œ์€ ์œ„์—์„œ ์„ค๋ช…ํ–ˆ๋“ฏ์ด, ๊ฐ Peer๊ฐ€ ์ž์‹ ์˜ ๊ณต์ธ IP ์ฃผ์†Œ์™€ ํฌํŠธ๋ฅผ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์— ๋Œ€ํ•œ ํ”„๋กœํ† ์ฝœ์ด๋‹ค. ์ฆ‰, ์ƒ๋Œ€๋ฐฉ๊ณผ ๋Œ€ํ™”๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ์ž์‹ ์˜ ๊ณ ์œ  ์ฃผ์†Œ๋ฅผ ์กฐํšŒํ•ด์„œ ์•Œ์•„๋‚ด๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‹ค์–‘ํ•œ ๋ฐฉํ™”๋ฒฝ ์ •์ฑ…์œผ๋กœ ์ธํ•ด STUN ์„œ๋ฒ„์—์„œ ํ•ญ์ƒ ์ž์‹ ์˜ ์ •๋ณด๋ฅผ ์•Œ์•„์˜ฌ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. ์ด๋กœ์ธํ•ด STUN ์„œ๋ฒ„๋กœ ์ž์‹ ์˜ ์ฃผ์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค์ง€ ๋ชปํ•  ๊ฒฝ์šฐ์˜ ๋Œ€์•ˆ์œผ๋กœ TURN ์„œ๋ฒ„๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด๋ ‡๊ฒŒ STUN, TURN ์„œ๋ฒ„๋ฅผ ์ด์šฉํ•ด ์•Œ๊ฒŒ๋œ IP์ฃผ์†Œ์™€ ํฌํŠธ์˜ ์กฐํ•ฉ์œผ๋กœ ๊ตฌ์„ฑ๋œ ์—ฐ๊ฒฐ๊ฐ€๋Šฅํ•œ ๋„คํŠธ์›Œํฌ ์ฃผ์†Œ๋ฅผ Candidate๋ผ ๋ถ€๋ฅด๊ณ  ์ด Candidate๋ฅผ ๋ชจ๋‘ ์ฐพ์•„๋‚ด์–ด ์ฃผ์†Œ๋ฅผ ์ฐพ์•„๋‚ธ๋‹ค. ์ด ๋ชจ๋“  ๊ณผ์ •์€ ICE๋ผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์ด๋ฃจ์–ด์ง„๋‹ค.

๐Ÿ˜ณ WebRTC์˜ ํ๋ฆ„

  1. Session description์„ ๊ตํ™˜ํ•œ๋‹ค.
  2. Signaling ํ”„๋กœ์„ธ์Šค๋Š” call์„ ์š”์ฒญํ•˜๋Š” ์œ ์ €๊ฐ€ offer๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ์‹œ์ž‘ํ•œ๋‹ค.
  3. ์ด offer๋Š” session ์ •๋ณด๋ฅผ SDP ํฌ๋ฉง์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, callee์—๊ฒŒ ์ „๋‹ฌ๋œ๋‹ค.
  4. Callee๋Š” caller์—๊ฒŒ SDP ์ •๋ณด๋ฅผ ํฌํ•จํ•œ answer ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ธ๋‹ค.
  5. ์œ„์˜ ๊ณผ์ •์„ ํ†ตํ•ด A์™€ B๋Š” ์–ด๋–ค ์ฝ”๋ฑ๊ณผ ์–ด๋–ค video parameter๋“ค์ด ์‚ฌ์šฉ๋ ์ง€ ์•Œ๊ฒŒ๋œ๋‹ค.
  6. ICE candidate๋ฅผ ๊ตํ™˜ํ•œ๋‹ค.
  7. SDP ๊ตํ™˜ ์ดํ›„ ICE candidate ๊ตํ™˜์ด ์‹œ์ž‘๋œ๋‹ค.
  8. ๊ฐ ICE candidate๋Š” caller ์ž…์žฅ์—์„œ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•œ๋‹ค.
  9. ๊ฐ Peer๋Š” ๊ฒ€์ƒ‰๋˜๋Š” ์ˆœ์„œ๋Œ€๋กœ candidate๋ฅผ ๋‚ด๋ณด๋‚ด๊ณ , ์ด๋ฏธ ์ŠคํŠธ๋ฆฌ๋ฐ์ด ์‹œ์ž‘๋˜์–ด๋„ ๋ชจ๋“  ๊ฐ€๋Šฅํ•œ candidate๋ฅผ ์ „์†กํ•œ๋‹ค.
  10. ๊ฐ Peer๊ฐ€ ์„œ๋กœ ํ˜ธํ™˜๋˜๋Š” candidate๋ฅผ ์ œ์•ˆํ–ˆ๋‹ค๋ฉด, ๋ฏธ๋””์–ด ํ†ต์‹ ์„ ์‹œ์ž‘ํ•œ๋‹ค.
  11. ์ถ”ํ›„ ๋” ๋‚˜์€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋ฉด, ์ŠคํŠธ๋ฆผ์˜ ํฌ๋งท์ด ๋ณ€๊ฒฝ๋œ๋‹ค.
  12. ๋ฏธ๋””์–ด ์ „์†ก ์‹œ์ž‘

๐Ÿ˜ฒ WebRTC์˜ ์ค‘์š” API

  • getUserMedia()
    ์‚ฌ์šฉ์ž๊ฐ€ ์ž์‹ ์˜ ๋””๋ฐ”์ด์Šค๋ฅผ ์ŠคํŠธ๋ฆผ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ—ˆ๊ฐ€๋ฅผ ๋ฐ›๋Š” API์ด๋‹ค.
    ํด๋ผ์ด์–ธํŠธ ์‚ฌ์šฉ์ž ์ปดํ“จํ„ฐ์˜ ์นด๋ฉ”๋ผ์™€ ๋งˆ์ดํฌ ์ ‘๊ทผ์„ ๋‹ด๋‹นํ•œ๋‹ค.

  • RTCPeerConnection
    Peer๊ฐ„์˜ ์—ฐ๊ฒฐ์„ ์ƒ์„ฑํ•˜์—ฌ ์˜ค๋””์˜ค์™€ ๋น„๋””์˜ค ํ†ต์‹ ์— ์‚ฌ์šฉ ํ•˜๊ฒŒ ํ•œ๋‹ค. STUN ์„œ๋ฒ„๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์ด๋‹ค. ์ด ๊ฐ์ฒด๋Š” RTCConfiguration์„ ์ธ์ž๋กœ ๋ฐ›๋Š”๋ฐ ์—ฐ๊ฒฐ์„ค์ • ๋ฐฉ๋ฒ•๊ณผ ICE์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ํฌํ•จ์‹œ์ผœ์•ผํ•œ๋‹ค.

  • RTCDataChannel
    Peer๊ฐ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” Tunnel API ์ด๋‹ค. RTCPeerConnection์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†ก์‹œํ‚ค๊ธฐ ์œ„ํ•œ API์ด๊ณ , ์ด ๊ฐ์ฒด์—์„œ createDataChannel()์„ ํ˜ธ์ถœํ•˜์—ฌ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

  • Select sources & outputs

  • Stream capture

๐Ÿ‘€ References

๐Ÿค” WebSocket?

WebSockect์€ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์— socket connection์„ ์œ ์ง€ํ•ด์„œ ์–ธ์ œ๋“  ์–‘๋ฐฉํ–ฅ ํ†ต์‹  ๋˜๋Š” ๋ฐ์ดํ„ฐ ์ „์†ก์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•˜๋Š” ๊ธฐ์ˆ ์ด๋‹ค. ์ฃผ๋กœ WebRTC ๊ตฌํ˜„์„ ์œ„ํ•ด ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค. WebSocket๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ฐ์ดํ„ฐ์˜ ๋น ๋ฅธ ์—…๋ฐ์ดํŠธ, ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š”ํ•œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋งค์šฐ ์ค‘์š”ํ•œ ๊ธฐ์ˆ ์ด๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ, webSocket์€ Stateful protocol์ด๊ธฐ ๋•Œ๋ฌธ์— ํด๋ผ์ด์–ธํŠธ์™€ ํ•œ๋ฒˆ ์—ฐ๊ฒฐ๋˜๋ฉด ๊ณ„์† ๊ฐ™์€ ๋ผ์ธ์„ ์‚ฌ์šฉํ•ด์„œ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋‹ค.(๊ธฐ์กด ์›น์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๋Š” ๋Œ€๋ถ€๋ถ„ HTTP๋ฅผ ํ†ตํ•ด ์ด๋ฃจ์–ด์ ธ์žˆ๊ณ , statelessํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํด๋ผ์ด์–ธํŠธ์˜ ํ•œ request์— ํ•œ response๋งŒ ์„œ๋ฒ„์—์„œ ์ „๋‹ฌ๋˜๋Š” ๊ตฌ์กฐ๋‹ค.) ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— HTTP ์‚ฌ์šฉ์‹œ ํ•„์š”์—†์ด ๋ฐœ์ƒ๋˜๋Š” HTTP์™€ TCP ์—ฐ๊ฒฐ ํŠธ๋ž˜ํ”ฝ์„ ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ˜ SocketIO?

SocketIO๋Š” ์›น์„œ๋ฒ„์˜ ์ข…๋ฅ˜์™€ ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „์„ ํŒŒ์•…ํ•ด์„œ ๊ฐ€์žฅ ์ ํ•ฉํ•œ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด WebSocket์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค€๋‹ค. ์ฆ‰, WebSocket์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๊ตฌ๋ฒ„์ „์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ(IE9) socketIO๋กœ ๊ตฌํ˜„๋œ ์„œ๋น„์Šค๋ฅผ ์‚ฌ์šฉํ• ์‹œ polling flow๋กœ webSocket์„ ๋”ฐ๋ผํ•˜๋“ฏ์ด ๊ตฌํ˜„ํ•ด์ค€๋‹ค.

Latest comments (1)

Collapse
 
hamitdemir profile image
Hamit Demir

There is a good blog post about WebRTC. WebRTC is becoming more and more important for communication.