เพิ่มโอเวอร์เลย์ KickBot ลงใน OBS (browser source)

โอเวอร์เลย์ทุกตัวของ KickBot คือลิงก์เว็บ ถ้าจะให้แสดงบนสตรีม Kick ให้คัดลอกลิงก์จากแดชบอร์ด KickBot แล้วเพิ่มลงในโปรแกรมสตรีมเป็น browser source วิธีนี้ใช้ได้เหมือนกันหมด ทั้งโอเวอร์เลย์แชท การแจ้งเตือน TTS แจ้งเตือนโดเนท และภาพ AI ใน OBS Studio, Streamlabs Desktop, Meld Studio และแอปอื่นที่รองรับ browser source ไม่ต้องติดตั้งอะไรเพิ่ม

หาลิงก์โอเวอร์เลย์

แต่ละฟีเจอร์มีลิงก์ของตัวเอง คัดลอกได้จากหน้าตามตารางนี้

โอเวอร์เลย์	คัดลอกลิงก์ได้ที่	ดูเพิ่มเติม
โอเวอร์เลย์แชท การแจ้งเตือน ตัวนับ และวิดเจ็ตอื่น ๆ	วิดเจ็ต > วิดเจ็ตที่บันทึกไว้ หลังจากติดตั้งวิดเจ็ตจากคลังวิดเจ็ตแล้ว	คลังวิดเจ็ต, โอเวอร์เลย์แชท
อ่านข้อความด้วยเสียง (TTS)	TTS > ตั้งค่า ในส่วน Browser source สำหรับ OBS	ตั้งค่า TTS
แจ้งเตือนโดเนท	ระบบโดเนท > วิดเจ็ต	แจ้งเตือนโดเนท
ภาพ AI	แชทบอท > ภาพ AI ในส่วน วิดเจ็ต	ภาพ AI

คำเตือน

เก็บลิงก์โอเวอร์เลย์ไว้เป็นความลับ ใครมีลิงก์ก็ใช้ได้ อย่าวางลิงก์ในแชทหรือโชว์บนสตรีม

เลือกขนาด

วิดเจ็ตจากคลังวิดเจ็ตจะบอกขนาดไว้ที่ ขนาดบนสตรีม เช่น 800 × 600 px ให้ใช้ความกว้างและความสูงนี้กับ browser source ขนาดเดียวกันนี้ยังแสดงบนวิดเจ็ตใน วิดเจ็ตที่บันทึกไว้ ด้วย

ใช้ค่าใน “ขนาดบนสตรีม” เป็นความกว้างและความสูงของ browser source

ถ้าหน้านั้นไม่ได้บอกขนาด ให้ตั้ง browser source เท่ากับขนาดแคนวาส เช่น 1920 × 1080 แล้วค่อยย้ายหรือปรับขนาด source ในซีน โอเวอร์เลย์ส่วนใหญ่มีพื้นหลังโปร่งใส บนสตรีมจึงเห็นแค่ตัวเนื้อหา

OBS Studio

1. ในกล่อง Sources (แหล่งที่มา) ของซีน คลิก + แล้วเลือก Browser
2. ตั้งชื่อ เช่น “KickBot chat” แล้วกดยืนยัน
3. ในหน้าต่าง properties ให้วางลิงก์โอเวอร์เลย์ลงในช่อง URL
4. ตั้ง Width (ความกว้าง) และ Height (ความสูง) ให้เท่ากับขนาดของโอเวอร์เลย์
5. ถ้าโอเวอร์เลย์มีเสียง (TTS การแจ้งเตือน แจ้งเตือนโดเนท) ให้เปิด Control audio via OBS (ควบคุมเสียงผ่าน OBS) แล้ว source จะไปอยู่ใน Audio Mixer (มิกเซอร์เสียง) ซึ่งปรับระดับเสียงได้
6. คลิก OK แล้วลาก source ไปวางตรงที่ต้องการบนแคนวาส

ตัวเลือกอื่นของ browser source ใน OBS:

• Shutdown source when not visible (ปิด source เมื่อมองไม่เห็น): ปิดโอเวอร์เลย์เมื่อซีนนั้นไม่ได้ออกอากาศ สำหรับการแจ้งเตือนและ TTS ให้ปิดตัวเลือกนี้ไว้ จะได้ไม่พลาดอะไรตอนที่อยู่ซีนอื่น
• Refresh browser when scene becomes active (รีเฟรชเมื่อสลับมาที่ซีน): โหลดโอเวอร์เลย์ใหม่ทุกครั้งที่สลับมาที่ซีนนี้ ข้อความที่กำลังเล่นอยู่จะหยุดเมื่อโอเวอร์เลย์โหลดใหม่
• Refresh cache of current page (รีเฟรชแคชของหน้าปัจจุบัน): ปุ่มที่โหลดโอเวอร์เลย์ใหม่ทันที ใช้หลังจากเปลี่ยนการตั้งค่าใน KickBot หรือเมื่อโอเวอร์เลย์แสดงผลไม่ถูกต้อง

OBS อธิบายทุกตัวเลือกไว้ในคู่มือ Browser Source

ข้อควรรู้

ถ้าจะใช้โอเวอร์เลย์ชุดเดียวกันในหลายซีน ให้รวมไว้ในซีนเดียว เช่น “KickBot overlays” แล้วเพิ่มซีนนั้นเป็น source ในซีนอื่น ๆ แบบนี้จะเพิ่มแต่ละลิงก์แค่ครั้งเดียว

