Медіафайли для Event Flow

Використовуйте власні звуки, зображення, GIF і відео в OBS.

Коротка відповідь

Настільний застосунок Social Stream може відтворювати схвалені локальні файли без завантаження в мережу. Використовуйте Вибрати локальний файл (Choose Local File) в Event Flow, потім скопіюйте згенерований Локальний URL Flow Actions в OBS.

Розширення Chrome не може самостійно надавати файли з вашого диска. Користувачам розширення слід і далі використовувати Upload або URL розміщених медіа, якщо вони також не запускають підтримувану допоміжну настільну програму.

Виберіть найкращий шлях

Найшвидше Вбудоване завантаження

Найкраще для невеликої бібліотеки й мінімального налаштування.

Великі або спільні бібліотеки Хмарне сховище об’єктів

Найкраще для великої кількості медіа, резервних копій і використання з кількох комп’ютерів.

1Потоки подій

Нагорода або повідомлення запускає дію.

2Flow Actions

actions.html отримує дію.

3URL медіа (Media URL)

OBS завантажує звук, зображення, GIF або відео.

Варіант 1: вбудоване завантаження

  1. В Event Flow виберіть Відтворити аудіокліп (Play Audio Clip) або Показати медіаоверлей (Display Media Overlay).
  2. Натисніть Завантажити (Upload), виберіть файл і завершіть завантаження на сторінці, що відкриється.
  3. Переконайтеся, що повернена https://fileuploads.socialstream.ninja/media/... URL з’являється в дії.
  4. Збережіть потік і тримайте actions.html?session=YOUR_SESSION відкритим в OBS.

Якщо сайт завантаження показує ліміт облікового запису 1 ГБ, а ваша бібліотека його перевищить, використовуйте наведений нижче варіант із локальною папкою або хмарним сховищем.

Властивості Display Media Overlay в Event Flow з полем Media URL і кнопкою Upload
Кнопка Upload створює URL розміщеного файлу. Це не засіб вибору локального файлу для відтворення Event Flow.

Варіант 2: зберігання бібліотеки на комп’ютері з OBS

Окремий настільний застосунок містить Local Media Library і сервер зворотної петлі, який прослуховує лише цей комп’ютер. Event Flow зберігає стабільний ID медіа, а не шлях до файлу на диску в потоці.

  1. Запустіть окремий застосунок Social Stream і відкрийте Event Flow.
  2. Виберіть Відтворити аудіокліп (Play Audio Clip) або Показати медіаоверлей (Display Media Overlay).
  3. Натисніть Вибрати локальний файл (Choose Local File) і виберіть аудіофайл, зображення, GIF або відео.
  4. Переконайтеся, що дія показує доступність файлу, а локальний сервер працює.
  5. Натисніть Скопіювати локальний URL Flow Actions для OBS (Copy Local Flow Actions URL for OBS).
  6. Вставте цей URL у браузерне джерело OBS, збережіть потік і перевірте дію.
  • Використовуйте Попередній перегляд , щоб перевірити вибраний файл.
  • Якщо файл переміщено чи перейменовано, Event Flow показує його як відсутній. Натисніть Повторно прив’язати (Relink) і виберіть нове розташування; наявні потоки продовжать працювати.
  • Використовуйте Показати в папці (Reveal in Folder) , коли потрібно знайти початковий файл.
  • Залишайте SSApp запущеним, поки OBS використовує локальний URL Flow Actions.
  • Не діліться згенерованим URL. Він містить приватний випадковий ключ доступу для захисту локального сервера.

Використовуйте згенерований локальний URL Flow Actions. Розміщена https://socialstream.ninja/actions.html сторінка не може визначити ID медіа настільної бібліотеки.

Резервний варіант для досвідчених: запустіть власний локальний сервер

Наведене нижче ручне налаштування залишається доступним, якщо ви не використовуєте керовану Local Media Library 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 або Command Prompt і виконайте цю команду. Залишайте вікно відкритим під час стріму.

Команда 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"

URL Flow Actions для браузерного джерела OBS

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

URL медіа для вставлення в Event Flow

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
Браузерне джерело OBS
127.0.0.1:8765/actions.html
Локальні медіа
127.0.0.1:8765/user-media/...

Налаштування --bind 127.0.0.1 обмежує доступ до сервера цим комп’ютером. Цей простий сервер призначений для локального використання під час трансляцій, а не для публічного хостингу в Інтернеті.

file://: працює, але менш надійно

Якщо ви не хочете запускати локальний сервер, спрямуйте OBS на локальну сторінку Flow Actions і також використовуйте локальні URL медіа:

file:///C:/SSN/social_stream/actions.html?session=YOUR_SESSION_ID
file:///C:/SSN/social_stream/user-media/audio/booty.mp3
  • Використовуйте прямі слеші й уникайте пробілів або спеціальних символів у назвах папок і файлів.
  • І сторінка Flow Actions, і медіа мають бути локальними. Розміщена actions.html сторінка не може прочитати цей шлях.
  • Якщо OBS відхиляє локальний файл, використовуйте наведений вище спосіб із локальним HTTP-сервером.

А як щодо розширення Chrome?

Розширення використовує той самий формат Event Flow, тому потоки, створені в настільному застосунку, залишаються сумісними. Локальні дії зберігають непрозорий ID медіа замість шляху Windows, macOS або Linux.

Розширення не може самостійно надати OBS довільні файли з вашого диска. Без підтримуваного допоміжного мосту використовуйте Завантажити (Upload) або звичайний розміщений URL. Якщо імпортований потік посилається на локальні медіа, розширення пояснює, що потрібен настільний застосунок або міст, замість мовчазного збою.

Варіант 3: розміщення великої бібліотеки онлайн

ПостачальникПідходить дляВажливі примітки
Cloudflare R2 Найкращий універсальний вибір для публічної бібліотеки сповіщень. Стандартне сховище наразі включає 10 ГБ-місяців на місяць і безкоштовний вихідний трафік в Інтернет. Для робочого використання застосовуйте власний домен; r2.dev має обмеження частоти запитів і призначений для розробки.
Backblaze B2 Недороге сховище, сумісне з S3, із публічними URL файлів. Перші 10 ГБ наразі безкоштовні; за сховище й вихідний трафік понад включені обсяги стягується плата.
Amazon S3 або інший хостинг, сумісний з S3 Наявні хмарні облікові записи й розширене керування доступом. Увімкніть публічне читання медіа, установіть правильні типи вмісту та додайте правило CORS лише для читання, якщо цього потребують браузерні запити.
GitHub Кілька невеликих публічних файлів або епізодичні завантаження випусків. Звичайні репозиторії блокують файли понад 100 МіБ, а сайти GitHub Pages мають ліміт опублікованого сайту 1 ГБ. Випуски дозволяють більші ресурси, але незручні як керована медіабібліотека сповіщень.

Публічне означає публічне. Будь-хто з URL об’єкта може отримати доступ до медіа. Не завантажуйте приватні, ліцензовані чи особисті файли, якими не слід ділитися.

Налаштування Cloudflare R2

  1. Створіть кошик R2 із Standard класом зберігання.
  2. Завантажуйте медіа в папки зі зрозумілими назвами, наприклад audio/, images/, і video/.
  3. У Settings кошика ввімкніть публічний доступ. Використовуйте публічний URL для розробки лише для перевірки або підключіть власний домен для звичайних прямих ефірів.
  4. Відкрийте URL об’єкта в приватному вікні/інкогніто браузера. Він має завантажувати файл безпосередньо, без входу чи сторінки спільного доступу.
  5. Вставте цей прямий HTTPS URL у дію Event Flow.

Звичайні зображення й аудіо зазвичай завантажуються без спеціальних налаштувань 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, CORS R2, і Ціни R2.

Приклад CORS для Backblaze B2

Зробіть кошик публічним, використовуйте прямий 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. Використовуйте Зображення для медіа PNG, JPG, WebP або GIF. Використовуйте Відео/вбудовування (Video/Embed) для URL відео або вбудовування.
  3. Для сумісності віддавайте перевагу MP3 для аудіо, PNG/WebP/GIF для зображень і MP4 із H.264/AAC для відео.
  4. Відкрийте сторінку Flow Actions в OBS із тим самим ID сесії, який використовує Event Flow.
  5. Використовуйте тестову панель Event Flow, а потім один раз оновіть браузерне джерело OBS перед справжнім стрімом.
  • URL завантажує файл замість відтворення: хост надсилає неправильний тип вмісту або відповідь лише для завантаження.
  • Хмарний файл заблоковано: зробіть його публічним і перевірте джерело походження, метод і заголовки CORS.
  • Локальний файл відсутній: відкрийте дію в SSApp і використовуйте Повторно прив’язати (Relink).
  • Локальний сервер вимкнено: запустіть SSApp і знову скопіюйте локальний URL Flow Actions, якщо порт або токен безпеки змінився.
  • Розміщена Flow Actions не може відтворити локальний елемент: замініть URL OBS на згенерований SSApp.
  • До OBS нічого не надходить: переконайтеся, що URL Flow Actions та Event Flow використовують однаковий ID сесії.