이벤트 흐름용 미디어 파일

가장 적합한 방식 선택

옵션 1: 내장 업로드 사용

1. 이벤트 흐름에서 다음을 선택하세요: 오디오 클립 재생 (Play Audio Clip) 또는 미디어 오버레이 표시 (Display Media Overlay).
2. 클릭: 업로드 (Upload)를 클릭하고 파일을 선택한 뒤 열리는 페이지에서 업로드를 완료하세요.
3. 반환된 https://fileuploads.socialstream.ninja/media/... URL이 동작에 표시되는지 확인하세요.
4. 흐름을 저장하고 다음을 actions.html?session=YOUR_SESSION 를 OBS에서 열어 두세요.

업로드 사이트에 계정 용량이 1 GB로 표시되고 라이브러리가 이를 초과할 예정이라면 아래의 로컬 폴더 또는 클라우드 스토리지 옵션을 사용하세요.

옵션 2: OBS 컴퓨터에 라이브러리 보관

독립 실행형 데스크톱 앱에는 로컬 미디어 라이브러리와 이 컴퓨터에서만 수신하는 루프백 서버가 포함되어 있습니다. 이벤트 흐름은 디스크 경로를 흐름에 넣는 대신 안정적인 미디어 ID를 저장합니다.

1. Social Stream 독립 실행형 앱을 시작하고 이벤트 흐름을 여세요.
2. 선택: 오디오 클립 재생 (Play Audio Clip) 또는 미디어 오버레이 표시 (Display Media Overlay).
3. 클릭: 로컬 파일 선택 (Choose Local File) 을 클릭하고 오디오, 이미지, GIF 또는 동영상 파일을 선택하세요.
4. 동작에 파일을 사용할 수 있다고 표시되고 로컬 서버가 실행 중인지 확인하세요.
5. 클릭: OBS용 로컬 흐름 동작 URL 복사 (Copy Local Flow Actions URL for OBS).
6. 해당 URL을 OBS 브라우저 소스에 붙여 넣고 흐름을 저장한 뒤 동작을 시험하세요.

• 사용: 미리보기 로 선택한 파일을 확인하세요.
• 파일을 이동하거나 이름을 바꾸면 이벤트 흐름에 누락된 것으로 표시됩니다. 다음을 클릭하세요: 다시 연결 (Relink) 를 클릭하고 새 위치를 선택하세요. 기존 흐름은 계속 작동합니다.
• 사용: 폴더에서 보기 (Reveal in Folder) 로 원본 파일의 위치를 찾으세요.
• OBS가 로컬 흐름 동작 URL을 사용하는 동안 SSApp을 실행 상태로 유지하세요.
• 생성된 URL을 공유하지 마세요. 로컬 서버를 보호하는 비공개 임의 접근 권한 값이 포함되어 있습니다.

고급 대안: 직접 로컬 서버 실행

SSApp이 관리하는 로컬 미디어 라이브러리를 사용하지 않는다면 다음 수동 설정을 이용할 수 있습니다.

다음을 다운로드하고 압축을 푸세요: Social Stream Ninja 소스 폴더를 다운로드하고 압축을 푼 다음 user-media 폴더를 그 안에 만드세요.

C:\SSN\social_stream\
  actions.html
  user-media\
    audio\booty.mp3
    images\reward.png
    video\celebration.mp4

수동 로컬 HTTP 서버 시작

1. Python이 설치되어 있지 않다면 설치하세요.
2. PowerShell 또는 명령 프롬프트를 열고 이 명령을 실행하세요. 방송 중에는 창을 열어 두세요.

Windows 명령

py -m http.server 8765 --bind 127.0.0.1 --directory "C:\SSN\social_stream"

macOS 또는 Linux 명령

python3 -m http.server 8765 --bind 127.0.0.1 --directory "/path/to/social_stream"

OBS 브라우저 소스용 흐름 동작 URL

