(ื›ึผืžืขื˜) ืึทืจื•ื™ืกื’ืขื•ื•ืึธืจืคืŸ ื•ื•ืขื‘ืงืึทื ืกื˜ืจื™ืžื™ื ื’ ืคื•ืŸ ืึท ื‘ืœืขื˜ืขืจืขืจ. ื˜ื™ื™ืœ 2. ื•ื•ืขื‘ืจื˜ืง

ืขืคืขืก ืืจื™ื™ืŸ ะพะดะฝะพะน ืคึฟื•ืŸ ืึทืœื˜ืข ืื•ืŸ ืฉื•ื™ืŸ ืคึฟืึทืจืœืึธื–ืŸ ืึทืจื˜ื™ืงืœืขืŸ, ืื™ืš ื’ืขืฉืจื™ื‘ืŸ ื•ื•ืขื’ืŸ ื•ื•ื™ ืœื™ื™ื›ื˜ ืื•ืŸ ื’ืขื•ื•ื™ื™ื ื˜ืœืขืš ืื™ืจ ืงืขื ืขืŸ ื‘ืจืึธื“ืงืึทืกื˜ ื•ื•ื™ื“ืขื ืคึฟื•ืŸ ืœื™ื™ึทื•ื•ื ื˜ ื“ื•ืจืš ื•ื•ืขื‘ืกืึธืงืงืขืฅ. ืื™ืŸ ื“ืขื ืึทืจื˜ื™ืงืœ, ืื™ืš ื‘ืขืงื™ืฆืขืจ ื’ืขืจืขื“ื˜ ื•ื•ืขื’ืŸ ื•ื•ื™ ืฆื• ื›ืึทืคึผืŸ ื•ื•ื™ื“ืขื ืคึฟื•ืŸ ืึท ืึทืคึผืึทืจืึทื˜ ืื•ืŸ ื’ืขื–ื•ื ื˜ ืคึฟื•ืŸ ืึท ืžื™ืงืจืึธืคืึธืŸ MediaStream API, ื•ื•ื™ ืฆื• ืขื ืงืึธื•ื“ ื“ื™ ื‘ืืงื•ืžืขืŸ ื˜ื™ื™ึทืš ืื•ืŸ ืฉื™ืงืŸ ืขืก ื“ื•ืจืš ื•ื•ืขื‘ืกืึธืงืงืขืฅ ืฆื• ื“ื™ ืกืขืจื•ื•ืขืจ. ืึธื‘ืขืจ, ืื™ืŸ ืคืึทืงื˜, ื–ื™ื™ ื˜ืึธืŸ ื ื™ื˜ ื˜ืึธืŸ ื“ืึธืก, ืคึฟืึทืจ ื‘ืจืึธื“ืงืึทืกืฅ ื–ื™ื™ ื ื•ืฆืŸ ืกืคึผืขืฆื™ืขืœ ื•ื•ื™ื™ื›ื•ื•ืืจื’ ื•ื•ืึธืก ื“ืึทืจืฃ ื–ื™ื™ืŸ ืื™ื ืกื˜ืึทืœื™ืจืŸ ืื•ืŸ ืงืึทื ืคื™ื’ื™ืขืจื“: ืึธืคืึทื ื“, ื“ืึธืก ืงืขืŸ ื–ื™ื™ืŸ ืขืคืขื ืขืŸ ื‘ืจืึธืึทื“ืงืึทืกื˜ ื•ื•ื™ื™ื›ื•ื•ืืจื’, ืึธื“ืขืจ ื–ื™ื™ ื ื•ืฆืŸ WebRTC, ื•ื•ืึธืก ืึทืจื‘ืขื˜ ืจืขื›ื˜ ืื•ื™ืก ืคื•ืŸ ื“ื™ ืงืขืกื˜ืœ, ื“ืึธืก ืื™ื–, ืขืก ื˜ื•ื˜ ื ื™ืฉื˜ ื“ืึทืจืคืŸ ื“ื™ ื™ื™ึทื ืžืึธื ื˜ื™ืจื•ื ื’ ืคื•ืŸ ืงื™ื™ืŸ ืคึผืœื•ื’ื™ื ืก ืึท ืœืึท ื‘ืœื™ืฅ ืฉืคึผื™ืœืขืจ, ื•ื•ืึธืก ื•ื•ืขื˜ ื–ื™ื™ืŸ ืฉื ื™ื™ึทื“ืŸ ืื•ื™ืก ืคื•ืŸ ื“ื™ Chromium ื‘ืœืขื˜ืขืจืขืจ ืฉื•ื™ืŸ ืื™ืŸ ื“ืขืฆืขืžื‘ืขืจ.

ื”ื™ื™ึทื ื˜ ืžื™ืจ ื•ื•ืขืœืŸ ืจืขื“ืŸ ื•ื•ืขื’ืŸ WebRTC.

