ไฟล์สื่อสำหรับ Event Flow

เลือกวิธีที่เหมาะที่สุด

ตัวเลือกที่ 1: ใช้การอัปโหลดในตัว

1. ใน Event Flow ให้เลือก เล่นคลิปเสียง (Play Audio Clip) หรือ แสดงโอเวอร์เลย์สื่อ (Display Media Overlay).
2. คลิก อัปโหลด (Upload) เลือกไฟล์ แล้วอัปโหลดให้เสร็จในหน้าที่เปิดขึ้น
3. ยืนยันว่า URL https://fileuploads.socialstream.ninja/media/... ที่ส่งกลับมาปรากฏในแอ็กชัน
4. บันทึกโฟลว์แล้วเปิด actions.html?session=YOUR_SESSION ไว้ใน OBS

หากเว็บไซต์อัปโหลดแสดงโควตาบัญชี 1 GB และคลังของคุณจะเกินขนาดนั้น ให้ใช้โฟลเดอร์ภายในเครื่องหรือพื้นที่จัดเก็บคลาวด์ด้านล่าง

ตัวเลือกที่ 2: เก็บคลังไว้บนคอมพิวเตอร์ OBS

แอปเดสก์ท็อปแบบสแตนด์อโลนมี Local Media Library และเซิร์ฟเวอร์ loopback ที่รับการเชื่อมต่อเฉพาะคอมพิวเตอร์นี้ Event Flow เก็บรหัสสื่อถาวรแทนการใส่เส้นทางดิสก์ลงในโฟลว์

1. เริ่มแอป Social Stream แบบสแตนด์อโลนแล้วเปิด Event Flow
2. เลือก เล่นคลิปเสียง (Play Audio Clip) หรือ แสดงโอเวอร์เลย์สื่อ (Display Media Overlay).
3. คลิก เลือกไฟล์ภายในเครื่อง (Choose Local File) แล้วเลือกไฟล์เสียง รูปภาพ GIF หรือวิดีโอ
4. ยืนยันว่าแอ็กชันระบุว่าไฟล์พร้อมใช้งานและเซิร์ฟเวอร์ภายในเครื่องทำงานอยู่
5. คลิก คัดลอก URL ของ Local Flow Actions สำหรับ OBS (Copy Local Flow Actions URL for OBS).
6. วาง URL นั้นในแหล่งข้อมูลเบราว์เซอร์ของ OBS บันทึกโฟลว์ แล้วทดสอบแอ็กชัน

• ใช้ ดูตัวอย่าง เพื่อตรวจสอบไฟล์ที่เลือก
• หากย้ายหรือเปลี่ยนชื่อไฟล์ Event Flow จะแสดงว่าไฟล์หาย ให้คลิก เชื่อมไฟล์ใหม่ (Relink) แล้วเลือกตำแหน่งใหม่ โฟลว์เดิมจะยังทำงานต่อได้
• ใช้ แสดงในโฟลเดอร์ (Reveal in Folder) เมื่อต้องการหาตำแหน่งไฟล์ต้นฉบับ
• ให้ SSApp ทำงานอยู่ขณะที่ OBS ใช้ Local Flow Actions URL
• อย่าแชร์ URL ที่สร้างขึ้น เพราะมีค่าสิทธิ์แบบสุ่มส่วนตัวที่ใช้ปกป้องเซิร์ฟเวอร์ภายในเครื่อง

ทางเลือกสำรองขั้นสูง: เรียกใช้เซิร์ฟเวอร์ภายในเครื่องเอง

ยังใช้การตั้งค่าด้วยตนเองด้านล่างได้หากไม่ได้ใช้ 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

การตั้งค่า --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 เดียวกัน โฟลว์ที่สร้างจากเดสก์ท็อปจึงยังเข้ากันได้ แอ็กชันภายในเครื่องเก็บรหัสสื่อที่ไม่เปิดเผยรายละเอียดแทนเส้นทาง Windows, macOS หรือ Linux

ส่วนขยายไม่สามารถเปิดไฟล์ใด ๆ จากดิสก์ให้ OBS เข้าถึงได้ด้วยตัวเอง หากไม่มีบริดจ์เสริมที่รองรับ ให้ใช้ อัปโหลด (Upload) หรือ URL ที่โฮสต์ไว้ตามปกติ หากโฟลว์ที่นำเข้าอ้างอิงสื่อภายในเครื่อง ส่วนขยายจะแจ้งว่าต้องใช้แอปเดสก์ท็อปหรือบริดจ์ แทนที่จะล้มเหลวโดยไม่แจ้ง

ตัวเลือกที่ 3: โฮสต์คลังขนาดใหญ่ทางออนไลน์