http://127.0.0.1:8765/actions.html?session=YOUR_SESSION_ID

이벤트 흐름에 붙여 넣을 미디어 URL

http://127.0.0.1:8765/user-media/audio/booty.mp3
http://127.0.0.1:8765/user-media/images/reward.png
http://127.0.0.1:8765/user-media/video/celebration.mp4

설정: --bind 127.0.0.1 을 사용하면 이 컴퓨터 안에서만 서버에 접속할 수 있습니다. 이 간단한 서버는 로컬 방송용이며 인터넷 공개 호스팅용이 아닙니다.

file://: 작동하지만 더 불안정함

로컬 서버를 실행하고 싶지 않다면 OBS가 로컬 흐름 동작 페이지를 사용하도록 하고 미디어 URL도 로컬로 지정하세요:

file:///C:/SSN/social_stream/actions.html?session=YOUR_SESSION_ID
file:///C:/SSN/social_stream/user-media/audio/booty.mp3

• 슬래시(/)를 사용하고 폴더와 파일 이름에 공백이나 특수문자를 넣지 마세요.
• 흐름 동작 페이지와 미디어가 모두 로컬에 있어야 합니다. 호스팅된 actions.html 페이지는 해당 경로를 읽을 수 없습니다.
• OBS가 로컬 파일을 거부하면 위의 로컬 HTTP 서버 방식을 사용하세요.

Chrome 확장 프로그램에서는?

확장 프로그램은 같은 이벤트 흐름 형식을 사용하므로 데스크톱에서 만든 흐름도 호환됩니다. 로컬 동작은 Windows, macOS 또는 Linux 경로 대신 불투명한 미디어 ID를 저장합니다.

확장 프로그램만으로는 디스크의 임의 파일을 OBS에 제공할 수 없습니다. 지원되는 연동 브리지가 없다면 다음을 사용하세요: 업로드 (Upload) 또는 일반 호스팅 URL을 사용하세요. 가져온 흐름이 로컬 미디어를 참조하면 확장 프로그램이 조용히 실패하는 대신 데스크톱 앱이나 브리지가 필요하다고 설명합니다.

옵션 3: 더 큰 라이브러리를 온라인으로 호스팅

제공업체	적합한 용도	주요 참고 사항
Cloudflare R2	공개 알림 라이브러리에 가장 무난한 선택입니다.	현재 Standard 스토리지에는 월 10 GB-month와 무료 인터넷 송신 트래픽이 포함됩니다. 실제 운영에는 사용자 지정 도메인을 사용하세요. r2.dev 는 요청 횟수가 제한되며 개발 용도입니다.
Backblaze B2	공개 파일 URL을 제공하는 저렴한 S3 호환 스토리지.	현재 최초 10 GB는 무료이며, 포함된 한도를 초과한 스토리지와 송신 트래픽에는 비용이 부과됩니다.
Amazon S3 또는 다른 S3 호환 호스트	기존 클라우드 계정 및 고급 접근 제어.	미디어의 공개 읽기를 활성화하고 올바른 콘텐츠 유형을 설정한 뒤 브라우저 요청에 필요하면 읽기 전용 CORS 규칙을 추가하세요.
GitHub	소수의 작은 공개 파일 또는 가끔 배포하는 릴리스 다운로드.	일반 저장소는 100 MiB가 넘는 파일을 차단하며 GitHub Pages 사이트는 게시된 사이트 크기가 1 GB로 제한됩니다. 릴리스는 더 큰 파일을 허용하지만 관리형 알림 미디어 라이브러리로 쓰기에는 불편합니다.

Cloudflare R2 설정