ื•ื•ืขื‘ ืจืขืึทืœ-ืฆื™ื™ื˜ ืงืึธืžื•ื ื™ืงืึทืฆื™ืข (WebRTC) ืื™ื– ื ื™ืฉื˜ ืึท ืื™ื™ืŸ ืคึผืจืึธื˜ืึธืงืึธืœ, ืขืก ืื™ื– ืึท ื’ืึทื ืฅ ื–ืึทืžืœื•ื ื’ ืคื•ืŸ ืกื˜ืึทื ื“ืึทืจื“ืก, ืคึผืจืึธื˜ืึธืงืึธืœืก ืื•ืŸ ื“ื–ืฉืึทื•ื•ืึทืกืงืจื™ืคึผื˜ ืึทืคึผื™ืก ื•ื•ืึธืก ืฆื•ื–ืึทืžืขืŸ ืฆื•ืฉื˜ืขืœืŸ ื™ื™ึทื ืงื•ืงื -ืฆื•-ื™ื™ึทื ืงื•ืงื  ืคืึทืงื˜ื™ืฉ-ืฆื™ื™ื˜ ื•ื•ื™ื“ืขื-ืึทื•ื“ื™ืึธ ืงืึธืžื•ื ื™ืงืึทืฆื™ืข, ืื•ืŸ ืงืขื ืขืŸ ืื•ื™ืš ื–ื™ื™ืŸ ื’ืขื ื•ืฆื˜ ืฆื• ืึทืจื™ื‘ืขืจืคื™ืจืŸ ืงื™ื™ืŸ. ื‘ื™ื™ื ืขืจื™ ื“ืึทื˜ืŸ. ื™ื•ื–ืฉืึทื•ื•ืึทืœื™ ื‘ืจืึทื•ื–ืขืจื– ืึทืงื˜ ื•ื•ื™ ืคึผื™ืจื–, ืึธื‘ืขืจ ืขืก ืงืขืŸ ืื•ื™ืš ื–ื™ื™ืŸ ืึท ืจื™ืจืขื•ื•ื“ื™ืง ืึทืคึผืœืึทืงื™ื™ืฉืึทืŸ, ืœืžืฉืœ. ืื™ืŸ ืกื“ืจ ืฆื• ืึธืจื’ืึทื ื™ื–ื™ืจืŸ ืคึผ2ืคึผ ืงืึธืžื•ื ื™ืงืึทืฆื™ืข ืฆื•ื•ื™ืฉืŸ ืงืœื™ื™ืึทื ืฅ, ื‘ืœืขื˜ืขืจืขืจ ืฉื˜ื™ืฆืŸ ืคึฟืึทืจ ืคืึทืจืฉื™ื“ืŸ ื˜ื™ื™ืคึผืก ืคื•ืŸ ื•ื•ื™ื“ืขื ืื•ืŸ ืึทื•ื“ื™ืึธ ืงืึธื“ื™ืจื•ื ื’ ืื™ื– ืคืืจืœืื ื’ื˜, ืฉื˜ื™ืฆืŸ ืคึฟืึทืจ ืคืึทืจืฉื™ื“ืŸ ื ืขืฅ ืคึผืจืึธื˜ืึธืงืึธืœืก, ื™ื ืฉื•ืจื™ื ื’ ื“ื™ ื™ื ื˜ืขืจืึทืงืฉืึทืŸ ืคื•ืŸ ื™ื™ึทื–ื ื•ื•ืึทืจื’ ืžื™ื˜ ื“ืขื ื‘ืœืขื˜ืขืจืขืจ (ื“ื•ืจืš ืึทืก ืœื™ื™ึทืขืจืก): ื•ื•ืขื‘ืงืึทืžืก, ื’ืขื–ื•ื ื˜ ืงืึทืจื“ืก. ืึทืœืข ื“ืขื ื›ืึทื“ื–ืฉืคึผืึธื“ื’ืข ืคื•ืŸ โ€‹โ€‹ื˜ืขืงื ืึทืœืึทื“ื–ืฉื™ื– ืื™ื– ืคืึทืจื‘ืึธืจื’ืŸ ื”ื™ื ื˜ืขืจ ื“ื™ ื“ื–ืฉืึทื•ื•ืึทืกืงืจื™ืคึผื˜ ืึทืคึผื™ ืึทื‘ืกื˜ืจืึทืงืฆื™ืข ืคึฟืึทืจ ื“ื™ ืงืึทื ื•ื•ื™ื ื™ืึทื ืก ืคื•ืŸ ื“ื™ ื“ืขื•ื•ืขืœืึธืคึผืขืจ.

ืขืก ืึทืœืข ื‘ื•ื™ืœื– ืึทืจืึธืคึผ ืฆื• ื“ืจื™ื™ึท APIs:

  • MediaStream API โ€” ืœืขืฆื˜ืŸ ืžืืœ ืืคื’ืขื–ื•ื ื“ืขืจื˜, ื”ืฒื ื˜ ืฐืขืœ ืื™ืš ืฐืขื’ืŸ ืื™ื ืฉืจืฒื‘ืŸ ืื‘ื™ืกืœ ืžืขืจ. ืกืขืจื•ื•ืขืก ืฆื• ื‘ืึทืงื•ืžืขืŸ ื•ื•ื™ื“ืขื / ืึทื•ื“ื™ืึธ ืกื˜ืจื™ืžื– ืคื•ืŸ ื“ื™ ื™ื™ึทื–ื ื•ื•ืึทืจื’

  • RTCPeerConnection - ื’ื™ื˜ ืงืึธืžื•ื ื™ืงืึทืฆื™ืข ืฆื•ื•ื™ืฉืŸ ืฆื•ื•ื™ื™ ืงืœื™ื™ืึทื ืฅ (ืคึผ2ืคึผ)

  • RTCDataChannel - ืกืขืจื•ื•ืขืก ืฆื• ืึทืจื™ื‘ืขืจืคื™ืจืŸ ืึทืจื‘ื™ื˜ืจืึทืจื™ืฉ ื“ืึทื˜ืŸ ืฆื•ื•ื™ืฉืŸ ืฆื•ื•ื™ื™ ืงืœื™ื™ืึทื ืฅ