ผู้ให้บริการ	เหมาะสำหรับ	หมายเหตุสำคัญ
Cloudflare R2	ตัวเลือกทั่วไปที่ดีที่สุดสำหรับคลังสื่อแจ้งเตือนสาธารณะ	ปัจจุบันพื้นที่จัดเก็บ Standard รวม 10 GB-month ต่อเดือนและการส่งข้อมูลออกสู่อินเทอร์เน็ตฟรี ใช้โดเมนกำหนดเองสำหรับการใช้งานจริง ส่วน r2.dev มีการจำกัดอัตราการใช้งานและมีไว้สำหรับการพัฒนา
Backblaze B2	พื้นที่จัดเก็บราคาประหยัดที่เข้ากันได้กับ S3 และมี URL ไฟล์สาธารณะ	ปัจจุบัน 10 GB แรกฟรี หลังเกินปริมาณที่รวมให้จะมีค่าพื้นที่จัดเก็บและการส่งข้อมูลออกส่วนเกิน
Amazon S3 หรือโฮสต์อื่นที่เข้ากันได้กับ S3	บัญชีคลาวด์ที่มีอยู่และการควบคุมสิทธิ์ขั้นสูง	เปิดสิทธิ์อ่านสื่อสาธารณะ ตั้งชนิดเนื้อหาให้ถูกต้อง และเพิ่มกฎ CORS แบบอ่านอย่างเดียวหากคำขอเบราว์เซอร์ต้องใช้
GitHub	ไฟล์สาธารณะขนาดเล็กไม่กี่ไฟล์ หรือการดาวน์โหลดรุ่นเผยแพร่เป็นครั้งคราว	รีโพซิทอรีปกติบล็อกไฟล์ที่ใหญ่กว่า 100 MiB และเว็บไซต์ GitHub Pages จำกัดขนาดเว็บไซต์ที่เผยแพร่ไว้ที่ 1 GB ส่วน Releases รองรับไฟล์ใหญ่กว่า แต่ไม่สะดวกสำหรับจัดการคลังสื่อแจ้งเตือน

การตั้งค่า Cloudflare R2

1. สร้างบักเก็ต R2 โดยใช้คลาสพื้นที่จัดเก็บ Standard สำหรับพื้นที่จัดเก็บ
2. อัปโหลดสื่อโดยตั้งชื่อโฟลเดอร์ให้ชัดเจน เช่น audio/, images/, และ video/.
3. ใน Settings ของบักเก็ต ให้เปิดการเข้าถึงสาธารณะ ใช้ URL สาธารณะสำหรับพัฒนาเพื่อทดสอบเท่านั้น หรือเชื่อมโดเมนกำหนดเองสำหรับการใช้งานถ่ายทอดสดตามปกติ
4. เปิด URL ของอ็อบเจ็กต์ในหน้าต่างเบราว์เซอร์ส่วนตัว/ไม่ระบุตัวตน ควรโหลดไฟล์โดยตรงโดยไม่ต้องเข้าสู่ระบบหรือผ่านหน้าแชร์
5. วาง URL แบบ HTTPS โดยตรงนั้นลงในแอ็กชัน 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
  }
]

เพิ่ม origin ที่ตรงทุกตัวของหน้าอื่นที่ดึงไฟล์เหล่านี้ origin ไม่มีเส้นทางหรือเครื่องหมายทับปิดท้าย หากโดเมนกำหนดเองถูกแคชก่อนเพิ่ม 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 ด้วยรหัสเซสชันเดียวกับ Event Flow
5. ใช้แผงทดสอบของ Event Flow แล้วรีเฟรชแหล่งข้อมูลเบราว์เซอร์ใน OBS หนึ่งครั้งก่อนสตรีมจริง

• URL ดาวน์โหลดแทนการเล่น: โฮสต์ส่งชนิดเนื้อหาผิดหรือส่งการตอบกลับที่บังคับดาวน์โหลดเท่านั้น
• ไฟล์คลาวด์ถูกบล็อก: ตั้งไฟล์เป็นสาธารณะแล้วตรวจสอบ origin, method และ headers ของ CORS
• ไฟล์ภายในเครื่องหาย: เปิดแอ็กชันใน SSApp แล้วใช้ เชื่อมไฟล์ใหม่ (Relink).
• เซิร์ฟเวอร์ภายในเครื่องออฟไลน์: เริ่ม SSApp แล้วคัดลอก Local Flow Actions URL อีกครั้งหากพอร์ตหรือโทเค็นความปลอดภัยเปลี่ยนไป
• Flow Actions ที่โฮสต์ไว้เล่นรายการภายในเครื่องไม่ได้: แทนที่ URL ใน OBS ด้วย URL ที่ SSApp สร้างให้
• ไม่มีอะไรส่งถึง OBS: ยืนยันว่า Flow Actions URL และ Event Flow ใช้รหัสเซสชันเดียวกัน