Nola funtzionatzen duen MousePlayer-ek

Gure jarraipen-arkitekturari, gailuen arteko pantaila-bereizmenen kudeaketari eta sistemaren mugei buruzko gida erraza.

1. Zergatik ez dugun bideo-grabaziorik erabiltzen

Ohiko uste oker bat da analisi bisualeko tresnek bisitariaren pantailaren bideo-fitxategi estandarrak (MP4 edo WebM, esaterako) grabatzen dituztela. Horrek banda-zabalera izugarria kontsumituko luke, zure webgunea asko motelduko luke eta testu lauso eta irakurgaitza sortuko luke.

Horren ordez, MousePlayer-ek teknologia arin bat erabiltzen du: DOM kapturen telemetria. Honela funtzionatzen du oinarrian:

Egituraren kaptura

Bisitari batek zure orria irekitzen duenean, gure scriptak zure HTMLaren eta estilo-egituraren testuzko «planoa» hartzen du. Elementuak non dauden grabatzen du, zure orriaren irudi- edo bideo-fitxategiak kopiatu gabe; erreprodukzioan, erreproduzitzaileak jatorrizko helbidetik kargatzen ditu irudiak. Salbuespena canvas elementuak dira: haien edukia irudi gisa transmititzen da (ikus behean).

Koordenatuen telemetria

Erabiltzaileak interakzioa duen bitartean, gertaera-jario bat grabatzen dugu: saguaren posizioak, korritze-sakonera, kliken helburuak eta nabigatzailearen tamaina-aldaketak, baita orriaren beraren aldaketak eta, ezarpenen arabera, kontsolako mezuak, huts egindako edo eskaera motelak eta karga-denboraren neurketak ere (Web Vitals). Mugimenduak eta klikak txikiak dira; orriaren kapturak eta aldaketak askoz handiagoak izan daitezke orriaren arabera, eta konprimituta transmititzen dira.

Antzokiko erreprodukzioa

Zure aginte-panelean saio bat ikusten duzunean, gure erreproduzitzaileak orria birsortzen du grabatutako planoarekin eta kurtsore birtual bat mugitzen du haren gainean denbora errealean, testua erabat garbi mantenduz.

Arina izateko eraikia: scripta asinkronoki kargatzen da eta bideoaren ordez zenbakizko datu-puntu txikiak transmititzen ditu; horrek bere eragina txikia izatea ahalbidetzen du. Zure Core Web Vitals metriketan zer esan nahi duen zure orrien, ostalaritzaren eta bisitariaren sarearen araberakoa da; beraz, neurtu zure webgunean, gure datu bat hartu beharrean. Ez da karga-abiadura zehatzik bermatzen – ikus 20. atala dokumentu honetan: Zerbitzu-baldintzak.

2. Pantaila-bereizmenak & gailu mugikorrak kudeatzea

Gaurko erabiltzaileek denetarik erabiltzen dute nabigatzeko, smartphone trinkoetatik mahaigaineko 4K monitore ultrazabaletaraino. Webguneek beren diseinuak automatikoki mugitu, tolestu eta berrantolatzen dituzte pantaila-zabalera desberdinetara egokitzeko; Responsive Web Design deritzo kontzeptu horri.

Nola egokitzen garen bisitariaren ikuspegi-eremu zehatzera

Erreprodukzioa desitxuratuta ez agertzeko, MousePlayer-ek bisitariaren ikuspegi-eremuaren neurri zehatzak grabatzen ditu (adibidez, 390x844 smartphone baterako edo 1920x1080 mahaigaineko monitore baterako). Antzoki-erreproduzitzailea irekitzean, gure motorrak bisitariaren jatorrizko pantaila-proportzioa zehazki islatzen duen eskalatutako ingurune isolatu bat sortzen du.

Mahaigaineko & eramangarrietako pantailak