ืคึผืจื™ืคึผืขืจื™ื ื’ ืึทื•ื“ื™ืึธ ืื•ืŸ ื•ื•ื™ื“ืขื ืกื˜ืจื™ืžื– ืคึฟืึทืจ ื˜ืจืึทื ืกืžื™ืกื™ืข

ืขืก ืึทืœืข ืกื˜ืึทืจืฅ ืžื™ื˜ "ืงืึทืคึผื˜ืฉืขืจื™ื ื’" ื“ื™ ื•ื•ืขื‘ืงืึทื ืื•ืŸ ืžื™ืงืจืึธืคืึธืŸ ืžืขื“ื™ืข ืกื˜ืจื™ืžื–. ื“ืึธืš, ืจื•ื™ ืกื˜ืจื™ืžื– ื–ืขื ืขืŸ ื ื™ืฉื˜ ืคึผืึทืกื™ืง ืคึฟืึทืจ ืึธืจื’ืึทื ื™ื™ื–ื™ื ื’ ืึท ื˜ืขืœืขืงืึธื ืคืขืจืขื ืกืข, ื™ืขื“ืขืจ ื˜ื™ื™ึทืš ื“ืึทืจืฃ ื–ื™ื™ืŸ ืคึผืจืึทืกืขืกื˜: ืคึฟืึทืจื‘ืขืกืขืจืŸ ื“ื™ ืงื•ื•ืึทืœื™ื˜ืขื˜, ืกื™ื ื’ืงืจืึทื ื™ื™ื– ืึทื•ื“ื™ืึธ ืžื™ื˜ ื•ื•ื™ื“ืขื, ืฉื˜ืขืœืŸ ืกื™ื ื’ืงืจืึทื ืึทื–ื™ื™ืฉืึทืŸ ืžืึทืจืงืก ืื™ืŸ ื“ื™ ื•ื•ื™ื“ืขื ื˜ื™ื™ึทืš ืื•ืŸ ืขื ืฉื•ืจ ื“ื™ ื‘ื™ื˜ืจืึทื˜ืข ืงืึธืจืึทืกืคึผืึทื ื“ื™ื ื’ ืฆื• ื“ื™ ืงืึทื ืึทืœ ืงืึทื ืึทืœ ื‘ืึทื ื“ื•ื•ื™ื“ื˜. . ื“ืขืจ ื‘ืœืขื˜ืขืจืขืจ ื ืขืžื˜ ื–ืึธืจื’ ืคื•ืŸ ืึทืœืข ื“ืขื, ื“ืขืจ ื“ืขื•ื•ืขืœืึธืคึผืขืจ ื˜ื•ื˜ ื ื™ืฉื˜ ืืคื™ืœื• ื”ืึธื‘ืŸ ืฆื• ื–ืึธืจื’ ื•ื•ืขื’ืŸ ืคึผืจืึทื•ื•ื™ื™ื“ื™ื ื’ ืงืึธื“ื™ืจื•ื ื’ ืคึฟืึทืจ ืžืขื“ื™ืข ืกื˜ืจื™ืžื–. ืื™ืŸ ืึท ืžืึธื“ืขืจืŸ ื‘ืœืขื˜ืขืจืขืจ, โ€‹โ€‹ืขืก ื–ืขื ืขืŸ ืฉื•ื™ืŸ ื•ื•ื™ื™ื›ื•ื•ืืจื’ ืœื™ื™ึทืขืจืก ืคึฟืึทืจ ืงืึทืคึผื˜ืฉืขืจื™ื ื’, ื™ืžืคึผืจื•ื•ื•ื™ื ื’ ืงื•ื•ืึทืœื™ื˜ืขื˜ (ืึทืจื•ื™ืกื ืขืžืขืŸ ื•ื•ื™ื“ืขืจืงืึธืœ ืื•ืŸ ืจืึทืฉ ืคื•ืŸ ื’ืขื–ื•ื ื˜, ืคึฟืึทืจื‘ืขืกืขืจืŸ ื“ื™ ื‘ื™ืœื“), ื•ื•ื™ื“ืขื ืื•ืŸ ืึทื•ื“ื™ืึธ ืงืึธื“ื™ืจื•ื ื’. ื“ื™ ืฉื™ื›ื˜ืข ืกื›ืขืžืข ืื™ื– ื’ืขื•ื•ื™ื–ืŸ ืื™ืŸ Fig. 1:

