แยกแชตตามแพลตฟอร์มใน 4 ขั้นตอน
ตัวอย่าง: โอเวอร์เลย์หนึ่งแสดงเฉพาะ Twitch อีกอันแสดงเฉพาะ YouTube แต่คุณยังอ่านทั้งหมดใน Dock เดียว
- เพิ่มแชตทั้งหมดใน Social Stream Ninja ตรวจว่าข้อความใหม่จากแต่ละแหล่งแสดงใน แผงด็อก Streaming Chat ไม่ต้องกรอง Dock นั้น เพราะเป็นหน้าที่คุณดูเอง
- คัดลอกลิงก์
dock.htmlสองครั้ง การคัดลอกคงเซสชัน รหัสผ่าน รุ่น และการตั้งค่าเซิร์ฟเวอร์ - เพิ่มตัวกรองท้ายแต่ละสำเนา เช่น
&onlyfrom=twitch&hidemenu(ดู ตารางด้านล่าง). - เพิ่มแต่ละลิงก์ใน OBS แยกเป็น แหล่งเบราว์เซอร์ (Browser Source) ตั้งชื่อให้ชัด เช่น แชต Twitch และ แชต YouTube.
- จับข้อมูล Twitch + YouTube
- เซสชัน SSN เดียว Dock ของคุณเห็นทั้งคู่
- มุมมอง OBS เฉพาะ Twitch และเฉพาะ YouTube
ตัวกรองสำหรับโอเวอร์เลย์แชต
| ฉันต้องการแสดง… | เพิ่มท้ายลิงก์ Dock |
|---|---|
| เฉพาะ Twitch | &onlyfrom=twitch&hidemenu |
| เฉพาะ YouTube | &onlyfrom=youtube&hidemenu |
| Twitch และ YouTube ร่วมกัน | &onlyfrom=twitch,youtube&hidemenu |
| ทุกอย่างยกเว้น Discord | &hidefrom=discord&hidemenu |
ตัวอย่างเต็ม:
https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenuใช้
onlyfrom และ hidefrom ที่นี่ ตัวเลือกจากโอเวอร์เลย์อื่น เช่น onlytype อาจใช้กับหน้านี้ไม่ได้ YouTube Shorts เป็นอีกประเภทหนึ่ง ให้เพิ่ม youtubeshorts หากตัวจับข้อมูลส่งค่านี้มา ดู ประเภทแหล่งข้อมูล.แยก Featured Chat (ข้อความที่เลือก)
- คัดลอกลิงก์
featured.htmlสองครั้ง - เพิ่ม
&onlyfrom=twitchให้ลิงก์หนึ่ง และ&onlyfrom=youtubeให้อีกลิงก์ - เปิด Dock ไว้เพื่อเลือกข้อความ
Featured Chat รับหนึ่งแพลตฟอร์มต่อลิงก์ รายการคั่นจุลภาค (
twitch,youtube) ใช้ได้เฉพาะ Dockตัวกรองกำหนดเพียงว่าหน้ารับข้อความที่เลือกใดบ้าง ไม่ได้แยกคิวให้ การปฏิเสธข้อความไม่ล้างหน้าจอด้วย เมื่อเปลี่ยนช่วงรายการ ให้ล้างข้อความเด่นเองเพื่อไม่ให้ข้อความเก่าค้าง
สองช่องบนแพลตฟอร์มเดียวกัน
onlyfrom=twitch หมายถึง Twitch ทั้งหมด ไม่ใช่ช่อง Twitch เดียว ใช้ชื่อช่องหรือชื่อสตรีมเป็นชื่อตัวกรองไม่ได้
| ฉันต้องการ… | ทำตามนี้ |
|---|---|
| แสดงว่าแต่ละข้อความมาจากช่องไหน | เพิ่ม &showchannelname (ใช้ได้เมื่อแหล่งแชตส่งชื่อช่องมา) |
| จัดสองรายการที่แยกกันทั้งหมด | ใช้ตัวจับข้อมูลหรือโปรไฟล์แยกกัน แต่ละอันมีเซสชันของตัวเองและเปิดเฉพาะแหล่งของตัวเอง |
| กรอง Dock ตามแท็บเบราว์เซอร์ | &filtertid=123 (ขั้นสูง ดูด้านล่าง) |
โอเวอร์เลย์ที่ใช้คนละเซสชันโดยไม่มีตัวจับข้อมูลตรงกันจะว่าง ตัวเลือก
label ตั้งชื่อหน้าเพื่อกำหนดเส้นทาง ไม่ใช่ตัวกรองช่องวิธี filtertid ใช้ได้
- ใช้ ID ตัวเลขของแท็บเบราว์เซอร์ที่ส่งข้อความมา หากมีหลาย ID ให้คั่นด้วยจุลภาค
- หา
tidในข้อมูลข้อความที่จับได้จริง ดู เอกสารอ้างอิงอีเวนต์ และ คำสั่งและ API. - ไม่ใช่ ID ช่องของแพลตฟอร์ม
- tab ID อาจเปลี่ยนเมื่อเปิดแหล่งใหม่ แหล่งที่ไม่มี tab ID ตรงกันอาจถูกซ่อน
- ใช้ได้เฉพาะ Dock ไม่ใช่ตัวกรองช่องสำหรับ Featured Chat
ทดสอบแต่ละมุมมอง
- ส่งข้อความจำลอง Twitch และ YouTube เข้าสู่เซสชันทดสอบ ใช้ สร้างข้อความทดสอบ.
- ตรวจว่าทั้งคู่แสดงใน Dock และแต่ละโอเวอร์เลย์แสดงเฉพาะแพลตฟอร์มของตัวเอง
- เลือกแสดงแต่ละข้อความแล้วกดล้าง ตรวจทุกหน้า Featured Chat หลังสลับแพลตฟอร์ม
- ทดสอบซ้ำด้วยข้อความจริงจากแต่ละแหล่ง ข้อความจำลองไม่มี tab ID จริง
| ปัญหา | ลองวิธีนี้ |
|---|---|
| มุมมองว่าง | เอาตัวกรองออกชั่วคราว หากแชตกลับมา ให้ตรวจประเภทแหล่งแชตหรือ tab ID ให้ตรง |
| ยังว่างแม้เอาตัวกรองออก | ดู การแก้ปัญหาเซสชันและการกำหนดเส้นทาง. |
| เปลี่ยนชื่อแหล่ง OBS แล้วแต่ไม่เปลี่ยน | การเปลี่ยนชื่อไม่แก้ลิงก์ที่บันทึก ต้องแก้ URL เอง |
แชตและแจ้งเตือนในแท็บเบราว์เซอร์เดียว
รวมโอเวอร์เลย์ ซ้อนลิงก์โอเวอร์เลย์เป็นแท็บเดียวหรือ Browser Source เดียวใน OBS เหมาะกับอ่านแชตบนโทรศัพท์ระหว่างสตรีม IRL
- วาง แผงด็อก Streaming Chat ในชั้นล่าง
- วาง กล่องแจ้งเตือนหลายสตรีม ในชั้นบน เก็บลิงก์เต็มพร้อมเซสชัน รหัสผ่าน และตัวเลือกเชื่อมต่อ
- คงค่า พื้นหลัง SSN โปร่งใส ไว้
- เปิด อนุญาตให้แตะและเลื่อนในชั้นนี้ สำหรับแชต ปิดสำหรับแจ้งเตือนเพื่อไม่ให้บังแชต
- กด ดูตัวอย่าง, จากนั้น แสดง QR code แล้วสแกนด้วยโทรศัพท์ หรือกด คัดลอกลิงก์รวม เพื่อนำไปวางใน Browser Source
มุมมองรวมไม่มีตัวควบคุมการตั้งค่า แสดงโอเวอร์เลย์เท่านั้น
ตัวเลือกชั้น
| ฉันต้องการ… | ทำตามนี้ |
|---|---|
| เพิ่มโอเวอร์เลย์ | สูงสุดแปดลิงก์ |
| ย้ายชั้นไปหน้าหรือหลัง | ใช้ปุ่มลูกศร |
| ปรับขนาดหรือย้ายชั้น | เปิด ขนาดและตำแหน่ง ตั้งความกว้าง ความสูง ซ้าย และบนเป็นพิกเซล (450) หรือเปอร์เซ็นต์ (100%). |
| ทำให้ชั้นเต็มจออีกครั้ง | รีเซ็ตเป็นเต็มหน้าจอ เว้นความกว้างและความสูงว่างเพื่อเต็มเบราว์เซอร์ เว้นซ้ายและบนว่างเพื่อเริ่มที่มุมซ้ายบน |
| สร้างคอลัมน์แชตด้านซ้าย (1920×1080) | ชั้นแชต: ความกว้าง 450 ความสูง 1080 ตำแหน่งซ้าย 0 ตำแหน่งบน 0 ชั้นอื่นยังเต็มจอ |
| แก้ลิงก์รวมภายหลัง | ใช้ลิงก์แก้ไขได้ หรือเพิ่ม ?edit=1 ก่อน #. |
| เริ่มใหม่ | ล้างการตั้งค่าที่บันทึก. |
ขนาดพิกเซลคงที่เมื่อเบราว์เซอร์เปลี่ยนขนาด ส่วนเปอร์เซ็นต์ปรับตาม แต่ละโอเวอร์เลย์คงเนื้อหาและการตั้งค่าของตัวเอง
การบันทึก โทรศัพท์ และความเป็นส่วนตัว
- ลิงก์และตัวเลือกชั้นบันทึกอัตโนมัติในเบราว์เซอร์นี้ แม้ยังตั้งไม่เสร็จ โหมดส่วนตัวอาจไม่เก็บ
- ลิงก์รวมและ QR เก็บการจัดวางทั้งหมด ตั้งค่าบนคอมพิวเตอร์ สแกนครั้งเดียว แล้วบุ๊กมาร์กบนโทรศัพท์ การเปิดลิงก์ยังบันทึกการตั้งค่าในเบราว์เซอร์โทรศัพท์ด้วย
- การแก้บนคอมพิวเตอร์ไม่อัปเดตลิงก์เก่า คัดลอกหรือสแกนลิงก์ใหม่หลังแก้ ไม่มีการซิงก์ผ่าน session ID
- เก็บลิงก์รวมและ QR เป็นความลับเช่นเดียวกับลิงก์โอเวอร์เลย์
- SSN ต้องยังจับข้อมูลอยู่ และโทรศัพท์ต้องเข้าถึงเซิร์ฟเวอร์เดียวกับลิงก์ต้นฉบับ
localhostหรือ127.0.0.1หมายถึงโทรศัพท์เครื่องนั้นเอง - ลิงก์ยาวมากอาจใส่ QR ไม่ได้ แต่ยังคัดลอกลิงก์ได้
สูตร OBS: คอลัมน์แชตซ้ายพร้อมเอฟเฟกต์เต็มจอ
ไม่ต้องใช้ CSS แต่ละชั้นมีพื้นที่ของตัวเอง ตั้ง Browser Source ใน OBS เป็น 1920×1080 เพิ่มชั้นล่างก่อน และกรอกเฉพาะตัวเลข ไม่มีจุลภาคหรือ “px” ใต้ ขนาดและตำแหน่ง.
| เลเยอร์ | ความกว้าง | ความสูง | ซ้าย | บน |
|---|---|---|---|---|
| 1. แชตสด / แผงด็อก | 450 | 1000 | 0 | 80 |
| 2. ตัวนับ Hype | 450 | 80 | 0 | 0 |
| 3. กำแพงอีโมจิ / อีโมต | 1920 | 1080 | 0 | 0 |
| 4. แชตเด่น (Featured Chat) | 1470 | 1080 | 450 | 0 |
| 5. NinjaBacker (ไม่บังคับ) | 1920 | 1080 | 0 | 0 |
พื้นที่บน 80 พิกเซลใช้แสดง Hype และคอลัมน์แชตอยู่ด้านล่าง ต้องการให้แชตเต็มความสูงหลัง Hype? ตั้งความสูง Live Chat เป็น 1080 และระยะบนเป็น 0 ขนาดฉากอื่นต้องใช้ตัวเลขต่างกัน
- วางลิงก์โอเวอร์เลย์แบบเต็ม คัดลอกจาก Browser Source ที่มีอยู่ เพื่อคงเซสชัน รหัสผ่าน สไตล์ และการเชื่อมต่อไว้ คง พื้นหลัง SSN โปร่งใส ไว้ การครอป การแปลง ตัวกรอง และ Custom CSS ของ OBS ไม่อยู่ในลิงก์ จึงไม่ย้ายตามไป
- จัด Hype กึ่งกลางคอลัมน์ บน
hype.htmlให้ใช้&align=centerแทนที่ค่าalign=leftหรือalign=rightแล้วลบalignrightหากต้องการแบบกะทัดรัด ลอง&combineall&hidetitle&style=compact&scale=0.75(แทนค่าที่มีอยู่) เพิ่มความสูงชั้น Hype หากสไตล์ต้องใช้พื้นที่ - วาง Featured Chat ข้างคอลัมน์แชต ตั้งค่า ซ้าย = 450 และ ความกว้าง = 1470 รวมกัน (450 + 1470 = 1920) การเลื่อนชั้นกว้าง 1920 ไปขวาจะตัดขอบออก เพิ่ม
¢erเป็นfeatured.htmlเพื่อจัดข้อความสั้นกลางพื้นที่นั้น หากต้องการกลางทั้งฉาก ใช้ Left 0, Width 1920 และ¢er. - วาง NinjaBacker ท้ายสุด (ไม่บังคับ) วางลิงก์โอเวอร์เลย์สำหรับผู้ชมเป็นชั้นบนสุด พร้อมตั้งแอนิเมชันเข้าจากขวา ตัวรวมกำหนดพื้นที่และลำดับ ส่วน NinjaBacker กำหนดแอนิเมชันเอง พื้นหลังต้องโปร่งใสและเว็บไซต์ต้องอนุญาตการฝัง ชั้นนี้ไม่ได้อยู่ในตัวอย่างที่ทดสอบ
- ดูตัวอย่างที่ 1920×1080 ส่งแชตที่มีอีโมจิ เลือกข้อความเด่นจาก Dock และเปิดข้อมูล Hype ใน SSN แชตปกติไม่เลือกข้อความเด่นให้เอง
- คัดลอกลิงก์รวมใหม่ไปใส่ใน OBS ตั้ง Browser Source เป็นกว้าง 1920 สูง 1080 ขนาดตัวอย่างไม่กำหนดค่านี้ จัดให้พอดีฉากโดยไม่ครอป หลังเปลี่ยนการจัดวางทุกครั้ง ให้คัดลอกลิงก์ใหม่ ลิงก์เก่ายังคงแบบเก่า
ประสิทธิภาพ: Browser Source เดียวยังต้องรันทุกโอเวอร์เลย์ภายใน จำนวนแหล่ง OBS น้อยลงไม่รับประกันว่าจะใช้ CPU หรือหน่วยความจำน้อยลง ปิดหน้าตัวอย่างเมื่อเสร็จ แล้วเปรียบเทียบ OBS ขณะปิดแหล่งเก่า ยังไม่ได้ทดสอบประสิทธิภาพ M1 Mac หรือลิงก์ NinjaBacker ของคุณ คุณแยก Live Chat ไว้และรวมเฉพาะส่วนที่เหลือได้
หากเลเยอร์ว่างหรือบังแชต
| ปัญหา | ลองวิธีนี้ |
|---|---|
| ชั้นหนึ่งว่าง | เปิดลิงก์ต้นฉบับแยกก่อน แจ้งเตือนจะว่างจนมีเหตุการณ์ การรวมไม่ได้จับข้อมูลเพิ่ม |
| ชั้นหนึ่งมีพื้นหลังทึบ | ความโปร่งใสอัตโนมัติใช้ได้กับ dock.html, featured.html, multi-alerts.html, และ minecraft.html หน้าอื่นต้องตั้งความโปร่งใสของตัวเอง บางเว็บไซต์ภายนอกไม่อนุญาตให้ฝัง |
| แตะหรือเลื่อนแชตไม่ได้ | ชั้นโปร่งใสก็อาจบังการแตะได้ ปิด อนุญาตการแตะและเลื่อน บนชั้นเหนือแชตที่ไม่ต้องใช้ |
| โทรศัพท์ไม่มีเสียง | โทรศัพท์อาจต้องแตะก่อนเล่นเสียง เปิดให้แตะชั้นนั้นแล้วแตะ ทดสอบบนโทรศัพท์จริงก่อนใช้งาน |