WebRTC(Web Real-Time Communications)๋ž€?

  • WebRTC๋Š” ์„œ๋ฒ„๋ฅผ ์ตœ๋Œ€ํ•œ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  P2P๋กœ ๋ธŒ๋ผ์šฐ์ €๋‚˜ ๋‹จ๋ง ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธฐ์ˆ ์˜ ์›น ํ‘œ์ค€์ด๋‹ค.
  • ์›น์—์„œ ์‹ค์‹œ๊ฐ„ ๋ฏธ๋””์–ด ์ŠคํŠธ๋ฆผ์„ ์†ก์ˆ˜์‹ ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์ผํ•œ ํ‘œ์ค€์ด๊ณ  ๋˜ ์œ ์ผํ•œ P2P ํ‘œ์ค€์ด๊ธฐ๋„ ํ•˜๋‹ค.
  • ์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜(์ตœ๊ทผ์—๋Š” Android ๋ฐ IOS๋„ ์ง€์›) ๋ฐ ์‚ฌ์ดํŠธ๋“ค์ด ๋ณ„๋„์˜ ์†Œํ”„ํŠธ์›จ์–ด ์—†์ด ์Œ์„ฑ, ์˜์ƒ ๋ฏธ๋””์–ด ํ˜น์€ ํ…์ŠคํŠธ, ํŒŒ์ผ ๊ฐ™์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ธŒ๋ผ์šฐ์ ธ๋ผ๋ฆฌ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“  ๊ธฐ์ˆ ์ด๋‹ค.

WebRTC ํ†ต์‹  ์›๋ฆฌ


์œ„์˜ ๊ทธ๋ฆผ์„ ํ†ตํ•œ ์„ค๋ช…

๋ณดํ†ต ๋‘ ๊ธฐ๊ธฐ๊ฐ€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์†Œํ†ตํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” WebRTC์—์„œ ์ œ๊ณตํ•˜๋Š” MediaStream, RTPeerConnection, RTCDataChannel ๋“ฑ์˜ API์™€ API๋“ค์„ ์ ์ ˆํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฒ˜๋ฆฌํ•ด ์ฃผ๋Š” ๊ณผ์ •์ธ Signaling์ด๋ผ๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ํ†ตํ•ด ํ†ต์‹ ์„ ์กฐ์ •ํ•ด์•ผํ•˜๋ฉฐ, ๋„คํŠธ์›Œํฌ ์ฃผ์†Œ ๋ณ€ํ™˜๊ธฐ(NAT) ๋ฐ ๋ฐฉํ™”๋ฒฝ์— ๋Œ€์ฒ˜ํ•˜๊ธฐ ์œ„ํ•ด ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” Signaling ์„œ๋ฒ„ ์—ญ์‹œ ํ•„์š”ํ•˜๋‹ค. ๋˜ P2P ์—ฐ๊ฒฐ์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํ™ฉ์„ ๋Œ€๋น„ํ•œ ๋ฆด๋ ˆ์ด ์„œ๋ฒ„(TURN)๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

  • WebRTC๋ฅผ ์‚ฌ์šฉํ•ด ์—ฐ๊ฒฐ์„ ๋งบ๊ณ , peer์˜ ๊ธฐ๊ธฐ์—์„œ ๋ฏธ๋””์–ด๋ฅผ ๊ฐ€์ ธ์™€ ๊ตํ™˜ํ•œ๋‹ค.
  • Signaling์„ ํ†ตํ•ด ํ†ต์‹ ํ•  peer๊ฐ„ ์ •๋ณด๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.(๋„คํŠธ์›Œํฌ ์ •๋ณด, capability ์ •๋ณด, ์„ธ์…˜ ์ˆ˜๋ฆฝ ๋“ฑ)
    • Signaling์˜ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ XHR์™€ Channel API๋ฅผ ์ด์šฉํ•˜๊ฑฐ๋‚˜ node ์„œ๋ฒ„์—์„œ Socket.io๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ์ด ์žˆ๋‹ค.
    • Session control messages: ํ†ต์‹ ์˜ ์ดˆ๊ธฐํ™”, ์ข…๋ฃŒ, ๊ทธ๋ฆฌ๊ณ  ์—๋Ÿฌ ๋ฆฌํฌํŠธ
    • Network configuration : ICE ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์„œ๋กœ์˜ IP ์™€ ํฌํŠธ๋ฅผ ์ฐพ๋Š” ๊ณผ์ •
    • Media capabilites : ๋‚ด ๋ธŒ๋ผ์šฐ์ €์™€ ์ƒ๋Œ€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฝ”๋ฑ, ํ•ด์ƒ๋„ ๋“ฑโ€™

