Интеграция Twitch API с сайтом

Интеграция Twitch API с сайтом

Twitch API (Helix) используется для отображения статуса стримов, встраивания плееров, верификации подписчиков канала, авторизации через Twitch. Актуален для игровых сайтов, сообществ стримеров, сервисов для фанатов.

Аутентификация (App Access Token)

async function getTwitchToken(): Promise<string> {
  const resp = await fetch('https://id.twitch.tv/oauth2/token', {
    method: 'POST',
    body: new URLSearchParams({
      client_id:     CLIENT_ID,
      client_secret: CLIENT_SECRET,
      grant_type:    'client_credentials',
    }),
  });
  const data = await resp.json();
  return data.access_token;
}

Статус стрима

async function getStreamStatus(channelName: string): Promise<StreamStatus | null> {
  const token = await getTwitchToken();

  const resp = await fetch(
    `https://api.twitch.tv/helix/streams?user_login=${channelName}`,
    {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Client-Id':     CLIENT_ID,
      },
    }
  );

  const data = await resp.json();
  const stream = data.data[0];

  if (!stream) return null;

  return {
    isLive:      true,
    title:       stream.title,
    game:        stream.game_name,
    viewers:     stream.viewer_count,
    startedAt:   stream.started_at,
    thumbnail:   stream.thumbnail_url.replace('{width}', '640').replace('{height}', '360'),
  };
}

Встраивание плеера

<!-- Twitch Embed -->
<div id="twitch-player"></div>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>
<script>
  new Twitch.Embed('twitch-player', {
    channel:     'channel_name',
    width:       '100%',
    height:      480,
    parent:      ['example.com'],  // домен сайта обязателен
    autoplay:    false,
    muted:       false,
  });
</script>

OAuth2: авторизация через Twitch + проверка подписки

// Проверка подписки пользователя на канал
public function checkSubscription(string $userToken, string $broadcasterId): bool
{
    $user = Http::withToken($userToken)
        ->withHeaders(['Client-Id' => config('services.twitch.client_id')])
        ->get('https://api.twitch.tv/helix/users')
        ->json('data.0');

    $sub = Http::withToken($userToken)
        ->withHeaders(['Client-Id' => config('services.twitch.client_id')])
        ->get('https://api.twitch.tv/helix/subscriptions/user', [
            'broadcaster_id' => $broadcasterId,
            'user_id'        => $user['id'],
        ]);

    return $sub->status() === 200;
}

EventSub для уведомлений

Twitch EventSub позволяет получать webhook-уведомления о начале/конце стрима:

// Подписка на событие stream.online
Http::withToken($appToken)
    ->withHeaders(['Client-Id' => CLIENT_ID])
    ->post('https://api.twitch.tv/helix/eventsub/subscriptions', [
        'type'    => 'stream.online',
        'version' => '1',
        'condition' => ['broadcaster_user_id' => $broadcasterId],
        'transport' => [
            'method'   => 'webhook',
            'callback' => 'https://example.com/webhooks/twitch',
            'secret'   => config('services.twitch.webhook_secret'),
        ],
    ]);

Время реализации: 2–3 рабочих дня.