MousePlayer ทำงานอย่างไร

1. ทำไมเราไม่บันทึกวิดีโอ

มักเข้าใจผิดว่าเครื่องมือวิเคราะห์ภาพบันทึกหน้าจอเป็นวิดีโอมาตรฐาน เช่น MP4 หรือ WebM วิธีนั้นใช้แบนด์วิดท์มหาศาล ทำให้เว็บไซต์ช้าลงมาก และข้อความเบลออ่านยาก

MousePlayer ใช้เทคโนโลยีเบาที่เรียกว่า เทเลเมทรีภาพสแนปช็อต DOM แทน หลักการทำงานมีดังนี้:

2. ความละเอียดหน้าจอ & อุปกรณ์มือถือ

ผู้ใช้ปัจจุบันใช้ตั้งแต่สมาร์ตโฟนเล็กจนถึงจอเดสก์ท็อป 4K แบบกว้างพิเศษ เว็บไซต์ย้าย พับ และจัดเลย์เอาต์ใหม่อัตโนมัติให้พอดีความกว้างต่างกัน เรียกว่า Responsive Web Design

ทำให้ตรงพื้นที่แสดงผลจริงของผู้เข้าชมอย่างไร

เพื่อไม่ให้ภาพเล่นย้อนหลังบิดเบี้ยว MousePlayer บันทึกขนาดพื้นที่แสดงผลที่แน่นอน (เช่น 390x844 สำหรับสมาร์ตโฟน หรือ 1920x1080 สำหรับจอเดสก์ท็อป) เมื่อเปิดโปรแกรมเล่นโรงภาพยนตร์ ระบบสร้างแซนด์บ็อกซ์ปรับสเกลให้ตรงอัตราส่วนหน้าจอเดิมอย่างแม่นยำ

ความท้าทายเมื่อเปลี่ยนขนาดกลางเซสชัน

หากผู้เข้าชมหมุนแท็บเล็ตหรือปรับหน้าต่างระหว่างเซสชัน เลย์เอาต์จะเปลี่ยนแบบไดนามิก MousePlayer เก็บเหตุการณ์เปลี่ยนขนาดแล้วปรับพื้นที่เล่นทันทีอย่างต่อเนื่อง จึงรักษาบริบทการโต้ตอบ

3. ขีดจำกัดระบบ & ขอบเขตเทคนิค

เพื่อเคารพความเป็นส่วนตัว รักษาความปลอดภัยเบราว์เซอร์ และประมวลผลรวดเร็ว MousePlayer ทำงานภายในขอบเขตทางเทคนิคดังนี้:

ขอบเขตระบบ	วิธีที่ MousePlayer จัดการ
iFrames	iframe ที่มี origin เดียวกับหน้าจะบันทึกทั้งเนื้อหาและการโต้ตอบ เนื้อหาฝังจาก origin อื่น เช่น YouTube หรือแบบฟอร์มชำระเงิน Stripe บันทึกภายในไม่ได้เพราะนโยบายความปลอดภัยเบราว์เซอร์ (Same-Origin Policy) จะแสดงเป็นพื้นที่แทนและไม่โหลดในการเล่นย้อนหลัง
ช่องข้อมูลอ่อนไหว (PII)	ปกปิดช่องรหัสผ่านและชำระเงินบนอุปกรณ์ผู้เข้าชมทุกระดับ และค่าเริ่มต้นทุกทรัพยากรคือปกปิดข้อมูลแบบฟอร์มทั้งหมด เห็นว่าพิมพ์แต่ไม่เห็นข้อความ มีข้อจำกัดสองข้อ: ระดับที่อ่อนกว่าสองระดับต้องได้รับอนุมัติเป็นลายลักษณ์อักษร และการปกปิดไม่ครอบคลุมสิ่งที่หน้าเว็บแสดงในเอกสาร – หน้ายืนยันที่แสดงที่อยู่จึงเป็นส่วนหนึ่งของภาพสแนปช็อต อธิบายทั้งสองข้อใน DPA
องค์ประกอบ Canvas & WebGL	เนื้อหา canvas บันทึกเป็นภาพครั้งแรกพร้อมสแนปช็อต แล้วทุกครั้งที่เปลี่ยน โดยสูงสุดประมาณหนึ่งครั้งต่อวินาทีและจำกัดขนาด ภาพเคลื่อนไหวลื่นไหลจึงเป็นลำดับเฟรม ไม่ส่งภาพในพื้นที่ปกปิดหรือ canvas ที่มีภาพ origin อื่น ส่วน WebGL อาจว่าง
Web Components (Shadow DOM)	บันทึก shadow root แบบเปิดพร้อมเนื้อหา สคริปต์เข้าถึงแบบปิดไม่ได้ เนื้อหาจึงไม่ปรากฏในการเล่นย้อนหลัง
การส่งข้อมูล & พื้นที่เก็บเบราว์เซอร์	ส่งข้อมูลผ่าน WebSocket เข้ารหัส (HTTPS/WSS) หากเชื่อมไม่ได้ เช่น เพราะพร็อกซี สคริปต์เปลี่ยนไปเส้นทาง HTTP เข้ารหัส ภาพสแนปช็อตใหญ่มากอัปโหลดแยกผ่าน HTTPS MousePlayer ไม่ตั้งคุกกี้ ใช้ local storage และ session storage บนเว็บไซต์ของคุณ
ช่วงว่าง AFK	หากผู้เข้าชมเปิดแท็บทิ้งไว้แล้วเดินออกไป 20 นาที ระบบตรวจช่วงไม่ใช้งานอัตโนมัติและย่นช่วงว่างในการเล่นย้อนหลัง จึงไม่เสียเวลาดูภาพนิ่ง