여러 채널 및 별도 오버레이

1. 하나의 세션에 캡처 통합

SSN에 원하는 소스 채팅을 추가하고 각각의 새 메시지 하나가 동일한 필터 없는 스트리밍 채팅 도크로 도착하는지 확인하세요. 해당 도크를 운영자 화면으로 유지하세요.

세션, 비밀번호, 버전, 서버 설정을 유지하도록 생성된 링크를 복사하세요. 각 시청자 화면을 별도 OBS 브라우저 소스로 추가하세요. OBS 소스 이름을 알기 쉽게 다음과 같이 지정하세요: Twitch 채팅 그리고 YouTube 채팅.

2. 플랫폼별로 흐르는 채팅 분리

흐르는 채팅은 생성된 다음 URL의 복사본 두 개를 만드세요: dock.html URL입니다. 각 복사본에 다음 옵션을 추가하세요:

예를 들어 기본 연결에서는:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu

사용: onlyfrom 그리고 hidefrom 을 이 페이지들에 사용하세요. 다음과 같은 옵션이 onlytype 다른 오버레이에서 작동한다고 여기에서도 작동한다고 가정하지 마세요. 사용할 값: youtubeshorts 를 캡처에서 해당 유형을 보고할 때 별도로 사용하세요. 참고: 소스 유형.

3. 선택한 메시지 분리

흐르는 채팅 대신 선택한 채팅을 표시하려면 생성된 다음 링크를 복제하세요: featured.html 링크의 복사본을 만들고 다음을 추가하세요: &onlyfrom=twitch 를 한 복사본에, 다음을 &onlyfrom=youtube 를 다른 복사본에 추가하세요. 메시지를 선택할 운영자 도크는 열어 두세요.

현재 강조 채팅의 onlyfrom 은 소스 유형 하나만 받습니다. 위의 도크용 쉼표 구분 예제를 강조 채팅의 이 필드에 복사하지 마세요.

4. 같은 플랫폼의 두 채널

onlyfrom=twitch 는 특정 Twitch 채널이 아닌 Twitch 플랫폼을 선택합니다. 채널 이름과 방송 제목은 메타데이터이며 URL 필터 이름과 바꿔 쓸 수 없습니다. 추가할 옵션: &showchannelname 를 추가하면 소스에서 제공하는 채널 이름을 표시합니다.

고급 도크 필터링에는 &filtertid=123 은 숫자로 된 원본 탭 ID를 받으며 쉼표로 구분한 ID도 지원합니다. 실제 캡처 페이로드에서 다음 값을 확인하세요: tid (참고: 이벤트 참고 문서 그리고 명령 및 API). 여기에 플랫폼 채널 ID를 사용하지 마세요. 소스를 다시 열면 탭 ID가 바뀔 수 있으며 일치하는 탭 ID가 없는 소스는 제외될 수 있습니다. 이는 일반적인 강조 채팅 채널 필터가 아닌 도크 옵션입니다.

완전히 독립적인 방송을 제작하려면 서로 다른 세션의 별도 캡처 인스턴스/프로필을 사용하고 각 방송에 필요한 소스만 여세요. 캡처 세션은 맞추지 않고 오버레이에만 다른 세션을 지정하면 데이터가 들어오지 않습니다. 오버레이의 label 은 라우팅용 페이지 식별자이며 채널 필터가 아닙니다.

5. 각 시청자 화면 확인

1. 다음을 사용해 격리된 세션에 가상의 Twitch 테스트 메시지와 YouTube 테스트 메시지를 보내세요: 테스트 메시지 만들기.
2. 두 메시지가 모두 운영자 도크에 나타나고 각 채팅 오버레이에는 지정한 소스만 표시되는지 확인하세요.
3. 각 메시지를 강조 표시하고 지우기 버튼을 시험하세요. 플랫폼을 전환한 뒤 표시 중인 모든 강조 페이지를 확인하세요.
4. 가상 메시지로는 실제 소스 탭 ID를 확인할 수 없으므로 직접 연결한 각 소스의 실제 메시지로 반복하세요.

화면이 비어 있으면 필터를 잠시 제거하세요. 채팅이 돌아오면 정확한 소스 유형이나 탭 ID를 확인하세요. 계속 비어 있으면 다음을 사용하세요: 세션 및 라우팅 문제 해결. OBS 소스 이름을 바꿔도 저장된 URL은 업데이트되지 않습니다.

6. 하나의 브라우저 탭에 채팅과 알림 표시

사용: 오버레이 결합 로 기존 오버레이 URL을 하나의 탭 또는 OBS 브라우저 소스에 겹쳐 표시하세요. 야외 방송 중 휴대폰으로 채팅을 읽을 때 유용합니다.

