วิธีทำให้แหล่งที่มาของเบราว์เซอร์โปร่งใสใน OBS Studio

คุณได้เพิ่มแหล่งที่มาของเบราว์เซอร์ใน OBS Studio ดี. แต่ตอนนี้คุณเห็นกล่องสีขาวหรือสีดำน่าเกลียดรอบๆ ไม่ดี. ไม่ต้องกังวล. การทำให้ซอร์สเบราว์เซอร์ของคุณโปร่งใสใน OBS นั้นง่ายกว่าที่คุณคิด คุณเพียงแค่ต้องมีการตั้งค่าที่ถูกต้อง และอาจมีการปรับแต่งเล็กๆ น้อยๆ หนึ่งหรือสองครั้ง

TLDR: หากต้องการทำให้แหล่งที่มาของเบราว์เซอร์โปร่งใสใน OBS Studio หน้าเว็บของคุณต้องมีพื้นหลังโปร่งใส และ OBS ต้องไม่บังคับสีพื้นหลัง ตั้งค่าพื้นหลังของหน้าให้โปร่งใสในคุณสมบัติแหล่งที่มาของเบราว์เซอร์ หากจำเป็น ให้แก้ไข CSS ของโอเวอร์เลย์เพื่อใช้ พื้นหลัง: โปร่งใส; . เมื่อเสร็จแล้ว ภาพซ้อนทับของคุณจะกลมกลืนกับสตรีมของคุณอย่างหมดจด

ขั้นแรก แหล่งที่มาของเบราว์เซอร์คืออะไร?

แหล่งที่มาของเบราว์เซอร์ใน OBS เป็นเว็บเบราว์เซอร์ขนาดเล็กในตัว มันโหลดเว็บไซต์เข้าสู่ฉากของคุณโดยตรง เหมาะสำหรับ:

• การแจ้งเตือนสตรีม
• การซ้อนทับการแชท
• รายการกิจกรรม
• วิดเจ็ต HTML แบบกำหนดเอง
• ป้ายกำกับสตรีม

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

นั่นคือแนวคิดหลัก OBS ไม่สามารถลบพื้นหลังที่ฝังอยู่ในเพจได้อย่างน่าอัศจรรย์

---

ขั้นตอนที่ 1: เพิ่มแหล่งที่มาของเบราว์เซอร์ใน OBS

หากคุณยังไม่ได้มาเริ่มต้นกันใหม่

1. เปิด OBS สตูดิโอ
2. ไปที่แผง แหล่งที่มา ของคุณ
3. คลิกปุ่ม +
4. เลือก เบราว์เซอร์
5. ตั้งชื่ออะไรก็ได้ที่คุณต้องการ
6. คลิก ตกลง

ตอนนี้วาง URL ของคุณลงในช่อง URL กำหนดความกว้างและความสูงหากจำเป็น จากนั้นคลิกตกลง

ตอนนี้คุณควรเห็นแหล่งที่มาของเบราว์เซอร์ของคุณปรากฏในหน้าต่างแสดงตัวอย่าง

หากมีพื้นหลังทึบ โปรดอ่านต่อ

ไม่พบรูปภาพใน postmeta

---

ขั้นตอนที่ 2: ตรวจสอบให้แน่ใจว่าพื้นหลังของเว็บไซต์มีความโปร่งใส

นี่เป็นขั้นตอนที่สำคัญที่สุด

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

หากคุณควบคุม HTML หรือ CSS ให้เพิ่มสิ่งนี้:

ร่างกาย {
  พื้นหลัง: โปร่งใส;
}

หรือดีกว่านั้น:

html เนื้อความ {
  สีพื้นหลัง: rgba (0, 0, 0, 0);
}

สิ่งนี้บังคับให้เกิดความโปร่งใสอย่างสมบูรณ์

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

• เปิดใช้งานพื้นหลังโปร่งใส
• ปิดการใช้งานพื้นหลัง
• CSS ที่กำหนดเอง

เปิดใช้งานหากมี

ถ้าไม่ ให้ตรวจสอบว่าคุณสามารถแทรก CSS ที่กำหนดเองได้หรือไม่ ซึ่งมักจะแก้ปัญหาได้