WebRTC ํ™œ์šฉ ๋ถ„์•ผ

๊ธฐ๋ณธ์ ์œผ๋กœ P2P ์ŠคํŠธ๋ฆฌ๋ฐ ๊ธฐ์ˆ ์—์„œ ์ถœ๋ฐœํ•˜์˜€์ง€๋งŒ, ์ตœ๊ทผ์—๋Š” ๋‹ค์–‘ํ•œ ์–ธํƒํŠธ ์„œ๋น„์Šค๋“ค๋กœ ๋ฐœ์ „ํ•˜์˜€๋‹ค. WebRTC๋กœ ๊ฐ€๋Šฅํ•œ ์–ธํƒํŠธ ์„œ๋น„์Šค๋“ค


์šฉ์–ด์‚ฌ์ „

  • P2P(๋™๋“ฑ ๊ณ„์ธต๊ฐ„ ํ†ต์‹ ๋ง): peer-to-peer network์˜ ์ค„์ž„๋ง๋กœ ์†Œ์ˆ˜์˜ ์„œ๋ฒ„์— ์ง‘์ค‘ํ•˜๊ธฐ๋ณด๋‹ค๋Š” ๋ง๊ตฌ์„ฑ์— ์ฐธ์—ฌํ•˜๋Š” ๊ธฐ๊ณ„๋“ค์˜ ๊ณ„์‚ฐ๊ณผ ๋Œ€์—ญํญ ์„ฑ๋Šฅ์— ์˜์กดํ•˜์—ฌ ๊ตฌ์„ฑ๋˜๋Š” ํ†ต์‹ ๋ง
  • MediaStream: ์นด๋ฉ”๋ผ์™€ ๋งˆ์ดํฌ ๋“ฑ์˜ ๋ฐ์ดํ„ฐ ์ŠคํŠธ๋ฆผ ์ ‘๊ทผ
  • RTCPeerConnection: ์•”ํ˜ธํ™” ๋ฐ ๋Œ€์—ญํญ ๊ด€๋ฆฌ ๋ฐ ์˜ค๋””์˜ค, ๋น„๋””์˜ค์˜ ์—ฐ๊ฒฐ
  • RTCDataChannel: ์ผ๋ฐ˜์ ์ธ ๋ฐ์ดํ„ฐ์˜ P2P ํ†ต์‹ 
  • Signaling:ํ†ต์‹ ์„ ์กฐ์œจํ•  ๋ฉ”์‹œ์ง€๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ์ผ๋ จ์˜ ํ”„๋กœ์„ธ์Šค or RTCPeerConnection๋“ค์ด ์ ์ ˆํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ฒ˜๋ฆฌํ•ด ์ฃผ๋Š” ํ”„๋กœ์„ธ์Šค
  • Caller: ์š”์ฒญ์„ ๋ฐ›๊ฑฐ๋‚˜ ์ฃผ๋Š” ๋Œ€์ƒ? (๊ธฐ๊ธฐ์˜ ์•ฑ, ๋ธŒ๋ผ์šฐ์ € ๊ฐ„์—, ๋‹จ๋ง๊ธฐ๊ธฐ ๊ฐ„)
  • TURN ์„œ๋ฒ„: NAT ์ฃผ์œ„์˜ ๋ฆด๋ ˆ์ด๋ฅผ ์‚ฌ์šฉํ•œ ์ˆœํšŒ๋ฅผ ์˜๋ฏธํ•˜๋ฉฐ, ๋„คํŠธ์›Œํฌ ํŠธ๋ž˜ํ”ฝ์„ ์ค‘๊ณ„ํ•˜๋Š” ํ”„๋กœํ† ์ฝœ

์ฐธ๊ณ ๋งํฌ

WebRTC ๊ณตํ™ˆ

WebRTC mdn

WebRTC ์‘์šฉ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•

WebRTC๋ž€?

Build the backend services needed for a WebRTC app

์‹ค์‹œ๊ฐ„ ํ†ตํ™” ์–ด๋–ป๊ฒŒ ํ•˜๋Š” ๊ฑฐ์ง€ : WebRTC ๊ธฐ์ดˆ

WebRTC (Web Real-Time Communications)

p2p

NAT, ICE, STUN, TURN ์ด๋ž€?