1. 생성된 스트리밍 채팅 도크 URL을 아래 레이어에, 다중 스트림 알림 상자 URL을 위 레이어에 붙여 넣으세요. 두 링크의 세션, 비밀번호, 연결 옵션을 유지하세요.
2. 유지: 투명 SSN 배경 (Transparent SSN background) 선택 상태로 유지하세요. 채팅에는 '이 레이어에서 탭 및 스크롤 허용'을 켜고, 알림에는 이 옵션을 꺼서 채팅 조작을 가로막지 않게 하세요.
3. 선택: 미리보기, 그다음은 QR 코드 표시 (Show QR code) 를 선택하고 휴대폰 카메라로 스캔하세요. 또는 다음을 선택하세요: 결합 링크 복사 (Copy combined link) 로 결과를 브라우저 소스에 붙여 넣으세요. 결합 화면에는 설정 제어가 없습니다.

URL을 최대 8개 추가하고 화살표 버튼으로 레이어를 다른 레이어 앞이나 뒤로 옮길 수 있습니다. 기본적으로 레이어는 브라우저를 채웁니다. 다음을 펼치세요: 크기 및 위치 (Size and position) 를 레이어에서 펼쳐 너비, 높이, 왼쪽 위치, 위쪽 위치를 픽셀(예: 450) 또는 백분율(예: 100%)로 설정하세요. 너비와 높이를 비우면 브라우저를 채우고, 위치 값을 비우면 왼쪽 위 모서리에서 시작합니다. 전체 화면으로 초기화 (Reset to fullscreen) 를 사용하면 해당 레이어의 배치가 지워집니다. 각 오버레이는 자체 콘텐츠와 설정을 유지합니다.

1920×1080 OBS 브라우저 소스에서 왼쪽 채팅 열을 만들려면 채팅 레이어 너비를 450, 높이는 1080, 왼쪽 위치는 0, 위쪽 위치는 0으로 설정하세요. 다른 레이어는 전체 화면으로 유지해도 됩니다. 채팅 위에 Hype를 두고 강조 채팅을 오른쪽으로 옮기려면 다음을 사용하세요: 아래 OBS 배치 예제를 참고하세요. 브라우저 크기가 바뀌어도 픽셀 크기는 고정되며 백분율은 브라우저 너비나 높이에 따라 바뀝니다.

편집 가능한 링크를 사용하면 URL과 배치가 채워진 설정을 다시 열 수 있습니다. 나중에 결합 링크를 편집하려면 다음을 추가하세요: ?edit=1 를 다음 문자 앞에 넣으세요: #.

미완성 설정을 포함한 링크와 레이어 옵션은 이 브라우저에 자동 저장됩니다. 다음을 다시 열어 오버레이 결합 계속 편집하거나 다음을 선택하세요: 저장된 설정 지우기 (Clear saved setup) 로 처음부터 다시 시작하세요. 비공개 탐색에서는 브라우저 저장소를 사용할 수 없거나 임시로만 사용할 수 있습니다.

결합 링크와 QR 코드에는 전체 배치와 URL이 포함됩니다. 데스크톱에서 설정하고 모바일로 한 번 스캔한 뒤 결합 화면을 북마크하세요. 열면 휴대폰 브라우저에도 설정이 저장됩니다. 데스크톱에서 변경해도 이전 링크는 자동으로 업데이트되지 않습니다. 수정 후 새 링크를 복사하거나 스캔하세요. 이 기능은 세션 ID를 통해 설정을 동기화하지 않습니다.

결합 링크와 QR 코드도 개별 오버레이 링크처럼 비공개로 유지하세요. SSN 캡처가 계속 실행 중이어야 하고 휴대폰에서 원래 URL이 사용하는 서버에 접근할 수 있어야 합니다. localhost 또는 127.0.0.1 주소는 링크를 여는 장치를 가리킵니다. URL이 매우 길면 QR 용량을 초과할 수 있지만 결합 링크는 복사할 수 있습니다.

OBS 예제: 왼쪽 채팅 열과 전체 화면 효과

이 배치에는 CSS가 필요하지 않습니다. 각 레이어는 별도의 브라우저 영역입니다. 전체 OBS 브라우저 소스를 1920×1080으로 설정한 뒤 각 레이어의 다음 항목에서 이 값을 사용하세요: 크기 및 위치 (Size and position)에 입력하세요. 쉼표나 'px' 없이 숫자만 입력하세요. 아래에서 위 순서로 다음 레이어를 추가하세요:

위쪽 80픽셀은 Hype용이며 그 아래에 너비 450픽셀의 채팅 열이 남습니다. 대신 채팅이 Hype 뒤에서 전체 높이를 차지하게 하려면 실시간 채팅의 높이를 1080 , 위쪽 위치는 0으로 설정하세요. 장면 크기가 다르면 픽셀 값도 달라져야 합니다.