Ordenagailu estandarretan, saguaren etengabeko mugimendua eta fitxa anitzeko nabigazioa jasotzen ditugu nabigatzailearen saio berean. Erakuslea gainean jartzean irekitzen diren menuak erreprodukzioan agertzen dira horretarako orriak dokumentua aldatzen duenean; CSS hutsezko hover efektua ez da dokumentuan ikusten eta ez da erreprodukzioan birsortzen.

Smartphoneak & tabletak

Ukipen-pantailek ez dute gainetik dabilen sagu-kurtsorerik. MousePlayer automatikoki egokitzen da ukitu-keinuak, hatzezko korritzea eta orientazio-aldaketak (bertikala eta horizontala) grabatuz.

Saioaren erdiko tamaina-aldaketen erronka

Bisitari batek tableta biratzen badu edo mahaigaineko nabigatzaile-leihoaren tamaina aldatzen badu saioaren erdian, webgunearen diseinua dinamikoki aldatzen da. MousePlayer-ek leihoaren tamaina-aldaketak jasotzen ditu eta erreprodukzio-eremua unean bertan egokitzen du etenik gabe, interakzioaren testuingurua mantentzeko.

3. Sistemaren mugak & muga teknikoak

Erabiltzailearen pribatutasuna errespetatzeko, nabigatzailearen segurtasuna mantentzeko eta datu-prozesamendua azkarra izateko, MousePlayer-ek definitutako muga teknikoen barruan funtzionatzen du:

Sistemaren muga Nola kudeatzen duen MousePlayer-ek
iFrameak Zure orriaren jatorri bereko iframeak beren edukiarekin eta barruko interakzioarekin batera grabatzen dira. Beste jatorri bateko eduki txertatua (adib. YouTube erreproduzitzaileak, Stripe ordainketa-inprimakiak) ezin da barrutik grabatu nabigatzailearen segurtasun-politikengatik (Same-Origin Policy); erreprodukzioan leku-marka gisa agertzen da eta ez da bertan kargatzen.
Sarrera-eremu sentikorrak (PII) Pasahitz- eta ordainketa-eremuak bisitariaren gailuan maskaratzen dira maskaratze-maila guztietan, eta inprimakiko sarrera guztien maskaratze osoa lehenetsia da propietate bakoitzean. Idatzi dela ikusten duzu, ez zer idatzi den. Bi muga daude: bi maskaratze-maila ahulagoak gure idatzizko onespenarekin soilik aktibatzen dira, eta maskaratzea ez da inoiz iristen zure orriak berak dokumentuan idazten duenera – helbidea erakusten duen berrespen-orria kapturaren parte da. Biak dokumentu honetan azaltzen dira: DPA.
Canvas & WebGL elementuak Canvas baten edukia irudi gisa grabatzen da: behin orriaren kapturarekin eta berriro aldatzen den bakoitzean, gehienez segundo bakoitzeko behin gutxi gorabehera eta tamaina-muga batekin. Beraz, animazio leunak fotograma-sekuentzia gisa agertzen dira. Ez da irudirik transmititzen maskaratutako eremuetan edo beste jatorri bateko irudiak dituzten canvas elementuetan; WebGL edukia hutsik gera daiteke.
Web Components (Shadow DOM) Shadow root irekiak beren edukiarekin batera grabatzen dira. Itxitako shadow rootak ez dira scriptentzat eskuragarriak; haien edukia erreprodukzioan falta da.
Garraioa & nabigatzaile-biltegiratzea Datuak WebSocket konexio zifratu baten bidez bidaltzen dira (HTTPS/WSS). Ezin bada ezarri, proxy batengatik adibidez, scriptak HTTP bide zifratu bat erabiltzen du ordez; orriaren kaptura oso handiak bereizita kargatzen dira HTTPS bidez. MousePlayer-ek ez du cookierik ezartzen; zure webguneko nabigatzailearen local storage eta session storage erabiltzen ditu.
Jarduerarik gabeko AFK aldiak Bisitari batek fitxa irekita utzi eta 20 minutuz alde egiten badu, gure motorrak automatikoki hautematen du jarduerarik eza eta etenaldi hori konprimitzen du erreprodukzioan, pantaila estatikoak ikusten denborarik gal ez dezazun.