1. รวมการเก็บข้อมูลไว้ในเซสชันเดียว
เพิ่มแชตต้นทางที่ต้องการใน SSN แล้วตรวจว่าข้อความใหม่จากแต่ละแหล่งไปถึงมุมมองเดียวกันที่ไม่กรอง คือ แผงด็อก Streaming Chat เก็บแผงด็อกนั้นไว้เป็นมุมมองผู้ควบคุม
คัดลอกลิงก์ที่สร้างเพื่อคงค่าเซสชัน รหัสผ่าน รุ่น และเซิร์ฟเวอร์ไว้ครบ เพิ่มมุมมองผู้ชมแต่ละอันเป็นแหล่งเบราว์เซอร์ OBS แยก ตั้งชื่อแหล่งข้อมูล OBS ให้เข้าใจง่าย เช่น แชต Twitch และ แชต YouTube.
- จับข้อมูล Twitch + YouTube
- เซสชัน SSN เดียว แผงด็อกผู้ควบคุมเห็นทั้งสองแหล่ง
- มุมมอง OBS เฉพาะ Twitch และเฉพาะ YouTube
2. แยกแชตไหลตามแพลตฟอร์ม
สำหรับแชตไหล ให้ทำสำเนาลิงก์ที่สร้างสองชุดของ dock.html URL ต่อท้ายตัวเลือกเหล่านี้ในสำเนาที่ตรงกัน:
| มุมมองผู้ชม | ต่อท้าย URL แผงด็อกของมัน |
|---|---|
| แชต 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 จากโอเวอร์เลย์อื่นจะใช้ได้ที่นี่ ใช้ youtubeshorts แยกเมื่อการเก็บข้อมูลรายงานประเภทนั้น ดู ประเภทแหล่งข้อมูล.
3. แยกข้อความที่เลือก
สำหรับแชตที่เลือกแทนแชตไหล ให้ทำสำเนาลิงก์ที่สร้างของ featured.html ลิงก์ แล้วเพิ่ม &onlyfrom=twitch ในสำเนาหนึ่ง และ &onlyfrom=youtube ในอีกสำเนา เปิดแผงด็อกผู้ควบคุมค้างไว้เพื่อเลือกข้อความ
ค่า Featured Chat ปัจจุบัน onlyfrom รับประเภทแหล่งข้อมูลเพียงประเภทเดียว อย่าคัดลอกตัวอย่างของแผงด็อกที่คั่นด้วยจุลภาคด้านบนไปใส่ในฟิลด์นั้นของ Featured Chat
4. สองช่องบนแพลตฟอร์มเดียวกัน
onlyfrom=twitch เลือก Twitch ในฐานะแพลตฟอร์ม ไม่ใช่ช่อง Twitch เฉพาะ ชื่อช่องและชื่อสตรีมเป็นเมทาดาทา ไม่ใช่ชื่อตัวกรอง URL ที่ใช้แทนกันได้ เพิ่ม &showchannelname เพื่อแสดงชื่อช่องเมื่อแหล่งข้อมูลให้มา
สำหรับการกรองแผงด็อกขั้นสูง &filtertid=123 รับรหัสแท็บต้นทางแบบตัวเลข และรองรับหลายรหัสคั่นด้วยจุลภาค ตรวจเพย์โหลดที่เก็บจริงเพื่อดู tid (ดู เอกสารอ้างอิงอีเวนต์ และ คำสั่งและ API) อย่าใช้รหัสช่องของแพลตฟอร์มตรงนี้ รหัสแท็บอาจเปลี่ยนเมื่อเปิดแหล่งข้อมูลใหม่ และแหล่งที่ไม่มีรหัสแท็บตรงกันอาจถูกตัดออก นี่เป็นตัวเลือกของแผงด็อก ไม่ใช่ตัวกรองช่องทั่วไปของ Featured Chat
สำหรับงานถ่ายทอดสดที่เป็นอิสระจากกันทั้งหมด ให้ใช้ชุดการเก็บข้อมูล/โปรไฟล์แยกพร้อมเซสชันต่างกัน และเปิดเฉพาะแหล่งข้อมูลที่ต้องการสำหรับแต่ละงาน การให้โอเวอร์เลย์ใช้เซสชันอื่นโดยไม่มีการเก็บข้อมูลที่ตรงกันจะทำให้ไม่ทำงาน ส่วนค่าของโอเวอร์เลย์ label ระบุหน้าเพื่อกำหนดเส้นทาง ไม่ใช่ตัวกรองช่อง
5. ตรวจสอบมุมมองผู้ชมแต่ละแบบ
- ส่งข้อความทดสอบ Twitch และ YouTube ที่สมมติขึ้นเข้าสู่เซสชันแยก โดยใช้ สร้างข้อความทดสอบ.
- ยืนยันว่าทั้งคู่ปรากฏในแผงด็อกผู้ควบคุม และโอเวอร์เลย์แชตไหลแต่ละอันแสดงเฉพาะแหล่งข้อมูลที่ต้องการ
- เลือกแสดงแต่ละข้อความเด่นและทดสอบปุ่มล้าง ตรวจหน้าข้อความเด่นที่มองเห็นทั้งหมดหลังสลับแพลตฟอร์ม
- ทดสอบซ้ำด้วยข้อความจริงจากแต่ละแหล่งข้อมูลของคุณที่เชื่อมต่อ เพราะข้อความจำลองยืนยันรหัสแท็บต้นทางจริงไม่ได้
หากมุมมองว่าง ให้เอาตัวกรองออกชั่วคราว หากแชตกลับมา ให้ตรวจประเภทแหล่งข้อมูลหรือรหัสแท็บให้ตรง หากยังว่าง ให้ใช้ การแก้ปัญหาเซสชันและการกำหนดเส้นทาง การเปลี่ยนชื่อแหล่งข้อมูล OBS ไม่ได้อัปเดต URL ที่บันทึกไว้
6. แชตและการแจ้งเตือนในแท็บเบราว์เซอร์เดียว
ใช้ รวมโอเวอร์เลย์ เพื่อซ้อน URL โอเวอร์เลย์ที่มีอยู่ในแท็บเดียวหรือแหล่งเบราว์เซอร์ OBS เดียว เหมาะกับการอ่านแชตบนโทรศัพท์ระหว่างไลฟ์ IRL
- วาง URL Streaming Chat Dock ที่สร้างในเลเยอร์ล่างสุด และ URL Multi-Stream Alert Box ในเลเยอร์บนสุด คงค่าเซสชัน รหัสผ่าน และตัวเลือกการเชื่อมต่อไว้ในทั้งสองลิงก์
- คงค่า พื้นหลัง SSN โปร่งใส ให้เลือกไว้ เปิด “อนุญาตการแตะและเลื่อนบนเลเยอร์นี้” สำหรับแชต และปิดตัวเลือกนี้สำหรับการแจ้งเตือน เพื่อไม่ให้บังการโต้ตอบแชต
- เลือก ดูตัวอย่าง, จากนั้น แสดง QR code แล้วสแกนด้วยกล้องโทรศัพท์ หรือเลือก คัดลอกลิงก์รวม เพื่อวางผลลัพธ์ในแหล่งเบราว์เซอร์ มุมมองรวมไม่มีตัวควบคุมการตั้งค่า
เพิ่ม URL ได้สูงสุดแปดอัน และใช้ปุ่มลูกศรย้ายเลเยอร์ไว้หลังหรือหน้าอีกเลเยอร์ ค่าเริ่มต้นเลเยอร์จะเต็มเบราว์เซอร์ ขยาย ขนาดและตำแหน่ง บนเลเยอร์เพื่อตั้งความกว้าง ความสูง ระยะเยื้องซ้าย และระยะเยื้องบนเป็นพิกเซล (เช่น 450) หรือเปอร์เซ็นต์ (เช่น 100%) หากเว้นความกว้างและความสูงว่าง จะเต็มเบราว์เซอร์ หากเว้นระยะเยื้องว่าง จะเริ่มที่มุมซ้ายบน รีเซ็ตเป็นเต็มหน้าจอ ล้างตำแหน่งของเลเยอร์นั้น แต่ละโอเวอร์เลย์ยังคงเนื้อหาและการตั้งค่าของตัวเอง
สำหรับคอลัมน์แชตด้านซ้ายบนแหล่งเบราว์เซอร์ OBS ขนาด 1920×1080 ให้ตั้งความกว้างเลเยอร์แชตเป็น 450 ความสูงเป็น 1080 ระยะซ้ายเป็น 0 และระยะบนเป็น 0 เลเยอร์อื่นยังใช้เต็มหน้าจอได้ หากต้องการให้ Hype อยู่เหนือแชตและเลื่อน Featured Chat ไปทางขวา ให้ใช้ ตัวอย่างเลย์เอาต์ OBS ด้านล่าง ขนาดพิกเซลคงที่เมื่อเบราว์เซอร์เปลี่ยนขนาด ส่วนเปอร์เซ็นต์เปลี่ยนตามความกว้างหรือความสูงของเบราว์เซอร์
ใช้ลิงก์ที่แก้ไขได้เพื่อเปิดการตั้งค่าอีกครั้งพร้อม URL และตำแหน่งที่กรอกไว้ หากต้องการแก้ลิงก์รวมภายหลัง ให้เพิ่ม ?edit=1 ก่อนส่วน #.
ลิงก์และตัวเลือกเลเยอร์บันทึกอัตโนมัติในเบราว์เซอร์นี้ รวมถึงการตั้งค่าที่ยังไม่เสร็จ เปิด รวมโอเวอร์เลย์ เพื่อแก้ต่อ หรือเลือก ล้างการตั้งค่าที่บันทึก เพื่อเริ่มใหม่ พื้นที่จัดเก็บเบราว์เซอร์อาจใช้ไม่ได้หรือเป็นเพียงชั่วคราวในโหมดส่วนตัว
ลิงก์รวมและ QR code มีเลย์เอาต์และ URL ทั้งหมด ตั้งค่าบนเดสก์ท็อป สแกนครั้งเดียวบนมือถือ แล้วบุ๊กมาร์กมุมมองรวม การเปิดยังบันทึกการตั้งค่านั้นในเบราว์เซอร์โทรศัพท์ด้วย การเปลี่ยนบนเดสก์ท็อปไม่อัปเดตลิงก์เก่าอัตโนมัติ ให้คัดลอกหรือสแกนลิงก์ใหม่หลังแก้ไข ฟีเจอร์นี้ไม่ซิงค์การตั้งค่าผ่านรหัสเซสชัน
เก็บลิงก์รวมและ QR code เป็นความลับเช่นเดียวกับลิงก์โอเวอร์เลย์แต่ละอัน SSN ยังต้องเก็บข้อมูลอยู่ และโทรศัพท์ต้องเข้าถึงเซิร์ฟเวอร์ที่ URL เดิมใช้ได้ ที่อยู่ localhost หรือ 127.0.0.1 จะชี้ไปยังอุปกรณ์ที่เปิดลิงก์ URL ที่ยาวมากอาจเกินความจุ QR แต่ยังคัดลอกลิงก์รวมได้
ตัวอย่าง OBS: คอลัมน์แชตซ้ายพร้อมเอฟเฟกต์เต็มหน้าจอ
เลย์เอาต์นี้ไม่ต้องใช้ CSS แต่ละเลเยอร์มีพื้นที่เบราว์เซอร์ของตัวเอง ตั้งแหล่งเบราว์เซอร์ 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 และเหลือคอลัมน์แชตกว้าง 450 พิกเซลด้านล่าง หากต้องการให้แชตใช้ความสูงเต็มอยู่หลัง Hype ให้ตั้งความสูง Live Chat เป็น 1080 และระยะบนเป็น 0 ฉากขนาดอื่นต้องใช้ค่าพิกเซลต่างกัน
- วาง URL โอเวอร์เลย์ฉบับเต็ม คัดลอกจากคุณสมบัติแหล่งเบราว์เซอร์ที่มีอยู่ โดยคงค่าเซสชัน รหัสผ่าน สไตล์ และการเชื่อมต่อ ให้เลือก พื้นหลัง SSN โปร่งใส ไว้ การครอบตัด การแปลง ฟิลเตอร์ และช่อง Custom CSS ของ OBS ไม่ได้อยู่ใน URL จึงไม่ถูกโอนมาด้วย
- จัด Hype ให้อยู่กึ่งกลางคอลัมน์ ใน
hype.htmlURL ให้ตั้งalign=center(แทนที่ค่าเดิมของalign=leftหรือalign=rightแล้วลบalignrightหากมี) สำหรับ URL ที่มีอยู่แล้วเป็น?session=...ให้ต่อท้าย&align=centerสไตล์เริ่มต้นแบบกะทัดรัดที่เลือกใช้ได้คือ&combineall&hidetitle&style=compact&scale=0.75ให้แทนที่ค่าเดิมแทนการเพิ่มซ้ำ เพิ่มความสูงเลเยอร์ Hype หากสไตล์ที่เลือกต้องการพื้นที่มากขึ้น - จัด Featured Chat ไม่ให้ทับคอลัมน์แชต ตั้งค่า Left = 450 และ Width = 1470 ร่วมกัน: 450 + 1470 = 1920 การเลื่อนเลเยอร์กว้าง 1920 ไปทางขวา 450 จะทำให้ขอบขวาถูกตัด Featured Chat ยังคงวางข้อความใกล้ด้านล่างของพื้นที่ตัวเอง หากต้องการจัดข้อความสั้นให้อยู่กึ่งกลางภายในพื้นที่นั้น ให้เพิ่ม
¢erในfeatured.htmlURL หากต้องการจัดข้อความกึ่งกลางทั้งฉากแทน ให้ใช้ Left = 0, Width = 1920 และ¢er. - วาง NinjaBacker เหนือ Featured Chat วาง URL โอเวอร์เลย์ผู้ชมเป็นเลเยอร์สุดท้าย พร้อมการตั้งค่าแอนิเมชันเข้าจากขวาที่มีอยู่ ตัวรวมควบคุมพื้นที่และลำดับเลเยอร์ ส่วนโอเวอร์เลย์ NinjaBacker ควบคุมแอนิเมชันและตำแหน่งภายใน พื้นหลังต้องโปร่งใสและเว็บไซต์ต้องอนุญาตการฝัง เลเยอร์เสริมนี้ไม่ได้รวมอยู่ในการทดสอบตัวอย่างสี่โอเวอร์เลย์
- ดูตัวอย่างที่ 1920×1080 ส่งข้อความแชตทดสอบที่มีอีโมจิ เลือกข้อความเด่นจากแผงด็อก และเปิดข้อมูล Hype ใน SSN แชตปกติเพียงอย่างเดียวไม่เลือกข้อความ Featured Chat หากยังว่าง ให้ตรวจว่าแต่ละโอเวอร์เลย์ทำงานแยกกันได้
- คัดลอกลิงก์รวมใหม่ไปใส่ใน OBS ตั้ง Width ของแหล่งเบราว์เซอร์นั้นเป็น 1920 และ Height เป็น 1080 ขนาดตัวอย่างในตัวรวมไม่ได้ตั้งขนาด OBS ปรับแหล่งข้อมูลใหม่ให้พอดีฉากโดยไม่ครอบตัด หลังแก้เลย์เอาต์ทุกครั้ง ให้คัดลอกลิงก์รวมใหม่ ลิงก์เก่าใน OBS จะยังใช้เลย์เอาต์เดิม
ประสิทธิภาพ: แหล่งเบราว์เซอร์เดียวก็ยังรันโอเวอร์เลย์ที่ฝังแต่ละอันและการเชื่อมต่อของมัน การรวมลดจำนวนแหล่งข้อมูล OBS แต่ไม่รับประกันว่าจะใช้ CPU หรือหน่วยความจำน้อยลง ปิดตัวอย่างเบราว์เซอร์เมื่อเสร็จ แล้วเปรียบเทียบประสิทธิภาพ OBS ขณะปิดแหล่งข้อมูลเก่า ประสิทธิภาพ M1 macOS/OBS และ URL NinjaBacker ของคุณยังต้องตรวจในระบบจริง คุณแยก Live Chat ไว้และรวมเฉพาะโอเวอร์เลย์อื่นได้หากทำงานดีกว่า
หากเลเยอร์ว่างหรือบังแชต
- เปิด URL ต้นฉบับแต่ละอันแยกกันก่อน การแจ้งเตือนปกติจะว่างจนกว่ามีเหตุการณ์เข้ามา การรวมหน้าไม่ได้เก็บเหตุการณ์ใหม่
- ความโปร่งใสอัตโนมัติรองรับ
dock.html,featured.html,multi-alerts.html, และminecraft.htmlหน้าอื่นต้องใช้การตั้งค่าพื้นหลังโปร่งใสของตัวเอง บางเว็บไซต์ภายนอกบล็อกการฝังทั้งหมด - เลเยอร์โปร่งใสยังบังการแตะได้ ให้ปิด อนุญาตการแตะและเลื่อน บนทุกเลเยอร์เหนือแชตที่ไม่ต้องโต้ตอบ
- เบราว์เซอร์มือถืออาจต้องโต้ตอบกับหน้าก่อนเล่นเสียง หากจำเป็น ให้เปิดการโต้ตอบสำหรับเลเยอร์นั้นแล้วแตะ ข้อจำกัดการเล่นอัตโนมัติของเบราว์เซอร์ยังมีผล ตรวจสอบเสียงบนโทรศัพท์จริงก่อนใช้งาน