หลายช่องและโอเวอร์เลย์แยก

อ่านทุกแชตในแผงด็อกเดียว พร้อมเลือกว่าจะให้แต่ละโอเวอร์เลย์ผู้ชมแสดงแพลตฟอร์มใด

1. รวมการเก็บข้อมูลไว้ในเซสชันเดียว

เพิ่มแชตต้นทางที่ต้องการใน SSN แล้วตรวจว่าข้อความใหม่จากแต่ละแหล่งไปถึงมุมมองเดียวกันที่ไม่กรอง คือ แผงด็อก Streaming Chat เก็บแผงด็อกนั้นไว้เป็นมุมมองผู้ควบคุม

คัดลอกลิงก์ที่สร้างเพื่อคงค่าเซสชัน รหัสผ่าน รุ่น และเซิร์ฟเวอร์ไว้ครบ เพิ่มมุมมองผู้ชมแต่ละอันเป็นแหล่งเบราว์เซอร์ OBS แยก ตั้งชื่อแหล่งข้อมูล OBS ให้เข้าใจง่าย เช่น แชต Twitch และ แชต YouTube.

  1. จับข้อมูล Twitch + YouTube
  2. เซสชัน SSN เดียว แผงด็อกผู้ควบคุมเห็นทั้งสองแหล่ง
  3. มุมมอง 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 แยกเมื่อการเก็บข้อมูลรายงานประเภทนั้น ดู ประเภทแหล่งข้อมูล.

4. สองช่องบนแพลตฟอร์มเดียวกัน

onlyfrom=twitch เลือก Twitch ในฐานะแพลตฟอร์ม ไม่ใช่ช่อง Twitch เฉพาะ ชื่อช่องและชื่อสตรีมเป็นเมทาดาทา ไม่ใช่ชื่อตัวกรอง URL ที่ใช้แทนกันได้ เพิ่ม &showchannelname เพื่อแสดงชื่อช่องเมื่อแหล่งข้อมูลให้มา

สำหรับการกรองแผงด็อกขั้นสูง &filtertid=123 รับรหัสแท็บต้นทางแบบตัวเลข และรองรับหลายรหัสคั่นด้วยจุลภาค ตรวจเพย์โหลดที่เก็บจริงเพื่อดู tid (ดู เอกสารอ้างอิงอีเวนต์ และ คำสั่งและ API) อย่าใช้รหัสช่องของแพลตฟอร์มตรงนี้ รหัสแท็บอาจเปลี่ยนเมื่อเปิดแหล่งข้อมูลใหม่ และแหล่งที่ไม่มีรหัสแท็บตรงกันอาจถูกตัดออก นี่เป็นตัวเลือกของแผงด็อก ไม่ใช่ตัวกรองช่องทั่วไปของ Featured Chat

สำหรับงานถ่ายทอดสดที่เป็นอิสระจากกันทั้งหมด ให้ใช้ชุดการเก็บข้อมูล/โปรไฟล์แยกพร้อมเซสชันต่างกัน และเปิดเฉพาะแหล่งข้อมูลที่ต้องการสำหรับแต่ละงาน การให้โอเวอร์เลย์ใช้เซสชันอื่นโดยไม่มีการเก็บข้อมูลที่ตรงกันจะทำให้ไม่ทำงาน ส่วนค่าของโอเวอร์เลย์ label ระบุหน้าเพื่อกำหนดเส้นทาง ไม่ใช่ตัวกรองช่อง

5. ตรวจสอบมุมมองผู้ชมแต่ละแบบ

  1. ส่งข้อความทดสอบ Twitch และ YouTube ที่สมมติขึ้นเข้าสู่เซสชันแยก โดยใช้ สร้างข้อความทดสอบ.
  2. ยืนยันว่าทั้งคู่ปรากฏในแผงด็อกผู้ควบคุม และโอเวอร์เลย์แชตไหลแต่ละอันแสดงเฉพาะแหล่งข้อมูลที่ต้องการ
  3. เลือกแสดงแต่ละข้อความเด่นและทดสอบปุ่มล้าง ตรวจหน้าข้อความเด่นที่มองเห็นทั้งหมดหลังสลับแพลตฟอร์ม
  4. ทดสอบซ้ำด้วยข้อความจริงจากแต่ละแหล่งข้อมูลของคุณที่เชื่อมต่อ เพราะข้อความจำลองยืนยันรหัสแท็บต้นทางจริงไม่ได้

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

