여러 채널과 별도 오버레이

4단계로 플랫폼별 채팅 분리

예: 한 오버레이에는 Twitch 채팅만, 다른 오버레이에는 YouTube 채팅만 표시합니다. 본인은 하나의 Dock에서 모든 채팅을 읽을 수 있습니다.

모든 채팅을 Social Stream Ninja에 추가하세요. 각 채팅의 새 메시지가 다음에 표시되는지 확인하세요: 스트리밍 채팅 도크. 이 Dock은 필터 없이 유지하세요. 본인이 보는 화면입니다.
생성된 다음 링크를 복사하세요: dock.html 링크를 두 개 만드세요. 복사하면 세션, 비밀번호, 버전, 서버 설정이 유지됩니다.
복사한 각 링크 끝에 필터를 추가하세요. 예: &onlyfrom=twitch&hidemenu (다음 참조: 아래 표).
각 링크를 OBS에서 별도의 다음 소스로 추가하세요: 브라우저 소스. 알아보기 쉬운 이름을 붙이세요. 예: Twitch 채팅 그리고 YouTube 채팅.

각 오버레이를 자체 OBS 브라우저 소스에 유지합니다. — 각 오버레이마다 별도의 브라우저 소스를 사용합니다.

캡처 Twitch + YouTube
하나의 SSN 세션 Dock에는 둘 다 표시됨
OBS 화면 Twitch 전용 및 YouTube 전용

하나의 피드로 여러 필터 화면을 만들 수 있습니다.

채팅 오버레이 필터 옵션

표시하려는 내용…	Dock 링크에 추가
Twitch만	`&onlyfrom=twitch&hidemenu`
YouTube만	`&onlyfrom=youtube&hidemenu`
Twitch와 YouTube 함께	`&onlyfrom=twitch,youtube&hidemenu`
Discord를 제외한 모든 채팅	`&hidefrom=discord&hidemenu`

전체 예시:

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

사용: onlyfrom 그리고 hidefrom 를 여기서 확인하세요. 다른 오버레이의 옵션, 예를 들어 onlytype같은 옵션은 이 페이지에서 작동하지 않을 수 있습니다. YouTube Shorts는 별도 유형입니다. 추가할 값: youtubeshorts 을 캡처가 보고하는 경우. 참조: 소스 유형.

Featured Chat(선택한 메시지) 분리

생성된 다음 링크를 복사하세요: featured.html 링크를 두 개 만드세요.
추가: &onlyfrom=twitch 을 한쪽에, &onlyfrom=youtube 을 다른 쪽에 추가하세요.
메시지를 선택할 수 있도록 Dock을 열어 두세요.

Featured Chat은 링크당 플랫폼 하나를 받습니다. 쉼표로 구분한 목록(twitch,youtube)는 Dock에서만 작동합니다.

필터는 선택한 메시지를 해당 페이지가 받을지만 결정합니다. 별도의 대기열을 만들지 않으며, 거부한 메시지가 기존 화면을 지우지도 않습니다. 방송 구간을 전환할 때 이전 메시지가 남지 않도록 직접 지우세요.

같은 플랫폼의 두 채널

onlyfrom=twitch 은 특정 채널이 아니라 Twitch 전체를 뜻합니다. 채널 이름이나 방송 제목은 필터 이름으로 사용할 수 없습니다.

원하는 작업…	할 작업
각 메시지가 온 채널 표시	추가: `&showchannelname` (소스가 채널 이름을 보내는 경우 작동합니다).
완전히 독립적인 방송 두 개 운영하기	별도의 캡처 인스턴스나 프로필을 사용하고, 각각 고유 세션에서 해당 방송의 소스만 여세요.
브라우저 탭별로 Dock 필터링	`&filtertid=123` (고급 설정, 아래 참조).

다른 세션을 사용하면서 해당 캡처가 없는 오버레이는 비어 있게 됩니다. 오버레이의 label 은 라우팅에 쓰는 페이지 이름이며 채널 필터가 아닙니다.

방법 filtertid 작동 방식

메시지가 온 브라우저 탭의 숫자 ID를 사용합니다. 여러 ID는 쉼표로 구분하세요.
다음을 찾으세요: tid 을 실제 캡처 페이로드에서 확인하세요. 참조: 이벤트 참고 문서 그리고 명령 및 API.
플랫폼의 채널 ID가 아닙니다.
소스를 다시 열면 탭 ID가 바뀔 수 있습니다. 일치하는 탭 ID가 없는 소스는 숨겨질 수 있습니다.
Dock에서만 작동하며 Featured Chat 채널 필터로는 사용할 수 없습니다.

각 화면 테스트

테스트 세션에 가짜 Twitch 메시지와 YouTube 메시지를 보내세요. 사용할 도구: 테스트 메시지 만들기.
두 플랫폼 모두 Dock에 나오고, 각 채팅 오버레이에는 해당 플랫폼만 나오는지 확인하세요.
각 메시지를 선택해 표시한 뒤 지우기를 누르세요. 플랫폼을 바꾼 후 모든 Featured Chat 페이지를 확인하세요.
각 소스의 실제 메시지로도 반복하세요. 가짜 메시지에는 실제 탭 ID가 없습니다.