(ื›ึผืžืขื˜) ืึทืจื•ื™ืกื’ืขื•ื•ืึธืจืคืŸ ื•ื•ืขื‘ืงืึทื ืกื˜ืจื™ืžื™ื ื’ ืคื•ืŸ ืึท ื‘ืœืขื˜ืขืจืขืจ. ื˜ื™ื™ืœ 2. ื•ื•ืขื‘ืจื˜ืงืจื™ื™ืก. 1. ืœื™ื™ึทืขืจืก ืคื•ืŸ ืึทื•ื“ื™ืึธ ืื•ืŸ ื•ื•ื™ื“ืขื ืคึผืจืึทืกืขืกื™ื ื’ ืื™ืŸ ื“ืขื ื‘ืœืขื˜ืขืจืขืจ

ื›ืœ ืคึผืจืึทืกืขืกื™ื ื’ ื ืขืžื˜ ืึธืจื˜ ื’ืœื™ื™ึทืš ืื™ืŸ ื“ืขื ื‘ืœืขื˜ืขืจืขืจ ื–ื™ืš, ืงื™ื™ืŸ ื ืึธืš. ืงื™ื™ืŸ ืคึผืœื•ื’ื™ื ืก ืคืืจืœืื ื’ื˜. ืึธื‘ืขืจ, ื“ื™ ื˜ื™ื ื’ื– ื–ืขื ืขืŸ ื ืึธืš ื ื™ืฉื˜ ืึทื–ื•ื™ ืจืึธื–ืขื•ื•ืข ืคึฟืึทืจ 2020. ืขืก ื–ืขื ืขืŸ ื‘ืจืึทื•ื–ืขืจื– ื•ื•ืึธืก ื˜ืึธืŸ ื ื™ื˜ ื ืึธืš ื’ืึธืจ ืฉื˜ื™ืฆืŸ MediaStream API, ืื™ืจ ืงืขื ื˜ ื ืึธื›ื’ื™ื™ืŸ ื“ื™ ืœื™ื ืง ืื•ืŸ ื–ืขืŸ ื“ื™ ืงืึทืžืคึผืึทื˜ืึทื‘ื™ืœืึทื˜ื™ ื˜ื™ืฉ ืื™ืŸ ื“ื™ ื“ื ืึธ. IE ืื™ืŸ ื‘ืึทื–ื•ื ื“ืขืจ ืื™ื– ื•ื•ื™ื“ืขืจ ื“ื™ืกืึทืคึผื•ื™ื ื™ื“.

ืื™ืจ ืงืขื ืขืŸ ื˜ืึธืŸ ื–ื™ื™ืขืจ ื˜ืฉื™ืงืึทื•ื•ืข ื˜ื™ื ื’ื– ืžื™ื˜ ื“ื™ ื‘ืืงื•ืžืขืŸ ืกื˜ืจื™ืžื–: ืื™ืจ ืงืขื ืขืŸ ืงืœืึธื•ืŸ, ื˜ื•ื™ืฉืŸ ื“ื™ ื•ื•ื™ื“ืขื ื”ืึทื›ืœืึธื˜ืข, ืžืึทื ื™ืคึผื•ืœื™ืจืŸ ื“ื™ ืึทื•ื“ื™ืึธ ืงื•ื•ืึทืœื™ื˜ืขื˜, ืื™ืจ ืงืขื ืขืŸ ื ืขืžืขืŸ ืื•ืŸ "ืฆื•ื˜ืฉืขืคึผืขืŸ" ื“ื™ ืžืขื“ื™ืข ืกื˜ืจื™ื ื˜ื™ื™ึทืš ืฆื• ืคืึทืจื‘ื™ื ื“ืŸ ืื•ืŸ ืงื•ืง ื–ื™ืš ืื•ื™ืฃ ื“ื™ HTML ื‘ืœืึทื˜. ืึธื“ืขืจ ืื™ืจ ืงืขื ืขืŸ ืฆื™ืขืŸ ืึท ื˜ื™ื™ึทืš ืื•ื™ืฃ ืœื™ื™ึทื•ื•ื ื˜, ืื•ืŸ ืฉื˜ืขืœืŸ ื•ื•ืขื‘ื’ืœ ืึธื“ืขืจ CSS3, ืื•ืŸ ืฆื•ืœื™ื™ื’ืŸ ืคืึทืจืฉื™ื“ืŸ ืคื™ืœื˜ืขืจืก ืฆื• ื•ื•ื™ื“ืขื, ื›ืึทืคึผืŸ ื“ื™ ืคึผืจืึทืกืขืกื˜ ื•ื•ื™ื“ืขื ืคึฟื•ืŸ ืœื™ื™ึทื•ื•ื ื˜ ืื•ืŸ ื“ืขืจื ืึธืš ืฉื™ืงืŸ ืขืก ืื™ื‘ืขืจ ื“ื™ ื ืขืฅ ืฆื• ื“ื™ ืกืขืจื•ื•ืขืจ, ื˜ืจืึทื ืกืงืึธื“ืข ืื•ืŸ ืึทืจื•ื™ืกื’ืขื‘ืŸ ืฆื• ืึทืœืขืžืขืŸ (ื”ืขืœื ื‘ื™ื’ืึธื• ืœืขื‘ืŸ, ื˜ื•ื•ื™ื˜ืฉ). ืื•ืŸ ืื ื“ืขืจืข). ื“ืึธ ืื™ืš ื•ื•ืขืœ ื ื™ืฉื˜ ืึทื ืึทืœื™ื™ื– ื•ื•ื™ ืึทื–ืึท ื˜ื™ื ื’ื– ื–ืขื ืขืŸ ื’ืขื˜ืืŸ, ืื™ืš ื•ื•ืขืœ ื’ืขื‘ืŸ ืึท ืคึผืึธืจ ืคื•ืŸ ื‘ื™ื™ืฉืคื™ืœืŸ ื’ืขืคื•ื ืขืŸ ืื•ื™ืฃ ื“ื™ ื•ื•ืขื‘:

