Cara MousePlayer Lumampah
Pandhuan prasaja arsitektur pelacakan, pangaturan resolusi layar lintas piranti lan wates sistem.
1. Sebab Kita Boten Ngrekam Video
Kathah ingkang nginten piranti analitik visual ngrekam berkas video standar(kados MP4 utawi WebM)saking layar pengunjung. Punika badhe ngginakaken bandwidth ageng, ngalemaken situs lan damel teks burem angel dipunwaos.
Minangka gantos, MousePlayer ngagem teknologi entheng ingkang dipunsebat Telemetri Gambar DOM. Punika cara dhasaripun:
Gambar Cithak Biru
Nalika pengunjung mbikak kaca, skrip kita mundhut “cithak biru” adhedhasar teks saking HTML lan struktur gaya. Ngrekam posisi unsur tanpa nyalin berkas gambar utawi video kaca; pamuter momot gambar saking alamat asli nalika rekaman dipunpirsani. Pangecualianipun unsur canvas, ingkang kontenipun dipunkintun minangka gambar(pirsani ngandhap).
Telemetri Koordinat
Nalika panganggo tumindak, kita ngrekam aliran prastawa: posisi mouse, jeroning gulung, tujuan klik lan owah-owahan ukuran browser, ugi owah-owahan kaca piyambak lan, miturut setelan, pesen konsol, panjaluk gagal utawi alon lan pangukuran wekdal momot(Web Vitals). Gerakan lan klik alit; gambar kaca lan owah-owahan saged langkung ageng miturut kaca lan dipunkintun kanthi kompresi.
Pamuteran Teater
Nalika panjenengan mirsani sesi ing dasbor, pamuter damel kaca malih mawi cithak biru dipunrekam lan ngobahaken panuding virtual ing wekdal nyata, teks tetep cetha.
Dipunrancang tetep entheng: skrip dipunmomot asinkron lan ngirim titik data angka alit, sanès video, mila jejegipun piyambak alit. Pangaribawa dhateng Core Web Vitals gumantung kaca, hosting lan jaringan pengunjung, mila ukur ing situs piyambak, boten namung pitados angka kita. Boten wonten kacepetan momot tartamtu ingkang dipunjamin – pirsani pérangan 20 saking Syarat Layanan.
2. Pangaturan Resolusi Layar & Piranti Seluler
Panganggo sapunika njelajah mawi smartphone alit dumugi monitor komputer 4K ultra-wiyar. Situs otomatis mindhah, nglipet lan nata malih tata letak kangge manéka jembar layar — dipunsebat Responsive Web Design.
Cara Nyocogaken Wilayah Tampilan Pengunjung Persis
Supados rekaman boten katingal klentu, MousePlayer ngrekam ukuran wilayah tampilan persis(umpaminipun 390x844 kangge smartphone utawi 1920x1080 kangge monitor komputer). Nalika mbikak pamuter Teater, mesin kita damel sandbox mawi skala ingkang nyalin rasio layar asli kanthi persis.
Layar Komputer & Laptop
Ing komputer lumrah, kita ngrekam gerakan mouse terus lan navigasi kathah tab ing sesi browser ingkang sami. Menu ingkang kabikak nalika hover katingal ing rekaman menawi kaca ngowahi dokumen; efek hover CSS murni boten katingal ing dokumen lan boten dipundamel malih.
Smartphone & Tablet
Layar tutul boten gadhah panuding mouse nglayang. MousePlayer otomatis nyelarasaken kanthi ngrekam tutul, gulung geser lan owah-owahan orientasi(potret utawi lanskap).
Tantangan Gantos Ukuran ing Tengah Sesi
Menawi pengunjung muter tablet utawi nggantos ukuran jendhela browser komputer ing tengah sesi, tata letak situs owah dinamis. MousePlayer ngrekam prastawa punika lan langsung nyelarasaken canvas pamuteran kanthi lancar supados konteks interaksi tetep.
3. Wates Sistem & Wates Teknis
Kangge ngajeni privasi panganggo, njagi keamanan browser lan ngolah data cepet, MousePlayer lumampah ing wates teknis ingkang dipuntemtokaken:
| Wates Sistem | Cara MousePlayer Nangani |
|---|---|
| iFrames | iframe saking origin ingkang sami kaliyan kaca dipunrekam kaliyan konten lan interaksi ing lebetipun. Konten sematan origin sanès(umpaminipun pamuter YouTube, formulir pambayaran Stripe)boten saged dipunrekam ing lebet amargi kabijakan keamanan browser(Same-Origin Policy); katingal minangka tengara gantos ing rekaman lan boten dipunmomot ing ngriku. |
| Kolom Input Sensitif(PII) | Kolom sandhi lan pambayaran dipunsamari ing piranti pengunjung ing saben tingkat, lan panyamaran jangkep sedaya input formulir punika gawan saben situs. Panjenengan mirsani bilih wonten ketikan, sanès isinipun. Kalih wates lumaku: kalih tingkat langkung ringkih namung dipunaktifaken mawi idin tulisan kita, lan panyamaran boten nate dumugi konten ingkang kaca panjenengan serat ing dokumen – kaca konfirmasi nampilaken alamat kalebet gambar kaca. Kalorone dipunandharaken ing DPA. |
| Unsur Canvas & WebGL | Konten canvas dipunrekam minangka gambar: sapisan kaliyan gambar kaca lan malih saben owah, paling kathah kirang langkung sapisan saben detik mawi wates ukuran. Animasi lancar mila katingal minangka urutan frame. Boten wonten gambar dipunkintun ing wilayah dipunsamari utawi unsur canvas mawi gambar origin sanès; konten WebGL saged tetep kosong. |
| Web Components(Shadow DOM) | Shadow root kabikak dipunrekam kaliyan kontenipun. Shadow root katutup boten saged dipunakses skrip; konten boten wonten ing rekaman. |
| Pangiriman & Panyimpenan Browser | Data dipunkintun liwat sambungan WebSocket terenkripsi(HTTPS/WSS). Menawi boten saged dipunsambung, umpaminipun amargi proxy, skrip ngagem rute HTTP terenkripsi; gambar kaca ageng sanget dipununggah kapisah liwat HTTPS. MousePlayer boten masang cookie; ngagem local storage lan session storage browser ing situs panjenengan. |
| Wekdal Boten Aktif AFK | Menawi pengunjung ngantosaken tab kabikak lan kesah 20 menit, mesin kita otomatis ngenali boten aktif lan nyekak sela nalika pamuteran supados panjenengan boten mbucal wekdal mirsani layar meneng. |