문제	시도할 방법
화면이 비어 있음	잠시 필터를 제거하세요. 채팅이 다시 나타나면 정확한 소스 유형이나 탭 ID를 확인하세요.
필터를 없애도 비어 있음	참고: 세션 및 라우팅 문제 해결.
OBS 소스 이름을 바꿔도 변화가 없음	이름을 바꿔도 저장된 링크는 바뀌지 않습니다. URL 자체를 편집하세요.

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

오버레이 결합 은 오버레이 링크를 하나의 탭 또는 OBS 브라우저 소스에 겹쳐 표시합니다. 야외 방송 중 휴대폰으로 채팅을 읽기에 편리합니다.

다음을 붙여 넣으세요: 스트리밍 채팅 도크 링크를 맨 아래 레이어에 붙여 넣으세요.
다음을 붙여 넣으세요: 멀티 스트림 알림 상자 링크를 맨 위 레이어에 붙여 넣으세요. 세션, 비밀번호, 연결 옵션을 포함한 전체 링크를 유지하세요.
유지: 투명 SSN 배경 (Transparent SSN background) 가 선택되어 있는지 확인하세요.
켜기: 이 레이어에서 터치와 스크롤 허용 을 채팅에 사용하세요. 알림에서는 꺼서 채팅 조작을 막지 않게 하세요.
프레스 미리보기, 그다음은 QR 코드 표시 (Show QR code) 을 휴대폰으로 스캔하세요. 또는 다음을 누르세요: 결합 링크 복사 (Copy combined link) 을 눌러 브라우저 소스에 붙여 넣으세요.

결합 화면에는 설정 컨트롤이 없습니다. 오버레이만 표시합니다.

레이어 옵션

원하는 작업…	할 작업
오버레이 더 추가하기	링크 최대 8개.
레이어를 앞이나 뒤로 이동하기	화살표 버튼을 사용하세요.
레이어 크기 또는 위치 변경	열기 크기 및 위치 (Size and position). 너비, 높이, 왼쪽 및 위쪽 위치를 픽셀(`450`) 또는 백분율(`100%`).
레이어를 다시 전체 화면으로 만들기	전체 화면으로 초기화 (Reset to fullscreen). 너비와 높이를 비우면 브라우저를 채우며, 왼쪽과 위쪽 위치를 비우면 왼쪽 위에서 시작합니다.
왼쪽 채팅 열 만들기(1920×1080)	채팅 레이어: 너비 `450`, 높이 `1080`, 왼쪽 위치 `0`, 위쪽 위치 `0`. 다른 레이어는 전체 화면을 유지합니다.
결합 링크를 나중에 편집하기	편집용 링크를 사용하거나 다음을 추가하세요: `?edit=1` 을 다음 앞에: `#`.
처음부터 다시 시작	저장된 설정 지우기 (Clear saved setup).

픽셀 크기는 브라우저 크기가 바뀌어도 고정됩니다. 백분율은 브라우저 크기를 따릅니다. 각 오버레이는 자체 콘텐츠와 설정을 유지합니다.

저장, 휴대폰, 개인정보 보호

미완성 상태라도 링크와 레이어 옵션은 이 브라우저에 자동 저장됩니다. 비공개 브라우징에서는 유지되지 않을 수 있습니다.
결합 링크와 QR 코드에 전체 레이아웃이 담깁니다. 데스크톱에서 설정한 뒤 한 번 스캔하고 휴대폰에 북마크하세요. 열면 휴대폰 브라우저에도 설정이 저장됩니다.
데스크톱에서 수정해도 이전 링크는 갱신되지 않습니다. 수정 후 새 링크를 복사하거나 QR 코드를 스캔하세요. 세션 ID를 통한 동기화는 없습니다.
결합 링크와 QR 코드는 오버레이 링크처럼 비공개로 보관하세요.
SSN 캡처가 계속 실행 중이어야 하며, 휴대폰에서 원본 링크와 같은 서버에 연결할 수 있어야 합니다. localhost 또는 127.0.0.1 은 휴대폰 자체를 뜻합니다.
매우 긴 링크는 QR 코드에 담기지 않을 수 있습니다. 그래도 링크 복사는 가능합니다.

OBS 설정 예시: 왼쪽 채팅 열과 전체 화면 효과

CSS가 필요 없습니다. 각 레이어는 자체 영역을 가집니다. OBS 브라우저 소스를 다음 크기로 설정하세요: 1920×1080. 아래에 놓을 레이어부터 추가하고 각 레이어의 다음 항목에 숫자만 입력하세요(쉼표나 'px' 제외): 크기 및 위치 (Size and position).

레이어	너비	높이	왼쪽	위쪽
1. 실시간 채팅 / 도크	450	1000	0	80
2. Hype 카운터	450	80	0	0
3. 이모지 / 이모트 월	1920	1080	0	0
4. 강조 채팅	1470	1080	450	0
5. NinjaBacker (선택 사항)	1920	1080	0	0