https://jeeliz.com/ - ื“ื™ ื’ื™ื™ื– ื˜ืึธืŸ ืคืึทืงื˜ื™ืฉ-ืฆื™ื™ื˜ CV ืื™ืŸ ื“ื–ืฉืึทื•ื•ืึทืกืงืจื™ืคึผื˜. ื–ื™ื™ ื”ืึธื‘ืŸ ืึท ื’ืึทื ืฅ ืึทืจืกืขื ืึทืœ ืคืึทืจืฉื™ื“ืŸ ื“ื–ืฉืก ืœื™ื™ื‘ืจืขืจื™ื– ืคึฟืึทืจ ืืจื‘ืขื˜ืŸ ืžื™ื˜ ืึท ื•ื•ื™ื“ืขื ืกื˜ืจื™ื ืื•ื™ืฃ ืœื™ื™ึทื•ื•ื ื˜: ื“ื™ื˜ืขืงื˜ื™ื ื’ ืคื ื™ืžืขืจ, ืึทื‘ื“ื–ืฉืขืงืฅ, ืึทืคึผืœื™ื™ื™ื ื’ ืคื™ืœื˜ืขืจืก (ืžืึทืกืงืก, ื•ื•ื™ ืื™ืŸ ื™ื ืกื˜ืึทื’ืจืึทื), ืืื–"ื• ื•.

Canvas capturestream API - ืึทืคึผื™ ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ ืคึฟืึทืจ ืงืึทืคึผื˜ืฉืขืจื™ื ื’ ืึท ื•ื•ื™ื“ืขื ื˜ื™ื™ึทืš ืคึฟื•ืŸ ืœื™ื™ึทื•ื•ื ื˜. ืฉื•ื™ืŸ ื’ืขืฉื˜ื™ืฆื˜ ืื™ืŸ ืงืจืึธื•ื, ืึธืคึผืขืจืึท ืื•ืŸ ืคื™ืจืขืคืึธืงืก

RTCPeerConnection

ืึทื–ื•ื™ ืžื™ืจ ื’ืขืงื•ืžืขืŸ ืฆื• ื“ื™ ืคื•ื ื˜, ืึธื‘ืขืจ ื•ื•ื™ ืฆื• ืึทืงืฉืœื™ ืึทืจื™ื‘ืขืจืคื™ืจืŸ ื“ื™ ื•ื•ื™ื“ืขื ืฆื• ืืŸ ืื ื“ืขืจ ื‘ืึทื ื™ืฆืขืจ? ืงื•ืžื˜ ืฆื• ื“ื™ ืคืึธืจ RTCPeerConnection. ืื™ืŸ ืงื•ืจืฅ, ืื™ืŸ ื›ึผืžืขื˜ ื“ืขื ืฉืจื™ื˜ ืื™ืจ ื“ืึทืจืคึฟืŸ ืฆื• ืฉืึทืคึฟืŸ ืึท RTCPeerConnection ื›ื™ื™ืคืขืฅ:

const peerConnection = new RTCPeerConnection({
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
});

ืžื™ืจ ืกืคึผืขืฆื™ืคื™ืฆื™ืจืŸ iceServers ื•ื•ื™ ืื™ื™ื ืขืจ ืคื•ืŸ ื“ื™ ืึธืคึผืฆื™ืขืก - ื“ืึธืก ืื™ื– ืึท ืกืขืจื•ื•ืขืจ ื•ื•ืึธืก ื”ืขืœืคึผืก ืฆื• ืฆื•ืฉื˜ืขืœืŸ ืึท ืงืฉืจ ืฆื•ื•ื™ืฉืŸ ืฆื•ื•ื™ื™ ื‘ืจืึทื•ื–ืขืจื– ื”ื™ื ื˜ืขืจ NAT'om. ืึทื– ืื™ื–, ื“ื™ ืคึผืจืึธื‘ืœืขื ืื™ื– ืกืึทืœื•ื•ื“ ื“ืึธ: ื•ื•ื™ ืฆื• ื’ืขืคึฟื™ื ืขืŸ ื“ื™ IP ืคื•ืŸ ื“ื™ ื™ื ื˜ืขืจืœืึทืงื™ืึทื˜ืขืจ ืื•ื™ื‘ ืขืจ ืื™ื– ื”ื™ื ื˜ืขืจ ื“ื™ NAT โ€‹โ€‹ืคื•ืŸ ื–ื™ื™ืŸ ืฉืคึผื™ื™ึทื–ืขืจ? ื“ืขืจ ICE ืคึผืจืึธื˜ืึธืงืึธืœ ืงื•ืžื˜ ืฆื• ืจืึทื˜ืขื•ื•ืขืŸ, ืื™ืŸ ืคืึทืงื˜, ICE ืื™ื– ื ื™ืฉื˜ ืึทืคึผืœื™ื™ื– ืฆื• WebRTC, ืึธื‘ืขืจ ืžืขืจ ืื•ื™ืฃ ื“ืขื ืฉืคึผืขื˜ืขืจ.

