์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์›น์—์„œ ๋‹ค๋ฃจ๋Š” ๋ฏธ๋””์–ด - ํ™”์ƒ ๋Œ€ํ™”๋ฅผ ๋งŒ๋“ค๋ฉด์„œ ๋ฐฐ์šฐ๋Š” MediaStream API

์›น์—์„œ ๋ฏธ๋””์–ด(๋น„๋””์˜ค, ์˜ค๋””์˜ค)๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•!! ์ด์ œ ์–ด๋ ต์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜ํ•˜๋‚˜ ์”ฉ ๋”ฐ๋ผํ•˜๋ฉด์„œ ๋ฐฐ์šฐ๋Š” MediaStream API ์™€ WebRTC

(5.0) ์ˆ˜๊ฐ•ํ‰ 1๊ฐœ

์ˆ˜๊ฐ•์ƒ 39๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • MediaStream API

  • WebRTC

  • WebSocket

  • ์‹ค์ „ ํ”„๋กœ์ ํŠธ์— ์ ์šฉ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ 

์›น์—์„œ ๋ฏธ๋””์–ด๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ• MediaStream API

์›น์—์„œ ๋ฏธ๋””์–ด(๋น„๋””์˜ค, ์˜ค๋””์˜ค)๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•!!

์ด์ œ ์–ด๋ ต์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

ํ•˜๋‚˜ํ•˜๋‚˜ ์”ฉ ๋”ฐ๋ผํ•˜๋ฉด์„œ ๋ฐฐ์šฐ๋Š” MediaStream API ์™€ WebRTC

  • MediaStream API๋ฅผ ํ†ตํ•ด ๋ฏธ๋””์–ด๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค

  • WebRTC๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฏธ๋””์–ด๋ฅผ ์ „์†กํ•˜๊ณ  ์ˆ˜์‹ ํ•˜๋Š” ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค

  • WebSocket์„ ์ด์šฉํ•˜์—ฌ ํ™”์ƒํšŒ์˜ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค

  • ์‹ค์ œ ์‹ค๋ฌด์—์„œ ํ™”์ƒํšŒ์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํ„ฐ๋“ํ•œ ๋…ธํ•˜์šฐ ๋ฐ ๊ฐ์ข… ํŒ์˜ ์ œ๊ณต

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”


์ „๋ฐ˜๋ถ€

์—ฌ๋Ÿฌ Web API ์ค‘ MediaStream API ์— ๋Œ€ํ•ด ๋‹ค๋ฃจ๋ฉฐ WebRTC์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์„ ์˜ˆ์ œ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํ•™์Šตํ•ด ๋‚˜๊ฐ‘๋‹ˆ๋‹ค.

JavaScript์™€ React๋ฅผ ์ด์šฉํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ (1) ์‹œ์ž‘ํ•˜๊ธฐ

MediaStream API ๋ฐ WebRTC์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ณ , ์˜ˆ์ œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ค€๋น„ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ (2) MediaStream ๊ธฐ๋ณธ

์นด๋ฉ”๋ผ ๋ฐ ๋งˆ์ดํฌ๋กœ ๋ถ€ํ„ฐ MediaStream์„ ์–ป๋Š” ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

์„น์…˜ (3) Media ์žฅ์น˜

๋ฏธ๋””์–ด ์žฅ์น˜๋ฅผ ์กฐํšŒํ•˜๊ณ  ์žฅ์น˜์˜ ์ •๋ณด๋ฅผ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

์„น์…˜ (4) MediaConstrainsts

MediaStream์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ์ข… ์˜ต์…˜์— ๋Œ€ํ•ด ๋‹ค๋ฃน๋‹ˆ๋‹ค.

์„น์…˜ (5) Zoom

MediaConstraints๋ฅผ ์ด์šฉํ•ด ์นด๋ฉ”๋ผ์˜ ์คŒ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ด…๋‹ˆ๋‹ค.

์„น์…˜ (6) MediaStream ์ƒ์„ฑ

MediaPipe ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์นด๋ฉ”๋ผ์˜ ์˜์ƒ์„ ์ˆ˜์ •ํ•˜๊ณ , ์ƒˆ๋กœ์šด MediaStream์„ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

์„น์…˜ (7) AudioContext

Audio๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ , Audio์˜ Gain ๊ฐ’ ์กฐ์ ˆ์„ ํ†ตํ•ด ์†Œ๋ฆฌ์˜ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  Audio ๊ทธ๋ž˜ํ”„๋ฅผ ๊ทธ๋ ค๋ด…๋‹ˆ๋‹ค.

์„น์…˜ (8) WebRTC