위쪽 80픽셀에는 Hype가, 그 아래에는 채팅 열이 들어갑니다. Hype 뒤에 채팅을 전체 높이로 표시하려면 Live Chat 높이를 다음으로 설정하세요: 1080 , 위쪽 위치는 0. 장면 크기가 다르면 수치를 조정해야 합니다.

전체 오버레이 링크를 붙여 넣으세요. 기존 브라우저 소스에서 복사하면 세션, 비밀번호, 스타일, 연결 설정이 함께 복사됩니다. 다음은 활성화 상태로 유지하세요: 투명 SSN 배경 (Transparent SSN background) 을 선택한 상태로 두세요. OBS 자르기, 변환, 필터, 사용자 지정 CSS는 링크에 포함되지 않으며 이전되지 않습니다.
Hype를 열 가운데에 배치하세요. 다음 화면에서: hype.html 링크에서는 다음을 사용하세요: &align=center. 다음 값을 모두 바꾸세요: align=left 또는 align=right를 바꾸고 다음을 제거하세요: alignright. 간결한 표시를 원하면 다음을 사용해 보세요: &combineall&hidetitle&style=compact&scale=0.75 (기존 값을 바꿉니다). 스타일에 공간이 더 필요하면 Hype 레이어 높이를 늘리세요.
Featured Chat을 채팅 열 옆에 배치하세요. 설정: 왼쪽 위치 = 450 그리고 너비 = 1470 을 함께 설정하세요(450 + 1470 = 1920). 너비 1920인 레이어를 오른쪽으로 옮기면 가장자리가 잘립니다. 추가할 값: &center 대상: featured.html 을 사용하면 해당 영역의 짧은 메시지를 가운데 정렬합니다. 장면 전체의 가운데에 놓으려면 왼쪽 0, 너비 1920으로 설정하고 다음을 사용하세요: &center.
NinjaBacker를 마지막에 배치하세요(선택 사항). 시청자용 오버레이 링크를 맨 위 레이어에 붙여 넣고 오른쪽에서 들어오는 애니메이션을 설정하세요. 결합 도구는 영역과 순서를, NinjaBacker는 자체 애니메이션을 제어합니다. 배경이 투명해야 하며 사이트에서 삽입을 허용해야 합니다. 이 레이어는 검증한 예시에 포함되지 않았습니다.
1920×1080으로 미리 보세요. 이모지가 포함된 채팅을 보내고, Dock에서 메시지를 선택해 표시하고, SSN의 Hype 데이터를 켜세요. 일반 채팅은 표시할 메시지를 자동으로 선택하지 않습니다.
새 결합 링크를 OBS에 복사하세요. 해당 브라우저 소스를 너비 1920, 높이 1080으로 설정하세요. 미리 보기 크기가 이 값을 설정하지는 않습니다. 자르지 말고 장면에 맞추세요. 레이아웃을 바꿀 때마다 링크를 다시 복사하세요. 이전 링크에는 이전 레이아웃이 남습니다.

검증한 결합 출력: 좁은 왼쪽 채팅 열 위 중앙의 Hype, 장면 전체의 이모지, 채팅 오른쪽 하단의 강조 메시지. — SSN 오버레이 네 개와 테스트 피드를 사용한 실제 Chromium 실행 예시입니다. 이미지는 투명하며, 읽기 쉽도록 여기에 어두운 배경을 넣었습니다. 클릭하면 원본 크기로 볼 수 있습니다. 글꼴과 색상은 각 오버레이 설정을 따릅니다.

성능: 브라우저 소스가 하나여도 내부의 모든 오버레이는 각각 실행됩니다. OBS 소스 수가 줄어도 CPU나 메모리 사용량이 줄어든다는 보장은 없습니다. 작업이 끝나면 브라우저 미리 보기를 닫고 기존 소스를 끈 상태에서 OBS를 비교하세요. M1 Mac 성능과 사용자 본인의 NinjaBacker 링크는 검증되지 않았습니다. Live Chat은 별도로 두고 나머지만 결합해도 됩니다.

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

문제	시도할 방법
레이어가 비어 있음	먼저 원본 링크를 단독으로 열어 보세요. 알림은 이벤트가 오기 전까지 비어 있습니다. 결합해도 새로운 캡처가 시작되지는 않습니다.
레이어 배경이 불투명함	자동 투명 배경이 적용되는 페이지: `dock.html`, `featured.html`, `multi-alerts.html`, 그리고 `minecraft.html`. 다른 페이지는 자체 투명 배경 설정이 필요합니다. 일부 외부 사이트는 삽입을 차단합니다.
채팅을 터치하거나 스크롤할 수 없음	투명한 레이어도 터치를 막을 수 있습니다. 다음을 끄세요: 탭 및 스크롤 허용 (Allow taps and scrolling) 을 채팅 위에 있으면서 조작이 필요 없는 레이어에서 끄세요.
휴대폰에서 소리가 안 남	휴대폰은 소리를 재생하기 전에 터치가 필요할 수 있습니다. 해당 레이어의 터치를 허용하고 화면을 누르세요. 실제 사용 전에 휴대폰에서 테스트하세요.

여러 채널 및 별도 오버레이