ื‘ื™ื– ืึทื”ืขืจ, ืžื™ืจ ื’ืึทื˜ Usermedia ืกื˜ืจื™ืžื–:

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
  // Usermedia-ะฟะพั‚ะพะบะธ, ะพะฑั‹ั‡ะฝะพ ัั‚ะพ ะฒะธะดะตะพ ะธ ะฐัƒะดะธะพ 
  const tracks = stream.getTracks();

   for (const track of tracks) {
     // ะบะฐะถะดั‹ะน ั‚ั€ะตะบ ะฟั€ะธัะพะตะดะธะฝัะตะผ ะบ peerConnection
     peerConnection.addTrack(track);
   }
}).catch(console.error);

ื“ืขืจื ืึธืš, ื“ื™ ื ื•ื™ื˜ื™ืง ื’ืขืฉืขืขื ื™ืฉ ืคื™ืจืขืก ืื•ื™ืฃ ื“ื™ ืคึผืขืขืจืงืึธื ื ืขืงื˜ื™ืึธืŸ, ืื™ืŸ ื“ื™ ื”ืึทื ื“ืœืขืจ ืคื•ืŸ ื•ื•ืึธืก ืžื™ืจ ืžื•ื–ืŸ ืžืึทื›ืŸ ืึท ืคืึธืจืฉืœืึธื’ (ืื™ืŸ ื˜ืขืจืžื™ื ืขืŸ ืคื•ืŸ SDP - ืกืขืกื™ืข ื‘ืึทืฉืจื™ื™ึทื‘ื•ื ื’ ืคึผืจืึธื˜ืึธืงืึธืœ) ืื•ืŸ ื‘ืึทืฉื˜ื™ืžืขืŸ ืขืก ืฆื• ื“ื™ ืคึผืขืขืจืงืึธื ื ืขืงื˜ื™ืึธืŸ ื“ื•ืจืš ื“ื™ setLocalDescription ืื•ืคึฟืŸ. ื•ื•ืขื’ืŸ SDP - ื•ื•ืึธืก ืขืก ืื™ื– ืื•ืŸ ื•ื•ืขื’ืŸ ื“ื™ ืคืึธืจืฉืœืึธื’ืŸ ืื•ืŸ ืขื ื˜ืคึฟืขืจืŸ ืคึฟืึธืจืžืึทื˜ื™ืจื•ื ื’ืขืŸ - ืžื™ืจ ื•ื•ืขืœืŸ ืจืขื“ืŸ ื•ื•ื™ื™ึทื˜ืขืจ.

ื ืึธืš ืึทืกื™ื™ื ื™ื ื’ ืึท LocalDescription ืคึผืขืขืจืงืึธื ื ืขืงื˜ื™ืึธืŸ, ื“ืขืจ ื‘ืœืขื˜ืขืจืขืจ "ืึทืกืขืžื‘ืึทืœื–" ืื™ื™ื– ืงืึทื ื“ืึทื“ื™ื™ืฅ, ื“ืึธืก ืื™ื–, ื’ืขืคื™ื ื˜ ืคืึทืจืฉื™ื“ืŸ ื•ื•ืขื’ืŸ ืฆื• ื™ื‘ืขืจื’ืขื‘ืŸ ื“ื•ืจืš NAT. ื“ื™ ืึธื ืฆื™ื ื“ื•ื ื’ ืคื•ืŸ ืฉื˜ืึทื˜ ืขื ื“ืขืจื•ื ื’ ื’ืขืฉืขืขื ื™ืฉ ืคื™ืจืขืก. ืื™ืŸ ื“ื™ onicegathering-ืกื˜ื™ื™ื˜ื˜ืฉืึทื ื’ืข ื”ืึทื ื“ืœืขืจ, ืžื™ืจ ืœืึธื–ืŸ ืึท ืคึฟืึทืจื‘ื™ื ื“ื•ื ื’ ืฆื• ื“ื™ webrtc-signaling-server ื˜ื™ื™ึทืš ืฆื• ื•ื•ืขืงืกืœ ื“ื™ ืกืขืกื™ืข ื‘ืึทืฉืจื™ื™ึทื‘ื•ื ื’ ืฆื•ื•ื™ืฉืŸ ืคึผื™ืจื–:

peerConnection.oniceconnectionstatechange = (event) => {
      console.log('Connection state: ', peerConnection.iceConnectionState);

      if (peerConnection.iceConnectionState === 'connected') {
        // ะœะพะถะตะผ ะฐะบั‚ะธะฒะธั€ะพะฒะฐั‚ัŒ ะบะฝะพะฟะบัƒ Start broadcast
        setBroadcasting(true);
        setBroadcastingBtnActive(true);
      }
    };

