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

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

Source: https://kickbot.com/th/docs/getting-started/add-browser-source-obs

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

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

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

| โอเวอร์เลย์ | คัดลอกลิงก์ได้ที่ | ดูเพิ่มเติม |
|---|---|---|
| โอเวอร์เลย์แชท การแจ้งเตือน ตัวนับ และวิดเจ็ตอื่น ๆ | **วิดเจ็ต** > **วิดเจ็ตที่บันทึกไว้** หลังจากติดตั้งวิดเจ็ตจากคลังวิดเจ็ตแล้ว | [คลังวิดเจ็ต](https://kickbot.com/th/docs/widgets/widget-library), [โอเวอร์เลย์แชท](https://kickbot.com/th/docs/widgets/chat-overlay) |
| อ่านข้อความด้วยเสียง (TTS) | **TTS** > **ตั้งค่า** ในส่วน **Browser source สำหรับ OBS** | [ตั้งค่า TTS](https://kickbot.com/th/docs/tts/set-up-tts) |
| แจ้งเตือนโดเนท | **ระบบโดเนท** > **วิดเจ็ต** | [แจ้งเตือนโดเนท](https://kickbot.com/th/docs/tipping/tip-alerts) |
| ภาพ AI | **แชทบอท** > **ภาพ AI** ในส่วน **วิดเจ็ต** | [ภาพ AI](https://kickbot.com/th/docs/ai/ai-images) |

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

## เลือกขนาด

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

![การ์ด “เกี่ยวกับวิดเจ็ตนี้” ในคลังวิดเจ็ต แสดงขนาดบนสตรีม 800 × 600 px](https://kickbot.com/docs/images/getting-started/add-browser-source-obs/01-size-on-stream.webp "ใช้ค่าใน “ขนาดบนสตรีม” เป็นความกว้างและความสูงของ 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](https://obsproject.com/kb/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](https://streamlabs.com/content-hub/post/introducing-browser-source-interaction-for-streamlabs-desktop) ถ้าไม่ได้ยินเสียงโอเวอร์เลย์ ให้เช็กว่าไม่ได้ปิดเสียงไว้ในมิกเซอร์เสียง

## 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 อธิบายเรื่องเลเยอร์ไว้ใน[คู่มือเลเยอร์](https://meldstudio.co/docs/layers/)

## แก้ปัญหา

**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](https://kickbot.com/th/docs/tts/set-up-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** โดยใช้ขนาดที่แสดงบนวิดเจ็ต ดู[โอเวอร์เลย์แชท](https://kickbot.com/th/docs/widgets/chat-overlay)

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

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

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

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

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

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