---

ขั้นตอนที่ 3: ตรวจสอบการตั้งค่าแหล่งที่มาของเบราว์เซอร์ OBS

คลิกขวาที่แหล่งที่มาของเบราว์เซอร์ของคุณใน OBS

เลือก คุณสมบัติ

ตอนนี้ดูการตั้งค่าอย่างละเอียด

ตรวจสอบให้แน่ใจว่า:

• วาง URL ที่ถูกต้องแล้ว
• ความกว้างและความสูง ตรงกับขนาดภาพซ้อนทับของคุณ
• หากมีกล่อง CSS แบบกำหนดเอง จะไม่บังคับสีพื้นหลัง

หากคุณเห็นช่อง CSS ที่กำหนดเอง คุณจะเพิ่มสิ่งต่อไปนี้ได้

ร่างกาย { สีพื้นหลัง: rgba (0,0,0,0) ! สำคัญ; }

คลิกตกลงหลังจากการเปลี่ยนแปลง

หากทุกอย่างถูกต้อง พื้นหลังก็ควรจะหายไป

---

ปัญหาทั่วไป: ยังคงแสดงพื้นหลังสีขาว

สิ่งนี้เกิดขึ้นมากมาย

นี่คือเหตุผล:

• เว็บไซต์มีพื้นหลังสีขาวเริ่มต้น
• มีการใช้ CSS ไม่ถูกต้อง
• แพลตฟอร์มโอเวอร์เลย์บังคับสไตล์

การแก้ไขด่วน:

1. รีเฟรชแหล่งที่มาของเบราว์เซอร์ (คลิกขวา → รีเฟรช)
2. รีสตาร์ท OBS
3. ล้างแคชของเบราว์เซอร์ (ภายในคุณสมบัติแหล่งที่มาของเบราว์เซอร์)

ใช่ แคชอาจทำให้เกิดปัญหาได้ โดยเฉพาะหลังจากเปลี่ยน CSS

---

เคล็ดลับโบนัส: ใช้ PNG และ WebM เพื่อความโปร่งใส

หากแหล่งที่มาของเบราว์เซอร์ของคุณแสดงรูปภาพหรือภาพเคลื่อนไหว ตรวจสอบให้แน่ใจว่าแหล่งที่มานั้นรองรับความโปร่งใส

รูปแบบที่ดีที่สุด:

• PNG สำหรับรูปภาพ
• WebM พร้อมช่องอัลฟ่าสำหรับวิดีโอ
• GIF (คุณภาพจำกัด แต่ใช้งานได้)

หากคุณใช้ MP4 ความโปร่งใสจะไม่ทำงาน MP4 ไม่รองรับช่องอัลฟ่า

นี่ไม่ใช่ปัญหา OBS มันเป็นข้อจำกัดของรูปแบบ

---

จะเกิดอะไรขึ้นหากคุณไม่สามารถแก้ไขเว็บไซต์ได้?

บางครั้งคุณไม่ได้ควบคุมเพจ

บางทีมันอาจเป็นวิดเจ็ต หรือเครื่องมือของบุคคลที่สามที่ไม่มีตัวเลือก CSS

คุณยังคงมีทางเลือก

ตัวเลือกที่ 1: ใช้คีย์ Chroma

หากพื้นหลังเป็นสีเขียวสดใสหรือสีทึบอื่น คุณสามารถลบออกได้

1. คลิกขวาที่แหล่งที่มาของเบราว์เซอร์
2. เลือก ตัวกรอง
3. คลิก +
4. เลือก โครมาคีย์

ปรับการตั้งค่าจนกว่าพื้นหลังจะหายไป

วิธีนี้ใช้ได้ผลดีที่สุดกับพื้นหลังสีเขียวสดใส

แต่มันไม่สมบูรณ์แบบ รายละเอียดเล็กๆ น้อยๆ อาจประสบได้

ไม่พบรูปภาพใน postmeta

ตัวเลือกที่ 2: ครอบตัดมัน

กด ALT ค้างไว้ขณะลากขอบของแหล่งที่มาใน OBS