6. แชตและการแจ้งเตือนในแท็บเบราว์เซอร์เดียว

ใช้ รวมโอเวอร์เลย์ เพื่อซ้อน URL โอเวอร์เลย์ที่มีอยู่ในแท็บเดียวหรือแหล่งเบราว์เซอร์ OBS เดียว เหมาะกับการอ่านแชตบนโทรศัพท์ระหว่างไลฟ์ IRL

  1. วาง URL Streaming Chat Dock ที่สร้างในเลเยอร์ล่างสุด และ URL Multi-Stream Alert Box ในเลเยอร์บนสุด คงค่าเซสชัน รหัสผ่าน และตัวเลือกการเชื่อมต่อไว้ในทั้งสองลิงก์
  2. คงค่า พื้นหลัง SSN โปร่งใส ให้เลือกไว้ เปิด “อนุญาตการแตะและเลื่อนบนเลเยอร์นี้” สำหรับแชต และปิดตัวเลือกนี้สำหรับการแจ้งเตือน เพื่อไม่ให้บังการโต้ตอบแชต
  3. เลือก ดูตัวอย่าง, จากนั้น แสดง 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. แชตสด / แผงด็อก4501000080
2. ตัวนับ Hype4508000
3. กำแพงอีโมจิ / อีโมต1920108000
4. แชตเด่น (Featured Chat)147010804500
5. NinjaBacker (ไม่บังคับ)1920108000

80 พิกเซลแรกสงวนไว้ให้ Hype และเหลือคอลัมน์แชตกว้าง 450 พิกเซลด้านล่าง หากต้องการให้แชตใช้ความสูงเต็มอยู่หลัง Hype ให้ตั้งความสูง Live Chat เป็น 1080 และระยะบนเป็น 0 ฉากขนาดอื่นต้องใช้ค่าพิกเซลต่างกัน

  1. วาง URL โอเวอร์เลย์ฉบับเต็ม คัดลอกจากคุณสมบัติแหล่งเบราว์เซอร์ที่มีอยู่ โดยคงค่าเซสชัน รหัสผ่าน สไตล์ และการเชื่อมต่อ ให้เลือก พื้นหลัง SSN โปร่งใส ไว้ การครอบตัด การแปลง ฟิลเตอร์ และช่อง Custom CSS ของ OBS ไม่ได้อยู่ใน URL จึงไม่ถูกโอนมาด้วย
  2. จัด Hype ให้อยู่กึ่งกลางคอลัมน์ ใน hype.html URL ให้ตั้ง align=center (แทนที่ค่าเดิมของ align=left หรือ align=right แล้วลบ alignright หากมี) สำหรับ URL ที่มีอยู่แล้วเป็น ?session=... ให้ต่อท้าย &align=center สไตล์เริ่มต้นแบบกะทัดรัดที่เลือกใช้ได้คือ &combineall&hidetitle&style=compact&scale=0.75 ให้แทนที่ค่าเดิมแทนการเพิ่มซ้ำ เพิ่มความสูงเลเยอร์ Hype หากสไตล์ที่เลือกต้องการพื้นที่มากขึ้น
  3. จัด Featured Chat ไม่ให้ทับคอลัมน์แชต ตั้งค่า Left = 450 และ Width = 1470 ร่วมกัน: 450 + 1470 = 1920 การเลื่อนเลเยอร์กว้าง 1920 ไปทางขวา 450 จะทำให้ขอบขวาถูกตัด Featured Chat ยังคงวางข้อความใกล้ด้านล่างของพื้นที่ตัวเอง หากต้องการจัดข้อความสั้นให้อยู่กึ่งกลางภายในพื้นที่นั้น ให้เพิ่ม &center ใน featured.html URL หากต้องการจัดข้อความกึ่งกลางทั้งฉากแทน ให้ใช้ Left = 0, Width = 1920 และ &center.
  4. วาง NinjaBacker เหนือ Featured Chat วาง URL โอเวอร์เลย์ผู้ชมเป็นเลเยอร์สุดท้าย พร้อมการตั้งค่าแอนิเมชันเข้าจากขวาที่มีอยู่ ตัวรวมควบคุมพื้นที่และลำดับเลเยอร์ ส่วนโอเวอร์เลย์ NinjaBacker ควบคุมแอนิเมชันและตำแหน่งภายใน พื้นหลังต้องโปร่งใสและเว็บไซต์ต้องอนุญาตการฝัง เลเยอร์เสริมนี้ไม่ได้รวมอยู่ในการทดสอบตัวอย่างสี่โอเวอร์เลย์
  5. ดูตัวอย่างที่ 1920×1080 ส่งข้อความแชตทดสอบที่มีอีโมจิ เลือกข้อความเด่นจากแผงด็อก และเปิดข้อมูล Hype ใน SSN แชตปกติเพียงอย่างเดียวไม่เลือกข้อความ Featured Chat หากยังว่าง ให้ตรวจว่าแต่ละโอเวอร์เลย์ทำงานแยกกันได้
  6. คัดลอกลิงก์รวมใหม่ไปใส่ใน OBS ตั้ง Width ของแหล่งเบราว์เซอร์นั้นเป็น 1920 และ Height เป็น 1080 ขนาดตัวอย่างในตัวรวมไม่ได้ตั้งขนาด OBS ปรับแหล่งข้อมูลใหม่ให้พอดีฉากโดยไม่ครอบตัด หลังแก้เลย์เอาต์ทุกครั้ง ให้คัดลอกลิงก์รวมใหม่ ลิงก์เก่าใน OBS จะยังใช้เลย์เอาต์เดิม