// ะกะพะฑั‹ั‚ะธะต ัั€ะฐะฑะฐั‚ั‹ะฒะฐะตั‚ ัั€ะฐะทัƒ, ะบะฐะบ ั‚ะพะปัŒะบะพ ะดะพะฑะฐะฒะธะปัั ะผะตะดะฐะธะฐะฟะพั‚ะพะบ ะฒ peerConnection
peerConnection.onnegotiationneeded = (event) => {
      // ะกะพะทะดะฐะตะผ ะธ ะฝะฐะทะฝะฐั‡ะฐะตะผ SDP offer
      peerConnection.createOffer().
        then((offer) => peerConnection.setLocalDescription(offer)).
        catch(console.error);
    };

// ะกะพะฑั‹ั‚ะธะต ัั€ะฐะฑะฐั‚ั‹ะฒะฐะตั‚ ะบะฐะถะดั‹ะน ั€ะฐะท, ะบะฐะบ ะฟะพัะฒะปัะตั‚ัั ICE ะบะฐะฝะดะธะดะฐั‚
peerConnection.onicegatheringstatechange = (ev) => {
      let connection = ev.target;

      // Now we can activate broadcast button
      if (connection.iceGatheringState === 'complete') {
        let delay = 50;
        let tries = 0;
        let maxTries = 3;

        let timerId = setTimeout(function allowStreaming() {
          if (isOnline) {
            setBroadcastingBtnActive(true);
            return;
          }

          if (tries < maxTries) {
            tries += 1;
            delay *= 2;
            timerId = setTimeout(allowStreaming, delay);
          } else {
            // TODO: show user notification
            console.error("Can't connect to server");

            alert("Can't connect to server");
          }
        }, delay);
      }
    };

ื“ืขืจ ื•ื•ืขื‘ืจื˜ืง-ืกื™ื’ื ืึทืœื™ื ื’-ืกืขืจื•ื•ืขืจ ืื™ื– ื“ืขืจ ืกืขืจื•ื•ืขืจ ืคืืจืœืื ื’ื˜ ืฆื• ื•ื•ืขืงืกืœ ื“ื™ ืกืขืกื™ืข ื‘ืึทืฉืจื™ื™ึทื‘ื•ื ื’ ืฆื•ื•ื™ืฉืŸ ืฆื•ื•ื™ื™ ืคึผื™ืจื–, ืขืก ืงืขืŸ ื–ื™ื™ืŸ ื“ื™ ืกื™ืžืคึผืœืึทืกื˜ ื•ื•ืขื‘ืกืึธืงืงืขื˜ ืึธื“ืขืจ ืงืกื”ืจ ืกืขืจื•ื•ืขืจ ืื•ื™ืฃ ืงื™ื™ืŸ PL. ื–ื™ื™ืŸ ืึทืจื‘ืขื˜ ืื™ื– ืคึผืฉื•ื˜: ืฆื• ืึธื ื ืขืžืขืŸ ืึท ืกืขืกื™ืข ื‘ืึทืฉืจื™ื™ึทื‘ื•ื ื’ ืคื•ืŸ ืื™ื™ืŸ ื™ื™ึทื ืงื•ืงื  ืื•ืŸ ืึทืจื™ื‘ืขืจืคื™ืจืŸ ืขืก ืฆื• ืื ื“ืขืจืŸ.

ื ืึธืš ื“ืขืจ ื•ื•ืขืงืกืœ ืคื•ืŸ ืกืขืกื™ืข ื“ื™ืกืงืจื™ืคึผืฉืึทื ื–, ื‘ื™ื™ื“ืข ื–ื™ื™ื˜ืŸ ื–ืขื ืขืŸ ื’ืจื™ื™ื˜ ืฆื• ื‘ืจืึธื“ืงืึทืกื˜ ืื•ืŸ ื‘ืึทืงื•ืžืขืŸ ื•ื•ื™ื“ืขื ืกื˜ืจื™ืžื–, ืื•ื™ืฃ ื“ืขืจ ื–ื™ื™ึทื˜ ื•ื•ืึธืก ื ืขืžื˜ ื“ื™ ื•ื•ื™ื“ืขื ื˜ื™ื™ึทืš, ื“ื™ ืึธื ื˜ืจืึทืงืง ื’ืขืฉืขืขื ื™ืฉ ืื™ื– ื˜ืจื™ื’ืขืจื“ ืื•ื™ืฃ ื“ื™ PeerConnection, ืื™ืŸ ื“ื™ ื”ืึทื ื“ืœืขืจ ืคื•ืŸ ื•ื•ืึธืก ื“ื™ ื‘ืืงื•ืžืขืŸ ื˜ืจืึทืงืก ืงืขื ืขืŸ ื–ื™ื™ืŸ ืึทืกื™ื™ื ื“ ืฆื• ืื•ืŸ ืงื•ืง ืื™ืŸ ื“ื™ื™ืŸ ื‘ืึทืœื™ื‘ืกื˜ืข ื™ื ื˜ืขืจืœืึทืงื™ืึทื˜ืขืจ. ืžืขืจ ื˜ืขืึธืจื™ืข ืื•ืŸ ืคึผืจื˜ื™ื.

ืœื™ื ืงืก ืื•ืŸ ืœื™ื˜ืขืจืึทื˜ื•ืจ:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - ื“ืึทืงื™ื•ืžืขื ื˜ื™ื™ืฉืึทืŸ RTCPeerConnection

