방송 오버레이 - auejin/vzzk-bot GitHub Wiki

브라우저 오버레이는 무엇인가요?

OBS 등 방송 프로그램에서 원하는 장면에 보여줄 수 있는 웹 페이지를 의미합니다.

VZZK을 사용하는 스트리머 분들을 위해, VZZK이 미리 만들어둔 오버레이를 HTML 파일로 제공하고 있습니다.

방송 장면에 브라우저 오버레이를 추가하면, 스트리머가 화면공유를 하지 않더라도 시청자가 VZZK의 정보를 방송 화면에서 볼 수 있게 됩니다.

OBS에 오버레이를 어떻게 추가하나요?

OBS를 실행하고 소스 목록에서 + 버튼을 클릭하세요.
브라우저를 선택하고, 이름을 정해주세요.
브라우저 오버레이의 URL (HTML 파일의 경로)를 입력하세요.
가로 세로 비율에 따라 화면이 달라지는 오버레이가 있으니 너비와 높이를 조절하세요.
소리가 나는 오버레이는 OBS를 통해 오디오 조절을 활성화 하시면 편리합니다.
오버레이 새로고침을 위해 장면이 활성화되면 브라우저를 새로고침을 활성화 합니다.

현재 지원하는 오버레이는 어떤 것이 있나요?

VZZK은 스트리머 분들이 사용하실 수 있는 신청곡 (SR봇) 오버레이와 투표 오버레이를 만들어 제공하고 있습니다.

그 밖에 원하시는 오버레이가 있다면, VZZK 공식 디스코드에서 건의하실 수 있습니다.

VZZK이 제공하는 오버레이는 {VZZK 설치 경로}/overlay 폴더 안에 위치해 있습니다.

VZZK의 오버레이 디자인을 수정할 수 있나요?

VZZK이 제공하는 오버레이는 스트리머의 편의를 위해 언제든 수정 및 배포가 가능합니다.

VZZK 공식 디스코드에서 오버레이 꾸미기 꿀팁을 배우거나, 직접 도움을 받으실 수도 있습니다.

여러분의 방송 화면 스타일과, 스트리머의 개성에 맞춰 자유롭게 꾸며보세요!

Warning

VZZK이 업데이트 되면, VZZK이 제공하는 오버레이 HTML 파일은 원본으로 대체됩니다.

오버레이를 수정하실 땐, 반드시 원본을 복제하여 사용해주세요!

나만의 오버레이를 만들고 싶어요

VZZK에서 발생하는 이벤트를 받아와서 여러분만의 특별한 오버레이를 만들 수 있습니다.

오버레이를 개발할 때는 크게 두 가지를 고려해주세요.

오버레이가 처음 시작할 때 VZZK의 최신 정보를 가져와야 합니다.
오버레이가 실시간으로 정보를 받도록 SSE(Server Sent Event)를 연결해야 합니다.

아래에 개발에 필요한 모든 정보를 정리해두었습니다. 방송에 딱 맞는 오버레이를 직접 만들어보세요!

1. 오버레이 기본 구조

먼저 아래와 같은 구조로 HTML 파일을 만들어주세요.

<!DOCTYPE html>
<html>
<head>
   <title>나만의 VZZK 오버레이</title>
   <style>
       /* 오버레이의 디자인을 여기에 적어주세요 */
   </style>
</head>
<body>
   <!-- 오버레이의 구조를 여기에 적어주세요 -->
   <div id="overlay"></div>

   <script>
       // 오버레이의 동작을 여기에 적어주세요 
   </script>
</body>
</html>

2. SR봇 오버레이 만들기

SR봇 오버레이는 현재 재생 중인 노래와 신청곡 목록을 보여줍니다.

먼저 SR봇의 최신 정보를 가져와보세요:

// 처음 한 번만 실행하면 돼요
fetch('http://localhost:3000/vzzk/sr/init')
  .then(response => response.json())
  .then(data => {
    // data에는 이런 내용이 들어있어요:
    //   data.current_song: 현재 재생 중인 노래 (없으면 null)
    //   data.queue: 대기 중인 신청곡 목록 (배열)
    //
    // current_song과 queue의 노래들은 모두 이런 정보를 가지고 있어요:
    //   id: 노래의 고유 번호
    //   sender: 노래를 신청한 시청자의 이름
    //   title: 노래 제목
    //   author: 노래 가수
    //   url: 노래의 유튜브 주소
    //   duration: 노래 길이 (초)
    
    console.log('현재 재생 중인 노래:', data.current_song);
    console.log('대기 중인 신청곡:', data.queue);
  });

실시간으로 SR봇의 정보를 받아와보세요:

// SSE 연결은 한 번만 하면 돼요
const eventSource = new EventSource('http://localhost:3000/vzzk/sr/events');

// SR봇의 정보가 바뀔 때마다 자동으로 불려요
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // data의 내용은 위의 init과 동일해요!
}

3. 투표 오버레이 만들기

투표 오버레이는 시청자들의 투표 현황과 결과를 보여줍니다.

먼저 투표의 최신 정보를 가져와보세요:

// 처음 한 번만 실행하면 돼요
fetch('http://localhost:3000/vzzk/vote/init')
  .then(response => response.json())
  .then(data => {
    // data에는 이런 내용이 들어있어요:
    //   data.options: 투표할 수 있는 선택지들의 목록 (배열)
    //   data.votes: 각 선택지별 투표 수 (예: {"치킨": 5, "피자": 3})
    //   data.total_votes: 전체 투표 수
    //   data.winners: 가장 많은 표를 받은 선택지 배열 (투표 진행 중이면 null)
    
    console.log('투표 선택지:', data.options);
    console.log('투표 수:', data.votes);
    console.log('전체 투표 수:', data.total_votes);
    console.log('우승한 선택지:', data.winners);
  });

실시간으로 투표 정보를 받아와보세요:

// SSE 연결은 한 번만 하면 돼요
const eventSource = new EventSource('http://localhost:3000/vzzk/vote/events');

// 투표 정보가 바뀔 때마다 자동으로 불려요
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // data의 내용은 위의 init과 동일해요!
}