ผลรวมที่ทดสอบแล้ว: Hype อยู่กึ่งกลางเหนือคอลัมน์แชตแคบด้านซ้าย อีโมจิทั่วฉาก และข้อความเด่นด้านล่างทางขวาของแชต
การทดสอบ Chromium จริงด้วยโอเวอร์เลย์ SSN สี่อันและฟีดทดสอบแยก ภาพนี้โปร่งใส โดยแสดงพื้นหลังเข้มเพื่อให้อ่านง่าย คลิกเพื่อดูขนาดเต็ม ฟอนต์ สี และระยะห่างข้อความมาจากการตั้งค่าโอเวอร์เลย์ของคุณเอง

ประสิทธิภาพ: แหล่งเบราว์เซอร์เดียวก็ยังรันโอเวอร์เลย์ที่ฝังแต่ละอันและการเชื่อมต่อของมัน การรวมลดจำนวนแหล่งข้อมูล OBS แต่ไม่รับประกันว่าจะใช้ CPU หรือหน่วยความจำน้อยลง ปิดตัวอย่างเบราว์เซอร์เมื่อเสร็จ แล้วเปรียบเทียบประสิทธิภาพ OBS ขณะปิดแหล่งข้อมูลเก่า ประสิทธิภาพ M1 macOS/OBS และ URL NinjaBacker ของคุณยังต้องตรวจในระบบจริง คุณแยก Live Chat ไว้และรวมเฉพาะโอเวอร์เลย์อื่นได้หากทำงานดีกว่า

หากเลเยอร์ว่างหรือบังแชต

  • เปิด URL ต้นฉบับแต่ละอันแยกกันก่อน การแจ้งเตือนปกติจะว่างจนกว่ามีเหตุการณ์เข้ามา การรวมหน้าไม่ได้เก็บเหตุการณ์ใหม่
  • ความโปร่งใสอัตโนมัติรองรับ dock.html, featured.html, multi-alerts.html, และ minecraft.html หน้าอื่นต้องใช้การตั้งค่าพื้นหลังโปร่งใสของตัวเอง บางเว็บไซต์ภายนอกบล็อกการฝังทั้งหมด
  • เลเยอร์โปร่งใสยังบังการแตะได้ ให้ปิด อนุญาตการแตะและเลื่อน บนทุกเลเยอร์เหนือแชตที่ไม่ต้องโต้ตอบ
  • เบราว์เซอร์มือถืออาจต้องโต้ตอบกับหน้าก่อนเล่นเสียง หากจำเป็น ให้เปิดการโต้ตอบสำหรับเลเยอร์นั้นแล้วแตะ ข้อจำกัดการเล่นอัตโนมัติของเบราว์เซอร์ยังมีผล ตรวจสอบเสียงบนโทรศัพท์จริงก่อนใช้งาน