วิธีนี้จะครอบตัดบางส่วนของเฟรม

คุณสามารถซ่อนขอบพื้นหลังที่ไม่ต้องการได้ด้วยวิธีนี้

มันง่ายมาก และรวดเร็ว

---

วิธีการขั้นสูง: สำหรับการวางซ้อน HTML แบบกำหนดเอง

หากคุณสร้างภาพซ้อนทับของคุณเอง ความโปร่งใสก็เป็นเรื่องง่าย

เริ่ม HTML ของคุณดังนี้:

<!DOCTYPE html>
<html>
<หัว>
<สไตล์>
  html เนื้อความ {
    ระยะขอบ: 0;
    ช่องว่างภายใน: 0;
    พื้นหลัง: โปร่งใส;
    ล้น: ซ่อนเร้น;
  }
</สไตล์>
</หัว>
<ร่างกาย>

<!-- เนื้อหาของคุณที่นี่ -->

</ร่างกาย>
</html>

วิธีนี้จะลบระยะขอบและทำให้หน้าเพจสะอาดและโปร่งใสอย่างสมบูรณ์

หลีกเลี่ยงการเพิ่ม:

• ภาพพื้นหลัง
• การไล่ระดับสีพื้นหลัง
• สีธีมเริ่มต้น

ทำให้มันน้อยที่สุด

OBS จะจัดการส่วนที่เหลือเอง

---

เคล็ดลับประสิทธิภาพ

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

ทำให้ทุกอย่างราบรื่น:

• ใช้ขนาดการซ้อนทับขนาดเล็ก
• ปิดการใช้งานภาพเคลื่อนไหวที่ไม่จำเป็น
• ลดอัตราเฟรมหากไม่จำเป็น
• หลีกเลี่ยง JavaScript ที่มีน้ำหนักมาก

หากการซ้อนทับล่าช้า อาจไม่ใช่ปัญหาด้านความโปร่งใส มันอาจจะซับซ้อนเกินไป

---

รายการตรวจสอบความโปร่งใสด่วน

หากมีบางอย่างใช้งานไม่ได้ ให้ทำตามรายการนี้:

• พื้นหลังของเว็บไซต์ตั้งค่าเป็นแบบโปร่งใสหรือไม่?
• คุณใช้ พื้นหลัง: โปร่งใส; ใน CSS?
• คุณได้รีเฟรชแหล่งที่มาแล้วหรือยัง?
• คุณล้างแคชแล้วหรือยัง?
• รูปแบบภาพรองรับความโปร่งใสหรือไม่
• OBS อัปเดตแล้วหรือยัง?

ปัญหาส่วนใหญ่แก้ไขได้ภายในห้านาที

---

เหตุใดความโปร่งใสจึงมีความสำคัญ

ภาพซ้อนทับที่โปร่งใสดูเป็นมืออาชีพ

พวกมันผสมผสานเข้ากับฉากของคุณ

ไม่มีกล่องน่าเกลียด

ไม่มีขอบเขตแปลกๆ

การแจ้งเตือนของคุณลอยอย่างเป็นธรรมชาติเหนือการเล่นเกมหรือกล้อง

และการสตรีมของคุณดูสะอาดตายิ่งขึ้นในทันที

รายละเอียดเล็กๆ น้อยๆ ความแตกต่างที่ยิ่งใหญ่

---

ความคิดสุดท้าย

การทำให้แหล่งที่มาของเบราว์เซอร์โปร่งใสใน OBS Studio นั้นไม่ใช่เรื่องยาก

แค่รู้สึกลึกลับในตอนแรก

จำกฎทอง:

ความโปร่งใสต้องมาจากตัวเว็บไซต์เอง

OBS จะแสดงผลลัพธ์ของหน้าอย่างชัดเจน ไม่มีอะไรเพิ่มเติม ไม่มีอะไรน้อย

เมื่อ CSS ของคุณใช้พื้นหลังโปร่งใส OBS จะทำสิ่งมหัศจรรย์โดยอัตโนมัติ

ตอนนี้ไปทำความสะอาดการซ้อนทับเหล่านั้น

กระแสของคุณสมควรได้รับมัน