1. 전체 오버레이 URL을 붙여 넣으세요. 기존 브라우저 소스 속성에서 복사하여 세션, 비밀번호, 스타일, 연결 설정을 유지하세요. 다음 옵션을 투명 SSN 배경 (Transparent SSN background) 선택 상태로 유지하세요. OBS 자르기, 변환, 필터, 사용자 지정 CSS 입력란은 URL에 포함되지 않으므로 옮겨지지 않습니다.
2. 열 안에서 Hype를 가운데 정렬하세요. 해당 hype.html URL에 설정할 값: align=center (기존 값인 align=left 또는 align=right를 바꾸고 다음을 제거하세요: alignright 가 있다면 제거하세요). URL에 이미 ?session=...가 있으면 다음을 덧붙이세요: &align=center를 추가하세요. 간결한 시작 스타일로는 다음을 선택할 수 있습니다: &combineall&hidetitle&style=compact&scale=0.75입니다. 값을 중복해서 넣지 말고 기존 값을 바꾸세요. 선택한 스타일에 공간이 더 필요하면 Hype 레이어의 높이를 늘리세요.
3. 강조 채팅이 채팅 열을 가리지 않게 하세요. 설정: Left = 450과 Width = 1470을 함께 설정: 450 + 1470 = 1920입니다. 너비가 1920인 레이어를 오른쪽으로 450만큼 옮기면 오른쪽 끝이 잘립니다. 강조 채팅은 여전히 자체 영역의 아래쪽에 메시지를 배치합니다. 해당 영역 안에서 짧은 메시지를 가운데 정렬하려면 다음을 추가하세요: &center 를 해당 featured.html URL에 추가하세요. 대신 장면 전체에서 메시지를 가운데 정렬하려면 Left = 0, Width = 1920과 다음을 사용하세요: &center.
4. NinjaBacker를 강조 채팅 위에 두세요. 기존 오른쪽 진입 애니메이션 설정을 유지한 시청자 오버레이 URL을 마지막 레이어로 붙여 넣으세요. 결합 도구는 영역과 레이어 순서를 제어하고 NinjaBacker 오버레이는 애니메이션과 내부 배치를 제어합니다. 배경이 투명해야 하며 사이트에서 임베드를 허용해야 합니다. 이 선택적 레이어는 네 오버레이 예제 테스트에 포함되지 않았습니다.
5. 1920×1080으로 미리 보세요. 이모지가 포함된 테스트 채팅 메시지를 보내고 도크에서 메시지를 강조 표시한 뒤 SSN에서 Hype 데이터를 활성화하세요. 일반 채팅만으로 강조 채팅 메시지가 선택되지는 않습니다. 계속 비어 있으면 각 오버레이가 개별적으로 작동하는지 확인하세요.
6. 새 결합 링크를 OBS에 복사하세요. 해당 브라우저 소스 자체의 Width를 1920, Height를 1080으로 설정하세요. 결합 도구의 미리 보기 크기는 OBS 크기를 설정하지 않습니다. 새 소스를 자르지 않고 장면에 맞추세요. 배치를 수정할 때마다 새 결합 링크를 다시 복사하세요. 이전 OBS 링크는 이전 배치를 유지합니다.

성능: 브라우저 소스가 하나여도 내부의 각 오버레이와 연결은 모두 실행됩니다. 결합하면 OBS 소스 수는 줄지만 CPU나 메모리 사용량 감소가 보장되지는 않습니다. 작업을 마치면 브라우저 미리 보기를 닫고 이전 소스를 비활성화한 상태에서 OBS 성능을 비교하세요. M1 macOS/OBS 성능과 특정 NinjaBacker URL은 사용 환경에서 별도로 확인해야 합니다. 더 적합하다면 실시간 채팅은 분리하고 다른 오버레이만 결합할 수 있습니다.

레이어가 비어 있거나 채팅을 가리는 경우

• 먼저 각 원본 URL을 따로 여세요. 알림은 보통 이벤트가 올 때까지 비어 있습니다. 페이지를 결합해도 새 이벤트가 캡처되지는 않습니다.
• 자동 투명 배경이 지원하는 페이지: dock.html, featured.html, multi-alerts.html, 그리고 minecraft.html를 지원합니다. 다른 페이지에는 자체 투명 배경 설정이 필요합니다. 일부 외부 사이트는 임베드를 완전히 차단합니다.
• 투명한 레이어도 탭을 가로막을 수 있습니다. 다음 옵션을 끄세요: 탭 및 스크롤 허용 (Allow taps and scrolling) 를 상호작용이 필요 없는 채팅 위쪽 레이어에서 끄세요.
• 모바일 브라우저에서는 소리를 재생하기 전에 페이지 조작이 필요할 수 있습니다. 필요하면 해당 레이어의 상호작용을 활성화하고 탭하세요. 브라우저 자동 재생 제한은 여전히 적용됩니다. 실제 휴대폰에서 오디오를 확인한 뒤 사용하세요.