home
์ด๋ ฅ์„œ
home
Product
Side Project (Essential)
Side Project (Etc.)
GitHub
TISTORY Blog
Instagram
home
๐ŸŽต

STREAM-MUSIC

์œ ํ˜•
Side Project (Etc.)
ํ•œ ์ค„ ์†Œ๊ฐœ
์Œ์•…๋ฐฉ์†ก์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ ์ŠคํŠธ๋ฆฌ๋ฐ ์šฉ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ์œ„์ ฏ ๋ฐ ์Œ์› ํ”Œ๋ ˆ์ด์–ด ์„œ๋น„์Šค
ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„
2022/05/11 โ†’ 2022/05/27
ํ”„๋กœ์ ํŠธ ๊ธฐ์ˆ  ์Šคํƒ
Svelte
WebRTC
Mongo DB
Netlify
ํŒ€ ๊ตฌ์„ฑ
1์ธ ๊ฐœ๋ฐœ
๋‹ด๋‹น ํฌ์ง€์…˜
Front-End
Back-End
2 more properties

๋งํฌ

GitHub Repository

stream-music
skymins04

Demo

STREAM MUSIC
https://streammusic.betaman.xyz/

Blog Posting

[Typescript] ์†Œ๊ทœ๋ชจ ์„œ๋น„์Šค์—์„œ์˜ FaaS(Netlify Functions)์™€ WebRTC๋ฅผ ํ†ตํ•œ Peer๊ฐ„ (์„œ๋ฒ„์ธก๋ฉด)์ €๋น„์šฉ ํ†ต์‹  ์„œ๋น„์Šค ๊ตฌํ˜„ - 1. ๋ฐฉ๋ฒ•๋ก 
1. ์„œ๋ก  ๋ณธ ํฌ์ŠคํŠธ๋Š” ์ž‘์€ ์„œ๋น„์Šค ๊ทœ๋ชจ์—์„œ์˜ ๊ฐ Peer๊ฐ„์˜ ์„œ๋ฒ„์ธก๋ฉด ์ €๋น„์šฉ ํ†ต์‹  ์„œ๋น„์Šค๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์— ๋ชฉ์ ์„ ๋‘๊ณ  ์žˆ๋‹ค. ๋ฌผ๋ก  ํ•„์ž๊ฐ€ ์†Œ๊ฐœํ•œ ๋ฐฉ๋ฒ•๋ณด๋‹ค ๋” ํšจ์œจ์ ์ธ ๋ฐฉ๋ฒ•์ด ์žˆ์„ ์ˆ˜๋Š” ์žˆ๋‹ค. ์ด์— ๋Œ€ํ•œ ์˜๊ฒฌ์€ ์ ๊ทน ์ˆ˜์šฉํ•˜๊ณ  ์žˆ์œผ๋‹ˆ ๋‹ค๋ฅธ ์˜๊ฒฌ์ด ์žˆ๋‹ค๋ฉด ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ๊ธฐ ๋ฐ”๋ž€๋‹ค. 2. ๋ณธ๋ก  2-1. ๋ฌธ์ œํ™•์ธ Peer๊ฐ„ ํ†ต์‹ ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” ์—ฌ๋Ÿฌ๋ฐฉ๋ฒ•์ด ์žˆ๊ฒ ์ง€๋งŒ, ๋Œ€ํ‘œ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ socket ํ†ต์‹ ์ด ์žˆ๋‹ค. ํŠนํžˆ Web๊ธฐ๋ฐ˜์˜ ํด๋ผ์ด์–ธํŠธ์—์„œ๋Š” ์•ž์—์„œ ๋งํ•œ๋˜ socket๊ณผ ๋น„์Šทํ•œ(์—„๋ฐ€์ด ๋งํ•ด์„œ ๋‘˜์ด ๋‹ค๋ฅธ ํ”„๋กœํ† ์ฝœ์ด๊ธด ํ•จ) WebSocket์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. WebSocket ์„œ๋ฒ„๋ฅผ ๊ฐ€์šด๋ฐ ๋‘๊ณ  ๊ฐ Peer๊ฐ€ WebSocket ์„œ๋ฒ„์— ๋ฐ”์ธ๋”ฉ์ด ๋˜๋ฉด ์„œ๋ฒ„๋ฅผ ํ†ตํ•ด์„œ ๊ฐ Peer๊ฐ€ Private Chan..
https://blog.betaman.kr/101

๋‹ด๋‹น ์—ญํ•  ๋ฐ ๊ธฐ์ˆ  ์Šคํƒ

โ€ข
FrontEnd
โ—ฆ
Svelte
โ—ฆ
WebRTC
โ€ข
BackEnd
โ—ฆ
Netlify Functions
โ—ฆ
MongoDB

ย ์ฃผ์š” ๊ฐœ๋ฐœ์‚ฌํ•ญ

โ€ข
์œ ํŠœ๋ธŒ, ๋กœ์ปฌํŒŒ์ผ์Œ์›(MP3, WAV, FLAC) ํ†ตํ•ฉ ํ”Œ๋ ˆ์ด์–ด
โ—ฆ
Indexed DB๋ฅผ ์ด์šฉํ•˜์—ฌ ํžˆ์Šคํ† ๋ฆฌ ๊ธฐ๋Šฅ ๊ตฌํ˜„
โ—ฆ
ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ์— ์œ ํŠœ๋ธŒ ์Œ์›๊ณผ ๋กœ์ปฌํŒŒ์ผ์Œ์› ํ˜ผํ•ฉ ๊ตฌ์„ฑ ๊ฐ€๋Šฅ
โ€ข
๋ฐฉ์†ก ์†ก์ถœํ”„๋กœ๊ทธ๋žจ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ์œ„์ ฏ (OBS, XSplit ๋“ฑ์—์„œ ๋ธŒ๋ผ์šฐ์ € ์œ„์ ฏ์œผ๋กœ ๊ฐ€์ ธ์˜ด)
โ—ฆ
WebRTC๋ฅผ ์ด์šฉํ•ด ํ”Œ๋ ˆ์ด์–ด์™€ ์œ„์ ฏ์ด ์ง์ ‘ ํ†ต์‹ ํ•˜๋„๋ก ๊ตฌํ˜„ํ•˜์—ฌ ๋ณ„๋„์˜ WebSocket ์„œ๋ฒ„ ์—†์ด ํ”Œ๋ ˆ์ด์–ด์—์„œ ์ƒ์„ฑํ•œ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ์ •๋ณด๋ฅผ ์œ„์ ฏ์—์„œ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ
โ—ฆ
WebRTC handshaking๊ณผ ์œ„์ ฏ ์ฑ„๋„ ๊ตฌ๋ถ„์„ ์œ„ํ•ด Netlify Functions์™€ MongoDB๋ฅผ ์‚ฌ์šฉํ•จ Handshaking ์ดํ›„์—” ๋ณ„๋„์˜ ์„œ๋ฒ„ ๊ฐœ์ž… ์—†์ด ํ”Œ๋ ˆ์ด์–ด์™€ ์œ„์ ฏ์ด ์ง์ ‘ ํ†ต์‹  ๊ฐ€๋Šฅ