MousePlayer କିପରି କାମ କରେ
ଆମ ଟ୍ରାକିଂ ଗଠନ, ଭିନ୍ନ ଡିଭାଇସ୍ର ସ୍କ୍ରିନ୍ ରେଜଲୁସନ୍ ପରିଚାଳନା ଓ ସିଷ୍ଟମ୍ ସୀମାର ଏକ ସରଳ ମାର୍ଗଦର୍ଶିକା।
1. ଆମେ କାହିଁକି ଭିଡିଓ ରେକର୍ଡିଂ କରୁନାହୁଁ
ଏକ ସାଧାରଣ ଭୁଲ୍ ଧାରଣା ହେଉଛି ଦୃଶ୍ୟ ବିଶ୍ଳେଷଣ ସାଧନ ପରିଦର୍ଶକଙ୍କ ସ୍କ୍ରିନ୍ର ମାନକ ଭିଡିଓ ଫାଇଲ୍ (MP4 କିମ୍ବା WebM ପରି) ରେକର୍ଡ୍ କରେ। ଏହା ବହୁତ ବ୍ୟାଣ୍ଡୱିଡଥ୍ ଖର୍ଚ୍ଚ କରନ୍ତା, ୱେବସାଇଟ୍କୁ ଅତ୍ୟଧିକ ଧୀର କରନ୍ତା ଓ ଅସ୍ପଷ୍ଟ, ଅପଠନୀୟ ପାଠ୍ୟ ସୃଷ୍ଟି କରନ୍ତା।
ତାହା ପରିବର୍ତ୍ତେ MousePlayer ଏକ ହାଲୁକା ପ୍ରଯୁକ୍ତି ବ୍ୟବହାର କରେ, ଯାହାର ନାମ DOM ସ୍ନାପସଟ୍ ଟେଲିମେଟ୍ରି। ମୂଳ ସ୍ତରରେ ଏହା ଏପରି କାମ କରେ:
ଗଠନର ସ୍ନାପସଟ୍
ପରିଦର୍ଶକ ପୃଷ୍ଠା ଖୋଲିଲେ, ଆମ ସ୍କ୍ରିପ୍ଟ ଆପଣଙ୍କ HTML ଓ ଶୈଳୀ ଗଠନର ପାଠ୍ୟ ଆଧାରିତ “ନକ୍ସା” ନିଏ। ପୃଷ୍ଠାର ଚିତ୍ର କିମ୍ବା ଭିଡିଓ ଫାଇଲ୍ କପି ନକରି ଉପାଦାନ କେଉଁଠି ଅଛି ରେକର୍ଡ୍ କରେ; ରେକର୍ଡିଂ ଦେଖିବାବେଳେ ପ୍ଲେୟର୍ ମୂଳ ଠିକଣାରୁ ଚିତ୍ର ଲୋଡ୍ କରେ। ବ୍ୟତିକ୍ରମ ହେଉଛି canvas ଉପାଦାନ, ଯାହାର ବିଷୟବସ୍ତୁ ଚିତ୍ର ଭାବେ ପଠାଯାଏ (ତଳେ ଦେଖନ୍ତୁ)।
ସ୍ଥାନାଙ୍କ ଟେଲିମେଟ୍ରି
ବ୍ୟବହାରକାରୀ କାମ କରିବାବେଳେ ଆମେ ଇଭେଣ୍ଟ୍ ଧାରା ରେକର୍ଡ୍ କରୁ: ମାଉସ୍ ସ୍ଥାନ, ସ୍କ୍ରୋଲ୍ ଗଭୀରତା, କ୍ଲିକ୍ ଲକ୍ଷ୍ୟ ଓ ବ୍ରାଉଜର୍ ଆକାର ପରିବର୍ତ୍ତନ, ସହିତ ପୃଷ୍ଠାର ନିଜ ପରିବର୍ତ୍ତନ ଓ ସେଟିଂସ୍ ଅନୁସାରେ କନସୋଲ୍ ସନ୍ଦେଶ, ବିଫଳ କିମ୍ବା ଧୀର ଅନୁରୋଧ ଓ ଲୋଡ୍ ସମୟ ମାପ (Web Vitals)। ଗତି ଓ କ୍ଲିକ୍ ତଥ୍ୟ ଛୋଟ; ପୃଷ୍ଠା ସ୍ନାପସଟ୍ ଓ ପରିବର୍ତ୍ତନ ପୃଷ୍ଠା ଅନୁସାରେ ଯଥେଷ୍ଟ ବଡ଼ ହୋଇପାରେ ଓ ସଙ୍କୁଚିତ ଭାବେ ପଠାଯାଏ।
ଥିଏଟର୍ରେ ରେକର୍ଡିଂ ଦେଖିବା
ଡ୍ୟାଶବୋର୍ଡ୍ରେ ସେସନ୍ ଦେଖିବାବେଳେ, ଆମ ପ୍ଲେୟର୍ ରେକର୍ଡ୍ ନକ୍ସାରୁ ପୃଷ୍ଠା ପୁଣି ତିଆରି କରି ତାହା ଉପରେ ପ୍ରକୃତ ସମୟରେ ଏକ ଭର୍ଚୁଆଲ୍ ପଏଣ୍ଟର୍ ଚଲାଏ, ଏବଂ ପାଠ୍ୟ ସ୍ପଷ୍ଟ ରହେ।
ହାଲୁକା ରହିବା ପାଇଁ ତିଆରି: ସ୍କ୍ରିପ୍ଟ ଅସମକାଳୀନ ଭାବେ ଲୋଡ୍ ହୁଏ ଓ ଭିଡିଓ ପରିବର୍ତ୍ତେ ଛୋଟ ସଂଖ୍ୟାତ୍ମକ ତଥ୍ୟ ପଠାଏ, ତେଣୁ ଏହାର ନିଜ ପ୍ରଭାବ କମ୍ ରହେ। ଆପଣଙ୍କ Core Web Vitals ଉପରେ ଏହାର ଅର୍ଥ ଆପଣଙ୍କ ପୃଷ୍ଠା, ହୋଷ୍ଟିଂ ଓ ପରିଦର୍ଶକଙ୍କ ନେଟୱର୍କ ଉପରେ ନିର୍ଭର କରେ, ତେଣୁ ଆମଠାରୁ ସଂଖ୍ୟା ନନେଇ ନିଜ ସାଇଟ୍ରେ ମାପନ୍ତୁ। ନିର୍ଦ୍ଦିଷ୍ଟ ଲୋଡ୍ ବେଗର ଗ୍ୟାରେଣ୍ଟି ନାହିଁ – ଦେଖନ୍ତୁ ଧାରା 20, ସେବା ସର୍ତ୍ତାବଳୀ।
2. ସ୍କ୍ରିନ୍ ରେଜଲୁସନ୍ & ମୋବାଇଲ୍ ଡିଭାଇସ୍ ପରିଚାଳନା
ଆଜିର ବ୍ୟବହାରକାରୀ ଛୋଟ ସ୍ମାର୍ଟଫୋନ୍ଠାରୁ ଅତିଚଉଡ଼ା 4K ଡେସ୍କଟପ୍ ମନିଟର୍ ପର୍ଯ୍ୟନ୍ତ ସବୁଠାରେ ବ୍ରାଉଜ୍ କରନ୍ତି। ଭିନ୍ନ ସ୍କ୍ରିନ୍ ପ୍ରସ୍ଥରେ ଖାପ ଖାଇବାକୁ ୱେବସାଇଟ୍ ନିଜ ଲେଆଉଟ୍ ସ୍ୱୟଂଚାଳିତ ଭାବେ ବଦଳାଏ, ଭାଙ୍ଗେ ଓ ପୁଣି ସଜାଏ—ଏହାକୁ ରେସପନସିଭ୍ ୱେବ୍ ଡିଜାଇନ୍ କୁହାଯାଏ।
ପରିଦର୍ଶକଙ୍କ ଠିକ୍ ଦୃଶ୍ୟ ଆକାର କିପରି ମେଳାଉ
ରେକର୍ଡିଂ ବିକୃତ ନଦେଖାଯିବା ପାଇଁ MousePlayer ପରିଦର୍ଶକଙ୍କ ଠିକ୍ viewport ଆକାର ରେକର୍ଡ୍ କରେ (ଯଥା, 390x844 ସ୍ମାର୍ଟଫୋନ୍ ପାଇଁ କିମ୍ବା 1920x1080 ଡେସ୍କଟପ୍ ମନିଟର୍ ପାଇଁ)। ଆପଣ ଥିଏଟର୍ ପ୍ଲେୟର୍ ଖୋଲିଲେ, ଆମ ଇଞ୍ଜିନ୍ ପରିଦର୍ଶକଙ୍କ ମୂଳ ସ୍କ୍ରିନ୍ ଅନୁପାତ ସହ ଠିକ୍ ମେଳ ଖାଉଥିବା ମାପ ବଦଳାଯାଇଥିବା ଅଲଗା ପରିବେଶ ସୃଷ୍ଟି କରେ।
ଡେସ୍କଟପ୍ & ଲ୍ୟାପଟପ୍ ସ୍କ୍ରିନ୍
ସାଧାରଣ କମ୍ପ୍ୟୁଟର୍ରେ ସମାନ ବ୍ରାଉଜର୍ ସେସନ୍ ମଧ୍ୟରେ ଅବିରତ ମାଉସ୍ ଗତି ଓ ଏକାଧିକ ଟ୍ୟାବ୍ରେ ଯାତାୟାତ ରେକର୍ଡ୍ କରୁ। ମାଉସ୍ ରଖିଲେ ଖୋଲୁଥିବା ମେନୁ ଏହା କରିବାବେଳେ ପୃଷ୍ଠାର ଡକ୍ୟୁମେଣ୍ଟ୍ ବଦଳିଲେ ରେକର୍ଡିଂରେ ଦେଖାଯାଏ; କେବଳ CSS hover ପ୍ରଭାବ ଡକ୍ୟୁମେଣ୍ଟ୍ରେ ଦେଖାଯାଏ ନାହିଁ ଓ ରେକର୍ଡିଂରେ ପୁଣି ସୃଷ୍ଟି ହୁଏ ନାହିଁ।
ସ୍ମାର୍ଟଫୋନ୍ & ଟ୍ୟାବଲେଟ୍
ଟଚ୍ ସ୍କ୍ରିନ୍ରେ ଭାସୁଥିବା ମାଉସ୍ ପଏଣ୍ଟର୍ ନାହିଁ। MousePlayer ଟ୍ୟାପ୍, ସ୍ୱାଇପ୍ ସ୍କ୍ରୋଲ୍ ଓ ଦିଗ ପରିବର୍ତ୍ତନ (ଲମ୍ବା ବନାମ ଚଉଡ଼ା) ରେକର୍ଡ୍ କରି ସ୍ୱୟଂଚାଳିତ ଭାବେ ଖାପ ଖାଏ।
ସେସନ୍ ମଧ୍ୟରେ ଆକାର ପରିବର୍ତ୍ତନର ସମସ୍ୟା
ପରିଦର୍ଶକ ସେସନ୍ ମଧ୍ୟରେ ଟ୍ୟାବଲେଟ୍ ଘୁରାଇଲେ କିମ୍ବା ଡେସ୍କଟପ୍ ବ୍ରାଉଜର୍ ୱିଣ୍ଡୋର ଆକାର ବଦଳାଇଲେ, ୱେବସାଇଟ୍ ଲେଆଉଟ୍ ଗତିଶୀଳ ଭାବେ ବଦଳେ। MousePlayer ଏହି ଆକାର ପରିବର୍ତ୍ତନ ଇଭେଣ୍ଟ୍ ଧରେ ଓ କାର୍ଯ୍ୟର ପ୍ରସଙ୍ଗ ରଖିବାକୁ ପ୍ଲେବ୍ୟାକ୍ canvas କୁ ତତ୍କ୍ଷଣାତ୍ ସହଜରେ ସଜାଏ।
3. ସିଷ୍ଟମ୍ ସୀମା & ପ୍ରାଯୁକ୍ତିକ ସୀମାରେଖା
ବ୍ୟବହାରକାରୀଙ୍କ ଗୋପନୀୟତା, ବ୍ରାଉଜର୍ ସୁରକ୍ଷା ଓ ଦ୍ରୁତ ତଥ୍ୟ ପ୍ରକ୍ରିୟାକରଣ ପାଇଁ MousePlayer ନିର୍ଦ୍ଧାରିତ ପ୍ରାଯୁକ୍ତିକ ସୀମା ମଧ୍ୟରେ କାମ କରେ:
| ସିଷ୍ଟମ୍ ସୀମା | MousePlayer ଏହାକୁ କିପରି ପରିଚାଳନା କରେ |
|---|---|
| iFrames | ଆପଣଙ୍କ ପୃଷ୍ଠା ସହ ସମାନ ଉତ୍ସର iframe ଗୁଡ଼ିକ ସେମାନଙ୍କ ବିଷୟବସ୍ତୁ ଓ ଭିତର କାର୍ଯ୍ୟକଳାପ ସହ ରେକର୍ଡ୍ ହୁଅନ୍ତି। ଅନ୍ୟ ଉତ୍ସର ସନ୍ନିବେଶିତ ବିଷୟବସ୍ତୁ (ଯଥା, YouTube ପ୍ଲେୟର୍, Stripe ଦେୟ ଫର୍ମ) ବ୍ରାଉଜର୍ ସୁରକ୍ଷା ନୀତି (Same-Origin Policy) ଯୋଗୁଁ ଭିତରୁ ରେକର୍ଡ୍ ହୋଇପାରେ ନାହିଁ; ରେକର୍ଡିଂରେ ଖାଲି ସ୍ଥାନଚିହ୍ନ ଭାବେ ଦେଖାଯାଏ ଓ ସେଠାରେ ଲୋଡ୍ ହୁଏ ନାହିଁ। |
| ସମ୍ବେଦନଶୀଳ ଇନପୁଟ୍ ଫିଲ୍ଡ (PII) | ପ୍ରତ୍ୟେକ ମାସ୍କିଂ ସ୍ତରରେ ପରିଦର୍ଶକଙ୍କ ଡିଭାଇସ୍ରେ ପାସୱାର୍ଡ୍ ଓ ଦେୟ ଫିଲ୍ଡ ମାସ୍କ୍ ହୁଏ, ଏବଂ ପ୍ରତ୍ୟେକ ପ୍ରପର୍ଟିରେ ସମସ୍ତ ଫର୍ମ ଇନପୁଟ୍ର ପୂର୍ଣ୍ଣ ମାସ୍କିଂ ଡିଫଲ୍ଟ। ଆପଣ ଟାଇପ୍ ହୋଇଥିବା ଦେଖନ୍ତି, କଣ ଟାଇପ୍ ହୋଇଛି ନୁହେଁ। ଦୁଇଟି ସୀମା ଅଛି: କେବଳ ଆମର ଲିଖିତ ଅନୁମୋଦନରେ ଦୁଇଟି ଦୁର୍ବଳ ସ୍ତର ସକ୍ରିୟ ହୁଏ, ଏବଂ ଆପଣଙ୍କ ନିଜ ପୃଷ୍ଠା ଡକ୍ୟୁମେଣ୍ଟ୍ରେ ଦେଖାଉଥିବା ତଥ୍ୟ ପର୍ଯ୍ୟନ୍ତ ମାସ୍କିଂ କେବେ ପହଞ୍ଚେ ନାହିଁ – ଠିକଣା ଦେଖାଉଥିବା ନିଶ୍ଚିତକରଣ ପୃଷ୍ଠା ସ୍ନାପସଟ୍ର ଅଂଶ। ଉଭୟ ବିଷୟ ଏଠାରେ ଦିଆଯାଇଛି: ତଥ୍ୟ ପ୍ରକ୍ରିୟାକରଣ ଚୁକ୍ତି। |
| Canvas & WebGL ଉପାଦାନ | canvas ବିଷୟବସ୍ତୁ ଚିତ୍ର ଭାବେ ରେକର୍ଡ୍ ହୁଏ: ପୃଷ୍ଠା ସ୍ନାପସଟ୍ ସହ ଥରେ ଓ ପରେ ପ୍ରତ୍ୟେକ ପରିବର୍ତ୍ତନରେ, ସର୍ବାଧିକ ପ୍ରାୟ ସେକେଣ୍ଡ୍କୁ ଥରେ ଓ ଏକ ଆକାର ସୀମା ସହ। ତେଣୁ ମସୃଣ ଆନିମେସନ୍ ଫ୍ରେମ୍ କ୍ରମ ଭାବେ ଦେଖାଯାଏ। ମାସ୍କ୍ ଅଂଶ କିମ୍ବା ଅନ୍ୟ ଉତ୍ସର ଚିତ୍ର ଥିବା canvas ପାଇଁ କୌଣସି ଚିତ୍ର ପଠାଯାଏ ନାହିଁ; WebGL ବିଷୟବସ୍ତୁ ଖାଲି ରହିପାରେ। |
| ୱେବ୍ କମ୍ପୋନେଣ୍ଟ୍ (Shadow DOM) | ଖୋଲା shadow root ବିଷୟବସ୍ତୁ ସହ ରେକର୍ଡ୍ ହୁଏ। ବନ୍ଦ shadow root କୁ ସ୍କ୍ରିପ୍ଟ ପହଞ୍ଚିପାରେ ନାହିଁ; ତାହାର ବିଷୟବସ୍ତୁ ରେକର୍ଡିଂରେ ନଥାଏ। |
| ତଥ୍ୟ ପରିବହନ & ବ୍ରାଉଜର୍ ସଂରକ୍ଷଣ | ତଥ୍ୟ ଏନକ୍ରିପ୍ଟ୍ ହୋଇଥିବା WebSocket ସଂଯୋଗ (HTTPS/WSS) ଦ୍ୱାରା ପଠାଯାଏ। ଯଥା ପ୍ରକ୍ସି ଯୋଗୁଁ ସଂଯୋଗ ନହେଲେ, ସ୍କ୍ରିପ୍ଟ ଏନକ୍ରିପ୍ଟ୍ HTTP ପଥ ବ୍ୟବହାର କରେ; ବହୁତ ବଡ଼ ପୃଷ୍ଠା ସ୍ନାପସଟ୍ HTTPS ଦ୍ୱାରା ଅଲଗା ଅପଲୋଡ୍ ହୁଏ। MousePlayer କୁକି ସେଟ୍ କରେ ନାହିଁ; ଆପଣଙ୍କ ସାଇଟ୍ରେ ବ୍ରାଉଜର୍ର local storage ଓ session storage ବ୍ୟବହାର କରେ। |
| ନିଷ୍କ୍ରିୟ AFK ଅବଧି | ପରିଦର୍ଶକ ଟ୍ୟାବ୍ ଖୋଲା ରଖି 20 ମିନିଟ୍ ଚାଲିଗଲେ, ଆମ ଇଞ୍ଜିନ୍ ନିଷ୍କ୍ରିୟତା ନିଜେ ଚିହ୍ନଟ କରି ରେକର୍ଡିଂ ଦେଖିବାବେଳେ ଖାଲି ସମୟ ଛୋଟ କରେ, ଯାହାରେ ସ୍ଥିର ସ୍କ୍ରିନ୍ ଦେଖି ଆପଣ ସମୟ ନଷ୍ଟ କରିବେ ନାହିଁ। |