ออกแบบโอเวอร์เลย์โซเชียลสตรีมของคุณเอง

สร้างโอเวอร์เลย์ของคุณใน 5 ขั้นตอน

1. เลือกโอเวอร์เลย์ที่ใช้ ที่คุณต้องการแก้
2. ดาวน์โหลด ZIP ต้นทาง แตกไฟล์ แล้วคัดลอก HTML ของโอเวอร์เลย์นั้น
3. แก้สำเนา เอง หรือขอเครื่องมือ AI ช่วย
4. เปิดสำเนาใน OBS โดยเพิ่มการตั้งค่าเซสชัน SSN ในที่อยู่
5. ทดสอบ ด้วยตัวกระตุ้นจริงของโอเวอร์เลย์

เลือกโอเวอร์เลย์ที่จะแก้

คุณเปลี่ยนสี ฟอนต์ การจัดวาง งานศิลป์ และการเคลื่อนไหวของโอเวอร์เลย์ได้ ไฟล์ HTML คือหน้า ส่วน URL ของ OBS ชี้ไปยังหน้านั้นและเพิ่มเซสชันกับการตั้งค่าแสดงผล

โอเวอร์เลย์แต่ละชนิดรับข้อมูลต่างกัน หน้าแชต หน้าข้อความเด่น และโพลไม่ใช้ข้อมูลเข้าชุดเดียวกัน เปิดคู่มือออกแบบของชนิดที่ใช้:

ต้องการแบบสำเร็จรูป? ลอง แกลเลอรีโอเวอร์เลย์ หรือ แกลเลอรีเทมเพลต จะนำสกินแชตจาก StreamElements หรือ Streamlabs มาใช้? ทำตาม คู่มือการนำเข้า ไฟล์ส่งออกนั้นมีขั้นตอนตั้งค่าของตัวเอง

ดาวน์โหลดไฟล์

1. ดาวน์โหลดซอร์ส beta แบบ ZIP หรือเปิด พื้นที่เก็บข้อมูลเบต้า แล้วเลือก รหัส → ดาวน์โหลด ZIP.
2. แตกไฟล์ในโฟลเดอร์ที่จะเก็บไว้ เช่น C:\SSN\social_stream-beta\ อย่าแก้ไฟล์ใน ZIP ไม่ต้องติดตั้ง SSN ใหม่
3. หาไฟล์โอเวอร์เลย์ (ดูตารางด้านบน) ทำสำเนาข้างไฟล์เดิม เช่น poll.html → my-poll.html สำหรับธีม เช่น themes/featured-styles/featured-modern.html เก็บสำเนาไว้ในโฟลเดอร์เดียวกัน
4. เปิดสำเนาในตัวแก้ไขข้อความหรือโค้ด บันทึกเป็น .htmlไม่ใช่ .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

คงลิงก์เซสชัน

เปิด SSN เชื่อมแหล่งข้อมูล และตรวจว่าโอเวอร์เลย์เดิมทำงาน จากนั้นคัดลอก ลิงก์เต็ม จากเครื่องมือ SSN ของโอเวอร์เลย์นั้น

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

ค่าหลัง session= คือเซสชัน SSN ของคุณ ไม่ใช่ช่อง YouTube ชื่อ Twitch ชื่อไฟล์ หรือหัวข้อโพล SSN และหน้าต้องใช้เซสชันกับรหัสผ่านเดียวกัน เปิด SSN ไว้ เพราะโอเวอร์เลย์รับข้อมูลอย่างเดียว ไม่จับแชตเอง

หากสำเนาว่าง ให้ตรวจลิงก์เดิมก่อน บางหน้าถามค่าที่ขาด บางหน้ายังคงซ่อนหรือเปลี่ยนเส้นทาง การใส่เซสชันถูกต้องในลิงก์ช่วยลดการเดา

เปิดไฟล์ใน OBS

เปิดไฟล์ที่แก้จากคอมพิวเตอร์ได้โดยตรง ไม่ต้องมีเซิร์ฟเวอร์

1. ลากสำเนา HTML เข้า Chrome หรือ Edge แล้วคัดลอกที่อยู่ ซึ่งขึ้นต้นด้วย file:///.
2. จากลิงก์โอเวอร์เลย์ SSN ที่ใช้ได้ คัดลอกทุกอย่างตั้งแต่ ? เป็นต้นไป วางต่อท้ายที่อยู่ไฟล์เพื่อคงเซสชัน รหัสผ่าน การตั้งค่า และ # ส่วน
3. เปิดที่อยู่รวมนี้ในเบราว์เซอร์เพื่อทดสอบ
4. ใน OBS เพิ่ม แหล่งเบราว์เซอร์ (Browser Source) คงค่า ไฟล์ในเครื่อง (Local file) ออก วางที่อยู่เต็มใน URL แล้วตั้งความกว้างและความสูง

ตัวอย่าง: ลิงก์ SSN นี้…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…กลายเป็นแบบนี้สำหรับสำเนาโพลที่ดาวน์โหลดบน Windows:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

บน macOS ขึ้นต้นด้วย file:///Users/... บน Linux มักเป็น file:///home/... การคัดลอกจากเบราว์เซอร์จัดการช่องว่างและเครื่องหมายทับให้

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS อธิบายโหมดไฟล์/URL ขนาด Custom CSS และการรีเฟรชใน การอ้างอิงแหล่งที่มาของเบราว์เซอร์.

เปลี่ยนดีไซน์เอง หรือให้ AI ช่วย

เตรียมโลโก้ ไฟล์ฟอนต์ สีแบรนด์ ขนาดพื้นที่ และภาพอ้างอิง หน้าเว็บทั่วไปโหลดฟอนต์หรือรูปจากดิสก์คอมพิวเตอร์อีกเครื่องไม่ได้

พรอมต์ AI

ใช้พรอมป์ต์เฉพาะชนิดในแต่ละคู่มือออกแบบ หรือเริ่มด้วยอันนี้ ให้ไฟล์สำเนาพร้อมสไตล์และสคริปต์ที่หน้าโหลดแก่ AI

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

ป้องกันข้อความแชตกลายเป็นโค้ด

ชื่อ ข้อความ หัวข้อ จำนวนเงิน และลิงก์มาจากผู้ชมและบริการภายนอก ให้ถือเป็นข้อความ ไม่ใช่โค้ด ทำความสะอาดตรงจุดที่ตัวแสดงผลใส่ลงหน้า

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• หากหน้ามีตัวกรอง HTML อยู่แล้ว ให้คงไว้ อย่าเพิ่มอีกตัว
• สำหรับไฟล์ในโฟลเดอร์ย่อย ให้แก้พาธสคริปต์
• อย่าวางชื่อดิบในสตริงแอตทริบิวต์หรือสีดิบในมาร์กอัปสไตล์ ตรวจค่าสไตล์ก่อนกำหนดทีละพร็อพเพอร์ตี
• HTML ที่ผ่านการทำความสะอาดยังไม่ปลอดภัยสำหรับรันเป็น JavaScript หรือใช้เป็นคำสั่งให้ AI

ข้อมูลเพิ่มเติม: คู่มือ OWASP เรื่องจุดแสดงผลที่ปลอดภัยและการกรอง HTML.

ทดสอบทีละส่วน

ไฟล์ที่ให้ AI

ให้ไฟล์โอเวอร์เลย์และ CSS/JS ที่หน้าโหลดแก่ AI พร้อมไฟล์เหล่านี้ เอกสารเหตุการณ์อย่างเดียวไม่อธิบายตัวควบคุมโพลหรือโค้ดจัดวางแต่ละโอเวอร์เลย์

แก้ปัญหา

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