software

Node.js로 OBS용 TikTok LIVE 스트림 오버레이 만들기

발행: (2026년 3월 16일 AM 09:03 GMT+9)
5 분 소요
원문: Dev.to

Source: Dev.to

번역을 진행하려면 실제 기사 본문 텍스트가 필요합니다.
본문을 제공해 주시면, 원본 포맷과 마크다운을 유지하면서 한국어로 번역해 드리겠습니다.

개요

채팅 메시지, 선물, 팔로우, 시청자 수와 같은 TikTok LIVE 이벤트에 실시간으로 반응하는 맞춤형 OBS 오버레이를 만듭니다. 아키텍처는 다음과 같습니다:

TikTok LIVE → tiktok-live-api (WebSocket) → Node.js server → Local WebSocket → OBS Browser Source

설정

mkdir tiktok-overlay && cd tiktok-overlay
npm init -y
npm install tiktok-live-api ws express
mkdir public

서버 (server.mjs)

// server.mjs
import { TikTokLive } from 'tiktok-live-api';
import { WebSocketServer } from 'ws';
import express from 'express';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
app.use(express.static(join(__dirname, 'public')));
app.listen(3000, () => console.log('Overlay at http://localhost:3000'));

const wss = new WebSocketServer({ port: 8080 });
const client = new TikTokLive('USERNAME_HERE', {
  apiKey: 'YOUR_API_KEY'
});

// Forward all TikTok events to the overlay via the local WebSocket
client.on('event', (event) => {
  const data = JSON.stringify(event);
  for (const ws of wss.clients) {
    ws.send(data);
  }
});

client.on('connected', () => console.log('✅ Connected to TikTok'));

client.on('chat', (e) => {
  console.log(`💬 ${e.user.uniqueId}: ${e.comment}`);
});

client.on('gift', (e) => {
  console.log(`🎁 ${e.user.uniqueId} sent ${e.giftName} (${e.diamondCount} 💎)`);
});

client.connect();

서버 실행:

node server.mjs

프런트‑엔드 오버레이 (public/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TikTok Live Overlay</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: transparent;
      font-family: 'Segoe UI', sans-serif;
      color: white;
      overflow: hidden;
    }
    #alerts {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 350px;
    }
    .alert {
      background: rgba(0,0,0,0.8);
      border-left: 4px solid #ff0050;
      padding: 12px 16px;
      margin-bottom: 8px;
      border-radius: 8px;
      animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 4.5s;
      animation-fill-mode: forwards;
    }
    .alert.gift { border-color: #ffd700; }
    .alert .user { color: #ff0050; font-weight: bold; }
    .alert .diamonds { color: #ffd700; }
    #viewers {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: rgba(0,0,0,0.8);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 18px;
    }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeOut {
      to { opacity: 0; transform: translateY(-20px); }
    }
  </style>
</head>
<body>
  <div id="alerts"></div>
  <div id="viewers">👀 0</div>

  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const alerts = document.getElementById('alerts');

    ws.onmessage = (e) => {
      const msg = JSON.parse(e.data);
      const d = msg.data || {};
      const user = d.user?.uniqueId || '';

      switch (msg.event) {
        case 'chat':
          addAlert(`@${user}: ${d.comment}`);
          break;
        case 'gift':
          addAlert(`@${user} sent ${d.giftName} (${d.diamondCount} 💎)`, 'gift');
          break;
        case 'follow':
          addAlert(`@${user} followed! ➕`);
          break;
        case 'roomUserSeq':
          document.getElementById('viewers').textContent = `👀 ${d.viewerCount}`;
          break;
      }
    };

    function addAlert(html, type = '') {
      const div = document.createElement('div');
      div.className = `alert ${type}`;
      div.innerHTML = html;
      alerts.prepend(div);
      setTimeout(() => div.remove(), 5000);
      while (alerts.children.length > 5) alerts.lastChild.remove();
    }
  </script>
</body>
</html>

브라우저에서 http://localhost:3000을 열어 알림이 표시되고 시청자 수가 업데이트되는지 확인하세요.

OBS에 오버레이 추가

  1. 브라우저 소스 추가

    • URL: http://localhost:3000
    • Size: 1920×1080 (또는 캔버스에 맞추기)
    • 보이지 않을 때 소스 종료 체크

  2. 배경이 투명하므로 알림이 스트림에 바로 오버레이됩니다.

    • 채팅 메시지는 빨간색 테두리 알림으로 표시됩니다.
    • 선물은 다이아몬드 값이 표시된 금색 테두리 알림으로 표시됩니다.
    • 시청자 수는 오른쪽 하단에 유지됩니다.

작동 방식

  • tiktok-live-api는 TikTok에 WebSocket 연결을 유지하고 타입이 지정된 JSON 이벤트를 발생시킵니다.
  • Node.js 서버는 모든 이벤트를 연결된 로컬 WebSocket 클라이언트(오버레이 페이지)로 전달합니다.
  • 브라우저 소스는 이벤트를 수신하고, DOM을 업데이트하며, 부드러운 시각 피드백을 위해 CSS 애니메이션을 사용합니다.

리소스

무료 티어: 하루 50 요청, 1 WebSocket 연결 — 개발 및 테스트에 충분합니다.

0 조회
#TikTok #OBS #Node.js #WebSocket #stream overlay #tiktok-live-api #Express #JavaScript
원문 보기
Share:
Back to Blog

관련 글

더 보기 »