webrtc ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์„ ํ•™์Šตํ•˜๊ณ , ๋ฏธ๋””์–ด๋ฅผ ์ „์†กํ•˜๊ณ  ์ˆ˜์‹ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

ํ›„๋ฐ˜๋ถ€

์‹ค๋ฌด์— ๊ฐ€๊นŒ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํ™”์ƒํšŒ์˜ ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค.

JavaScript์™€ React๋ฅผ ์ด์šฉํ•œ FrontEnd ํ”„๋กœ์ ํŠธ ๋ฐ Java์™€ Spring์„ ์ด์šฉํ•œ BackEnd ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ (9) ์‹ค์ „ ํ”„๋กœ์ ํŠธ - FrontEnd Part 1

์ด์ „์— ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ข…ํ•ฉํ•˜์—ฌ ํ™”์ƒ๋Œ€ํ™”์— ์ฐธ์—ฌํ•˜๊ธฐ ์ „์˜ FrontEnd ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

์„น์…˜ (10) ์‹ค์ „ ํ”„๋กœ์ ํŠธ - BackEnd

websocket ์„ ์ด์šฉํ•˜์—ฌ ํ™”์ƒ๋Œ€ํ™”๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์„œ๋ฒ„ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

์„น์…˜ (11) ์‹ค์ „ ํ”„๋กœ์ ํŠธ - FrontEnd Part2

์„œ๋ฒ„ ํ”„๋กœ๊ทธ๋žจ๊ณผ ์ง์ ‘ ํ†ต์‹ ์„ ํ•˜๊ณ , ๊ฐ์ข… Event๋ฅผ ์ฒ˜๋ฆฌํ•˜๋ฉฐ ์‹ค์ œ ํ™”์ƒ ๋Œ€ํ™” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ : ์นด๋ฉ”๋ผ ๋ฐ ๋งˆ์ดํฌ๊ฐ€ ์žฅ์ฐฉ๋˜์–ด ์žˆ๋Š” Windows ํ˜น์€ macOS ํ™˜๊ฒฝ์˜ PC

  • ์‚ฌ์šฉ ๋„๊ตฌ: VisualStudio Code, npm, docker, java, maven

ํ•™์Šต ์ž๋ฃŒ

  • ๊ฐ ์„น์…˜ ๋ณ„๋กœ ์™„์„ฑ๋œ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์œ ์˜์‚ฌํ•ญ

  • ์นด๋ฉ”๋ผ ๋ฐ ๋งˆ์ดํฌ๊ฐ€ ์„ค์น˜๋œ PC๋ฅผ ์ค€๋น„ํ•˜์…”์•ผ ์ œ๋Œ€๋กœ ๋œ ์‹ค์Šต์„ ์ง„ํ–‰ ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์›น์—์„œ ๋‹ค๋ฃจ๋Š” ๋ฏธ๋””์–ด์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹  ๋ถ„

  • ๊ธฐ๋ณธ ๋ฌธ๋ฒ• ํ•™์Šต ํ›„์— ์‹ค์ „์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์„ ์ตํžˆ๊ณ ์ž ํ•˜๋Š” ๋ถ„

  • WebRTC์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹  ๋ถ„

  • WebSocket์„ ๋ฐฐ์šฐ๊ณ ์ž ํ•˜์‹œ๋Š” ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • JavaScript (๊ธฐ๋ณธ ๋ฌธ๋ฒ•์— ๋Œ€ํ•œ ์ง€์‹์ด ํ•„์š”ํ•˜๊ณ , Promise์˜ ๊ฐœ๋…์„ ์•Œ๊ณ  ๊ณ„์‹œ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค)

  • React (ํ•„์ˆ˜๋Š” ์•„๋‹ˆ์ง€๋งŒ, State์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์•Œ๊ณ  ๊ณ„์‹œ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค)

  • Java (๊ธฐ๋ณธ ๋ฌธ๋ฒ•์— ๋Œ€ํ•œ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค)

  • Spring (ํ•„์ˆ˜๋Š” ์•„๋‹ˆ์ง€๋งŒ, SpringBoot๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ๊ณ„์‹œ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค)

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์‚ฌ๋‹˜์€์ž…๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ๊ฒƒ์„ ๊ฟˆ๊พธ๋Š” ๊ฐœ๋ฐœ์ž ์ž…๋‹ˆ๋‹ค.

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

85๊ฐœ โˆ™ (11์‹œ๊ฐ„ 49๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

1๊ฐœ

5.0

1๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • junes_dept๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    junes_dept

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    31% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ๋น„์Šทํ•œ ๊ฐ•์˜

    ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ์›” โ‚ฉ374,597

    5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

    โ‚ฉ89,100