https://github.com/pion/webrtc - ื™ืžืคึผืœืึทืžืขื ื˜ื™ื™ืฉืึทืŸ ืคื•ืŸ WebRTC ืคึผืจืึธื˜ืึธืงืึธืœืก ืื•ื™ืฃ ื’ื™ื™ืŸ

https://webrtcforthecurious.com/ - ืึท ื‘ื•ืš ืคื•ืŸ ื“ื™ ืงืจื™ื™ื™ื˜ืขืจื– ืคื•ืŸ ืคึผื™ืึธืŸ

https://hpbn.co/ - ื‘ื•ืš ื”ื•ื™ืš ืคืึธืจืฉื˜ืขืœื•ื ื’ ื‘ืจืึทื•ื–ืขืจ ื ืขื˜ื•ื•ืึธืจืงื™ื ื’. ื“ื™ ื™ืฉื•ื– ืคื•ืŸ ื™ื ืฉื•ืจื™ื ื’ ื”ื•ื™ืš ืคืึธืจืฉื˜ืขืœื•ื ื’ ืคื•ืŸ ื•ื•ืขื‘ ืึทืคึผืœืึทืงื™ื™ืฉืึทื ื– ื–ืขื ืขืŸ ื“ื™ืกืงืึทืกื˜ ืื™ืŸ ื“ืขื˜ืึทืœ. ืื™ืŸ ื“ื™ ืกื•ืฃ, WebRTC ืื™ื– ื“ื™ืกืงืจื™ื™ื‘ื“. ื“ืขืจ ื‘ื•ืš ืื™ื– ื–ื™ื›ืขืจ ืึทืœื˜ (2013), ืึธื‘ืขืจ ื˜ื•ื˜ ื ื™ืฉื˜ ืคืึทืจืœื™ืจืŸ ื–ื™ื™ึทืŸ ืฉื™ื™ื›ื•ืช.

ืื™ืŸ ื“ืขืจ ื•ื•ื™ื™ึทื˜ืขืจ ื˜ื™ื™ืœ, ืื™ืš ื•ื•ื™ืœืŸ ืฆื• ื’ืขื‘ืŸ ืึท ื‘ื™ืกืœ ืžืขืจ ื˜ื™ื™ืœ ืคื•ืŸ ื˜ืขืึธืจื™ืข ืื•ืŸ ืื™ืŸ ืคื™ืจ ืฆื• ืคื•ื ืึทื ื“ืขืจืงืœื™ื™ึทื‘ืŸ ื“ื™ ืึธืคึผื˜ืจืึธื’ ืื•ืŸ ืคึผืจืึทืกืขืกื™ื ื’ ืคื•ืŸ ืึท ื•ื•ื™ื“ืขื ื˜ื™ื™ึทืš ืื•ื™ืฃ ื“ื™ ืกืขืจื•ื•ืขืจ ื ื™ืฆืŸ ืคึผื™ืึธืŸ, ื˜ืจืึทื ืกืงืึธื“ื™ื ื’ ืฆื• HLS ื“ื•ืจืš ffmpeg ืคึฟืึทืจ ืกืึทื‘ืกืึทืงื•ื•ืึทื ื˜ ื‘ืจืึธื“ืงืึทืกื˜ ืฆื• ื•ื•ื™ื•ืขืจื– ืื™ืŸ ื“ืขื ื‘ืœืขื˜ืขืจืขืจ.

ืคึฟืึทืจ ื“ื™ ื•ืžื’ืขื“ื•ืœื“ื™ืง: ืžื™ื™ืŸ ื–ื™ื™ืขืจ ื’ืจืึธื‘ ืคึผืจืึธื•ื˜ืึทื˜ื™ื™ืคึผ ืคื•ืŸ ื‘ืจืึธื“ืงืึทืกื˜ื™ื ื’ ื•ื•ื™ื“ืขื ืคึฟื•ืŸ ืึท ื•ื•ืขื‘ืงืึทื ืฆื• ืจืขืึทื’ื™ืจืŸ ื“ื•ืจืš ืึท ืคึผื™ืึธืŸ-ื‘ืื–ื™ืจื˜ ืกืขืจื•ื•ืขืจ ืื™ืŸ ื˜ื•ื•ื™ื˜ืฉ (ื“ืึธืก ืื™ื– ื ืึธืจ ืึทืŸ ืขืงืกืคึผืขืจื™ืžืขื ื˜).

ืžืงื•ืจ: www.habr.com

ืงื•ื™ืคืŸ ืคืึทืจืœืึธื–ืœืขืš ื”ืึธืกื˜ื™ื ื’ ืคึฟืึทืจ ื–ื™ื™ื˜ืœืขืš ืžื™ื˜ DDoS ืฉื•ืฅ, VPS VDS ืกืขืจื•ื•ืขืจืก ๐Ÿ”ฅ ืงื•ื™ืคื˜ ืคืึทืจืœืขืกืœืขื›ืข ื•ื•ืขื‘ื–ื™ื™ื˜ืœ ื”ืึธืกื˜ื™ื ื’ ืžื™ื˜ DDoS ืฉื•ืฅ, VPS VDS ืกืขืจื•ื•ืขืจืก | ProHoster