Streamlabs Desktop

1. ในหน้า studio คลิก + ข้าง Sources
2. เลือก Browser Source ตั้งชื่อ แล้วคลิก Add Source
3. ในการตั้งค่า source ให้วางลิงก์โอเวอร์เลย์ลงในช่อง URL แล้วตั้งความกว้างและความสูง
4. ปิดหน้าตั้งค่า แล้วย้าย source ไปวางให้เข้าที่

Streamlabs Desktop มีตัวเลือก Shutdown source when not visible และ Refresh browser when scene becomes active เหมือนกับ OBS ดูบทความของ Streamlabs เรื่อง browser source ถ้าไม่ได้ยินเสียงโอเวอร์เลย์ ให้เช็กว่าไม่ได้ปิดเสียงไว้ในมิกเซอร์เสียง

Meld Studio

1. ในแผง Layers คลิก + แล้วเลือก Browser
2. วางลิงก์โอเวอร์เลย์ลงในช่อง URL ใน Inspector
3. ปรับขนาดเลเยอร์บนแคนวาส หรือตั้งค่า W และ H ใน Inspector
4. ถ้าโอเวอร์เลย์มีเสียง ให้เปิด Add an audio track for the source (เพิ่มแทร็กเสียงให้ source) ใต้ช่อง URL เพราะ Meld ไม่เพิ่มแทร็กเสียงให้เลเยอร์เบราว์เซอร์เอง

จะวางลิงก์ลงบนแคนวาสของ Meld ตรง ๆ เพื่อสร้างเลเยอร์เบราว์เซอร์ก็ได้ ไอคอนรีโหลดข้างช่อง URL ใช้โหลดโอเวอร์เลย์ใหม่ Meld อธิบายเรื่องเลเยอร์ไว้ในคู่มือเลเยอร์

แก้ปัญหา

source ว่างเปล่า

• โอเวอร์เลย์หลายตัวจะแสดงผลเฉพาะตอนที่มีอะไรให้แสดง โอเวอร์เลย์แชทจะว่างจนกว่าจะมีคนพิมพ์แชท การแจ้งเตือนจะขึ้นเฉพาะตอนที่มีอีเวนต์เกิดขึ้น
• คัดลอกลิงก์จากแดชบอร์ดอีกครั้งแล้ววางลงใน source ถ้าเคยลบวิดเจ็ตแล้วติดตั้งใหม่ วิดเจ็ตนั้นจะได้ลิงก์ใหม่
• โหลดโอเวอร์เลย์ใหม่: กด Refresh cache of current page ใน OBS หรือไอคอนรีโหลดใน Meld
• เช็กว่า source ไม่ได้ถูกซ่อนอยู่ (ไอคอนรูปตา) และไม่ได้อยู่ใต้ source อื่นในรายการ

TTS หรือการแจ้งเตือนไม่มีเสียง

• OBS: เปิด Control audio via OBS ใน properties ของ source แล้วเช็กว่า source ไม่ได้ปิดเสียงอยู่ใน Audio Mixer
• Meld: เปิด Add an audio track for the source
• เช็กระดับเสียงของฟีเจอร์นั้นใน KickBot เช่น ระดับเสียง TTS ในตั้งค่า TTS
• ถ้าอยากได้ยินเสียงโอเวอร์เลย์เองระหว่างสตรีมด้วย OBS ให้เปิด Edit > Advanced Audio Properties แล้วตั้ง Audio Monitoring ของ source เป็น Monitor and Output ส่วนผู้ชมได้ยินเสียงอยู่แล้วไม่ว่าจะตั้งแบบไหน

เปลี่ยนค่าใน KickBot แล้วบนสตรีมไม่เปลี่ยนตาม โหลดโอเวอร์เลย์ใหม่ด้วย Refresh cache of current page โอเวอร์เลย์บางตัวอ่านการตั้งค่าเฉพาะตอนโหลดเท่านั้น

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

คำถามที่พบบ่อย

เพิ่มแชท Kick ลงใน OBS ยังไง?

ติดตั้งวิดเจ็ตแชทจากคลังวิดเจ็ต คัดลอกลิงก์จาก วิดเจ็ตที่บันทึกไว้ แล้วเพิ่มลงใน OBS เป็น source แบบ Browser โดยใช้ขนาดที่แสดงบนวิดเจ็ต ดูโอเวอร์เลย์แชท

โอเวอร์เลย์ KickBot ใช้กับ Streamlabs และ Meld ได้ไหม?

ได้ โปรแกรมสตรีมไหนก็ได้ที่รองรับ browser source รวมถึง OBS Studio, Streamlabs Desktop และ Meld Studio

ใช้ลิงก์โอเวอร์เลย์เดียวในหลายซีนได้ไหม?

ได้ เพิ่ม source เดียวกันลงในแต่ละซีน หรือรวมโอเวอร์เลย์ไว้ในซีนเดียวแล้วเพิ่มซีนนั้นลงในซีนอื่น ๆ

โอเวอร์เลย์ทำให้คอมช้าลงไหม?

โอเวอร์เลย์เป็นหน้าเว็บที่เบามาก งานหนัก เช่น การสร้างเสียง TTS ทำบนเซิร์ฟเวอร์ของ KickBot ส่วน browser source แค่แสดงและเล่นผลลัพธ์