1. R2 버킷을 만들 때 표준 (Standard) 스토리지 클래스를 사용하세요.
2. 미디어를 업로드할 때 다음처럼 명확한 폴더 이름을 사용하세요: audio/, images/, 그리고 video/.
3. 버킷 설정에서 공개 접근을 활성화하세요. 공개 개발 URL은 테스트에만 사용하고 정기적인 라이브 사용에는 사용자 지정 도메인을 연결하세요.
4. 비공개/시크릿 브라우저 창에서 객체 URL을 여세요. 로그인이나 공유 페이지 없이 파일이 직접 로드되어야 합니다.
5. 직접 HTTPS URL을 이벤트 흐름 동작에 붙여 넣으세요.

일반 이미지와 오디오는 보통 사용자 지정 CORS 설정 없이 로드됩니다. 사용자 지정 오버레이, 글꼴, 동영상 플레이어 또는 브라우저 fetch에 CORS 오류가 표시되면 다음을 여세요: Bucket → Settings → CORS Policy 를 열고 읽기 전용 정책을 추가하세요:

[
  {
    "AllowedOrigins": [
      "https://socialstream.ninja",
      "http://127.0.0.1:8765"
    ],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["Range"],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Range",
      "Accept-Ranges"
    ],
    "MaxAgeSeconds": 3600
  }
]

파일을 가져오는 다른 페이지의 정확한 출처도 추가하세요. 출처에는 경로나 끝의 슬래시가 포함되지 않습니다. CORS를 추가하기 전에 사용자 지정 도메인이 이미 캐시되었다면 해당 호스트 이름의 캐시를 지우세요.

공식 참고 자료: 공개 R2 버킷, R2 CORS, 그리고 R2 요금.

Backblaze B2 CORS 예제

버킷을 공개로 설정하고 직접 파일 URL을 사용하세요. 브라우저에 CORS 오류가 표시되면 다운로드 전용 규칙을 적용하세요:

[
  {
    "corsRuleName": "allowSSNMedia",
    "allowedOrigins": ["https://socialstream.ninja"],
    "allowedHeaders": ["range"],
    "allowedOperations": ["b2_download_file_by_name"],
    "exposeHeaders": [
      "content-length",
      "content-range",
      "accept-ranges"
    ],
    "maxAgeSeconds": 3600
  }
]

Backblaze의 다음 자료를 참고하세요: 공식 CORS 규칙 참고 문서.

방송 시작 전

1. 비공개/시크릿 창에서 정확한 미디어 URL을 여세요. 파일이 직접 로드되어야 합니다.
2. 사용: 이미지 (Image) 는 PNG, JPG, WebP 또는 GIF 미디어에 사용하세요. 다음은 동영상/임베드 (Video/Embed) 를 동영상 또는 임베드 URL에 사용하세요.
3. 호환성을 위해 오디오는 MP3, 이미지는 PNG/WebP/GIF, 동영상은 H.264/AAC MP4를 권장합니다.
4. 이벤트 흐름과 같은 세션 ID로 OBS에서 흐름 동작 페이지를 여세요.
5. 이벤트 흐름의 테스트 패널을 사용하고 실제 방송 전에 OBS 브라우저 소스를 한 번 새로고침하세요.

• URL이 재생되지 않고 다운로드됨: 호스트가 잘못된 콘텐츠 유형이나 다운로드 전용 응답을 보내고 있습니다.
• 클라우드 파일이 차단됨: 공개로 설정하고 CORS 출처, 메서드, 헤더를 확인하세요.
• 로컬 파일이 누락됨: SSApp에서 동작을 열고 다음을 사용하세요: 다시 연결 (Relink).
• 로컬 서버가 오프라인임: SSApp을 시작하고 포트나 보안 토큰이 바뀌었다면 로컬 흐름 동작 URL을 다시 복사하세요.
• 호스팅된 흐름 동작에서 로컬 항목을 재생하지 못함: OBS URL을 SSApp에서 생성한 URL로 교체하세요.
• OBS에 아무것도 도착하지 않음: 흐름 동작 URL과 이벤트 흐름이 같은 세션 ID를 사용하는지 확인하세요.