• This repository has been archived on 23/Dec/2023
  • Stars
    star
    117
  • Rank 301,828 (Top 6 %)
  • Language
    JavaScript
  • Created about 2 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

twitch.tv relay on edges for better experience

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 ๊ตฌ์ถ•ํ•˜๊ธฐ

  1. Cloudflare ๊ณ„์ •์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  2. Zone์˜ Workers ๋ฉ”๋‰ด๋กœ ์ด๋™ํ•˜์—ฌ ์„œ๋น„์Šค ์ƒ์„ฑ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค.
  3. ์›ํ•˜๋Š” ์„œ๋น„์Šค ์ด๋ฆ„์„ ์ ๊ณ  ์ƒ์„ฑ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค.
  4. ๋น ๋ฅธ ํŽธ์ง‘ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ณณ์— ์•„๋ž˜ ์ฝ”๋“œ๋กœ ์ „๋ถ€ ๋ฎ์–ด ์”Œ์›๋‹ˆ๋‹ค.
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
}
  1. ์ €์žฅ ๋ฐ ๋ฐฐํฌ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.

Note : Worker๋Š” ์ €์žฅ ํ›„ 2-3๋ถ„ ์ •๋„ ๋ฐฐํฌํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ”๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿด ๊ฒฝ์šฐ์—๋Š” ์ž ์‹œ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ์‹œ๋„ํ•ด์ฃผ์„ธ์š”.

2. ์ปค์Šคํ…€ Edge๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜๊ธฐ

  1. ๋ธŒ๋ผ์šฐ์ €์—์„œ Twitching ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ ์•„์ด์ฝ˜์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

  2. ํ…์ŠคํŠธ ์ž…๋ ฅ ์นธ์— ๋งŒ๋“ค์–ด ๋‘” Worker ์ฃผ์†Œ๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. (์˜ˆ์‹œ : test.account.workers.dev)

  3. ์„ ํƒ ํ›„ Twitch ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์นฉ๋‹ˆ๋‹ค.