Twitching
twitch.tv relay on edges for better experience
Chrome Webstore: https://chrome.google.com/webstore/detail/lpanejlgnikpcmhmkbgeiigfahjdnccm
Firefox Addons: https://addons.mozilla.org/en-US/firefox/addon/twitching/
Warning
๋ณธ ์๋น์ค, ํด๋ผ์ด์ธํธ, ๋ฆฌ์์ค ๋ฑ์ ์ฌ์ฉํ์ฌ ๋ฐ์ํ๋ ์ผ์ ๋ํ ์ฑ ์์ ๋ชจ๋ ์ฌ์ฉ์ ๋ณธ์ธ์๊ฒ ์์ต๋๋ค. ๋ณธ ๊ฐ๋ฐ์๋ ํ์ฅ ํ๋ก๊ทธ๋จ์ ์ฌ์ฉํ๋ฉด์ ๋ฐ์ํ ๋ฌธ์ ์ ๋ํด ์ฑ ์์ ์ง์ง ์์ต๋๋ค.
FAQ
1. ๋ฌด์จ ๊ธฐ๋ฅ์ ํ๋ ํ์ฅ์ธ๊ฐ์?
twitch.tv์์ ๋ฐ์์ค๋ ์์ ๋ฐ์ดํฐ๋ฅผ Twitch์์ ์ง์ ํ ์๋ฒ๊ฐ ์๋ ๋ค๋ฅธ Twitch ์๋ฒ์์ ๋ฐ์์ค๋๋ก ๋ง๋ค์ด ์ฃผ๋ ํ๋ก๊ทธ๋จ์ ๋๋ค.
2. ์๋ฒ ์ ํ์ด ์๋ค๋๋ฐ ๋ฌด์จ ์๋ฆฌ์ธ๊ฐ์?
์๋๋ ์ต๋ ํ๋ฃจ ์์ณฅ๋์ด 100k์ธ ๋ฌด๋ฃ Cloudflare Workers ๊ณ์ ์ ์ฌ์ฉํ์ฌ ์ ๊ณตํ์์ผ๋, ํ์ฌ๋ ์ ๋ฃ ๊ฒฐ์ ๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ์ด ์์ต๋๋ค. ํ์์ ๊ด์ฌ์์ผ์๋ค๋ฉด ์ ํ๋กํ์ ํ์ธํด์ฃผ์ธ์.
3. ์๋ฒ๋ฅผ ๋ง์ด ์ฐ๋ฉด ๋๋ ค์ง๋์?
Workers ์๋น์ค๋ ํ๋์ ์๋ฒ๊ฐ ์๋ ๊ฒ์ด ์๋๋ผ ์ฌ๋ฌ๊ฐ์ ์๋ฒ์์ ๋์ผํ ์ฝ๋๋ฅผ ์์ฒญ๋ง๋ค ๋ถ์ฐ์์ผ ์คํ์ํค๋ ๋ฐฉ์์ด๊ธฐ ๋๋ฌธ์ ๋๋ ค์ง์ง ์์ต๋๋ค.
์ง์ ๊ตฌ์ถํ๊ธฐ
1. Workers Edge ๊ตฌ์ถํ๊ธฐ
- Cloudflare ๊ณ์ ์ ๋ง๋ญ๋๋ค.
- Zone์ Workers ๋ฉ๋ด๋ก ์ด๋ํ์ฌ ์๋น์ค ์์ฑ ๋ฒํผ์ ๋๋ฆ ๋๋ค.
- ์ํ๋ ์๋น์ค ์ด๋ฆ์ ์ ๊ณ ์์ฑ ๋ฒํผ์ ๋๋ฆ ๋๋ค.
- ๋น ๋ฅธ ํธ์ง ๋ฒํผ์ ๋๋ฌ ์ฝ๋๋ฅผ ์ ๋ ฅํ๋ ๊ณณ์ ์๋ ์ฝ๋๋ก ์ ๋ถ ๋ฎ์ด ์์๋๋ค.
addEventListener('fetch', (event) =>
event.respondWith(
handleRequest(event.request).catch(
(err) => new Response(err.stack, { status: 500 })
)
)
)
async function handleRequest(request) {
const parsed = new URL(request.url)
let response = await fetch(
`http://usher.twitch.tv/api/channel/hls` +
parsed.href.replace(parsed.origin, ''),
{
headers: request.headers,
}
)
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', '*')
return response
}
- ์ ์ฅ ๋ฐ ๋ฐฐํฌ ๋ฒํผ์ ํด๋ฆญํ์ฌ ๋ฐฐํฌํฉ๋๋ค.
Note : Worker๋ ์ ์ฅ ํ 2-3๋ถ ์ ๋ ๋ฐฐํฌํ๋ ์๊ฐ์ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ์๋ํ์ง ์์ ์ ์์ต๋๋ค. ์ด๋ด ๊ฒฝ์ฐ์๋ ์ ์ ๊ธฐ๋ค๋ ธ๋ค๊ฐ ์๋ํด์ฃผ์ธ์.
2. ์ปค์คํ Edge๋ฅผ ์ฌ์ฉํ๋๋ก ํ๊ธฐ
-
๋ธ๋ผ์ฐ์ ์์ Twitching ํ์ฅ ํ๋ก๊ทธ๋จ ์์ด์ฝ์ ํด๋ฆญํฉ๋๋ค.
-
ํ ์คํธ ์ ๋ ฅ ์นธ์ ๋ง๋ค์ด ๋ Worker ์ฃผ์๋ฅผ ์ ๋ ฅํฉ๋๋ค. (์์ : test.account.workers.dev)
-
์ ํ ํ Twitch ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์นฉ๋๋ค.