MousePlayer ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
ਸਾਡੀ ਟਰੈਕਿੰਗ ਬਣਤਰ, ਵੱਖਰੇ ਡਿਵਾਈਸਾਂ ਉੱਤੇ ਸਕਰੀਨ ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਸੰਭਾਲਣ ਅਤੇ ਸਿਸਟਮ ਹੱਦਾਂ ਬਾਰੇ ਸੌਖੀ ਗਾਈਡ।
1. ਅਸੀਂ ਵੀਡੀਓ ਰਿਕਾਰਡਿੰਗ ਕਿਉਂ ਨਹੀਂ ਵਰਤਦੇ
ਆਮ ਗਲਤਫ਼ਹਿਮੀ ਹੈ ਕਿ ਦ੍ਰਿਸ਼ੀ ਵਿਸ਼ਲੇਸ਼ਣ ਟੂਲ ਵਿਜ਼ਟਰ ਦੀ ਸਕਰੀਨ ਦੀਆਂ ਆਮ ਵੀਡੀਓ ਫਾਈਲਾਂ (ਜਿਵੇਂ MP4 ਜਾਂ WebM) ਰਿਕਾਰਡ ਕਰਦੇ ਹਨ। ਅਜਿਹਾ ਕਰਨ ਨਾਲ ਬਹੁਤ ਬੈਂਡਵਿਡਥ ਲੱਗੇਗੀ, ਵੈੱਬਸਾਈਟ ਬਹੁਤ ਹੌਲੀ ਹੋਵੇਗੀ ਅਤੇ ਲਿਖਤ ਧੁੰਦਲੀ, ਨਾ ਪੜ੍ਹਨ ਯੋਗ ਹੋਵੇਗੀ।
ਇਸ ਦੀ ਥਾਂ MousePlayer ਹਲਕੀ ਤਕਨੀਕ ਵਰਤਦਾ ਹੈ ਜਿਸ ਨੂੰ DOM ਸਨੈਪਸ਼ਾਟ ਟੈਲੀਮੀਟਰੀ ਕਹਿੰਦੇ ਹਨ। ਮੂਲ ਪੱਧਰ ਉੱਤੇ ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ:
ਬਣਤਰ ਦਾ ਸਨੈਪਸ਼ਾਟ
ਵਿਜ਼ਟਰ ਸਫ਼ਾ ਖੋਲ੍ਹੇ ਤਾਂ ਸਾਡੀ ਸਕ੍ਰਿਪਟ ਤੁਹਾਡੇ HTML ਅਤੇ ਸਟਾਈਲ ਬਣਤਰ ਦਾ ਲਿਖਤ-ਅਧਾਰਿਤ “ਨਕਸ਼ਾ” ਲੈਂਦੀ ਹੈ। ਸਫ਼ੇ ਦੀਆਂ ਤਸਵੀਰ ਜਾਂ ਵੀਡੀਓ ਫਾਈਲਾਂ ਕਾਪੀ ਕੀਤੇ ਬਿਨਾਂ ਅੰਗਾਂ ਦੀ ਥਾਂ ਰਿਕਾਰਡ ਕਰਦੀ ਹੈ; ਪਲੇਅਰ ਰਿਕਾਰਡਿੰਗ ਵੇਲੇ ਤਸਵੀਰਾਂ ਅਸਲ ਪਤੇ ਤੋਂ ਲੋਡ ਕਰਦਾ ਹੈ। ਅਪਵਾਦ canvas ਅੰਗ ਹਨ, ਜਿਨ੍ਹਾਂ ਦੀ ਸਮੱਗਰੀ ਤਸਵੀਰ ਵਜੋਂ ਭੇਜੀ ਜਾਂਦੀ ਹੈ (ਹੇਠਾਂ ਵੇਖੋ)।
ਕੋਆਰਡੀਨੇਟ ਟੈਲੀਮੀਟਰੀ
ਵਰਤੋਂਕਾਰ ਕਾਰਵਾਈ ਕਰੇ ਤਾਂ ਅਸੀਂ ਇਵੈਂਟਾਂ ਦੀ ਧਾਰਾ ਰਿਕਾਰਡ ਕਰਦੇ ਹਾਂ: ਮਾਊਸ ਸਥਿਤੀਆਂ, ਸਕ੍ਰੋਲ ਡੂੰਘਾਈ, ਕਲਿੱਕ ਟੀਚੇ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਆਕਾਰ ਬਦਲਾਅ, ਨਾਲ ਸਫ਼ੇ ਦੇ ਆਪਣੇ ਬਦਲਾਅ ਅਤੇ ਸੈਟਿੰਗਾਂ ਅਨੁਸਾਰ ਕੰਸੋਲ ਸੁਨੇਹੇ, ਨਾਕਾਮ ਜਾਂ ਹੌਲੀਆਂ ਬੇਨਤੀਆਂ ਅਤੇ ਲੋਡ ਸਮੇਂ ਦੇ ਮਾਪ (Web Vitals)। ਹਿਲਜੁਲ ਅਤੇ ਕਲਿੱਕ ਛੋਟੇ ਹਨ; ਸਫ਼ੇ ਦੇ ਸਨੈਪਸ਼ਾਟ ਅਤੇ ਬਦਲਾਅ ਸਫ਼ੇ ਮੁਤਾਬਕ ਕਾਫ਼ੀ ਵੱਡੇ ਹੋ ਸਕਦੇ ਹਨ ਅਤੇ ਸੰਕੁਚਿਤ ਭੇਜੇ ਜਾਂਦੇ ਹਨ।
ਥੀਏਟਰ ਰਿਕਾਰਡਿੰਗ
ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਸੈਸ਼ਨ ਵੇਖਣ ਵੇਲੇ ਸਾਡਾ ਪਲੇਅਰ ਰਿਕਾਰਡ ਨਕਸ਼ੇ ਤੋਂ ਸਫ਼ਾ ਮੁੜ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਉਸ ਉੱਤੇ ਵਰਚੁਅਲ ਪੌਇੰਟਰ ਅਸਲ ਸਮੇਂ ਵਿੱਚ ਹਿਲਾਉਂਦਾ ਹੈ, ਲਿਖਤ ਪੂਰੀ ਸਾਫ਼ ਰੱਖਦਾ ਹੈ।
ਹਲਕਾ ਰਹਿਣ ਲਈ ਬਣਿਆ: ਸਕ੍ਰਿਪਟ ਅਸਿੰਕ੍ਰੋਨਸ ਲੋਡ ਹੁੰਦੀ ਹੈ ਅਤੇ ਵੀਡੀਓ ਦੀ ਥਾਂ ਛੋਟੇ ਅੰਕੀ ਡਾਟਾ ਬਿੰਦੂ ਭੇਜਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਆਪਣਾ ਭਾਰ ਘੱਟ ਰਹਿੰਦਾ ਹੈ। ਤੁਹਾਡੇ Core Web Vitals ਲਈ ਅਸਰ ਤੁਹਾਡੇ ਸਫ਼ਿਆਂ, ਹੋਸਟਿੰਗ ਅਤੇ ਵਿਜ਼ਟਰ ਦੇ ਨੈੱਟਵਰਕ ਉੱਤੇ ਨਿਰਭਰ ਹੈ, ਇਸ ਲਈ ਸਾਡੇ ਅੰਕ ਮੰਨਣ ਦੀ ਥਾਂ ਆਪਣੀ ਸਾਈਟ ਉੱਤੇ ਮਾਪੋ। ਕੋਈ ਖ਼ਾਸ ਲੋਡ ਗਤੀ ਦੀ ਗਾਰੰਟੀ ਨਹੀਂ – ਧਾਰਾ 20 ਵੇਖੋ, ਸਾਡੀਆਂ ਸੇਵਾ ਦੀਆਂ ਸ਼ਰਤਾਂ ਵਿੱਚ।
2. ਸਕਰੀਨ ਰੈਜ਼ੋਲਿਊਸ਼ਨ & ਮੋਬਾਈਲ ਡਿਵਾਈਸ ਸੰਭਾਲਣਾ
ਅੱਜ ਦੇ ਵਰਤੋਂਕਾਰ ਛੋਟੇ ਸਮਾਰਟਫ਼ੋਨਾਂ ਤੋਂ ਬਹੁਤ ਚੌੜੇ 4K ਡੈਸਕਟਾਪ ਮਾਨੀਟਰਾਂ ਤੱਕ ਸਭ ਉੱਤੇ ਬ੍ਰਾਊਜ਼ ਕਰਦੇ ਹਨ। ਵੈੱਬਸਾਈਟਾਂ ਵੱਖਰੀਆਂ ਸਕਰੀਨ ਚੌੜਾਈਆਂ ਲਈ ਲੇਆਉਟ ਆਪਣੇ ਆਪ ਖਿਸਕਾਉਂਦੀਆਂ, ਮੋੜਦੀਆਂ ਅਤੇ ਮੁੜ ਬਣਾਉਂਦੀਆਂ ਹਨ — ਇਸ ਨੂੰ Responsive Web Design ਕਹਿੰਦੇ ਹਨ।
ਅਸੀਂ ਵਿਜ਼ਟਰ ਦੇ ਹੂਬਹੂ ਵਿਊਪੋਰਟ ਨਾਲ ਕਿਵੇਂ ਮੇਲ ਕਰਦੇ ਹਾਂ
ਰਿਕਾਰਡਿੰਗ ਵਿਗੜੀ ਨਾ ਦਿਸੇ, ਇਸ ਲਈ MousePlayer ਵਿਜ਼ਟਰ ਦੇ ਵਿਊਪੋਰਟ ਦੇ ਹੂਬਹੂ ਮਾਪ ਰਿਕਾਰਡ ਕਰਦਾ ਹੈ (ਜਿਵੇਂ 390x844 ਸਮਾਰਟਫ਼ੋਨ ਲਈ ਜਾਂ 1920x1080 ਡੈਸਕਟਾਪ ਮਾਨੀਟਰ ਲਈ)। ਥੀਏਟਰ ਪਲੇਅਰ ਖੋਲ੍ਹਣ ਉੱਤੇ ਇੰਜਣ ਮਾਪ ਅਨੁਸਾਰ ਸੈਂਡਬਾਕਸ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਵਿਜ਼ਟਰ ਦੀ ਅਸਲ ਸਕਰੀਨ ਦੇ ਅਨੁਪਾਤ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੁਹਰਾਉਂਦਾ ਹੈ।
ਡੈਸਕਟਾਪ & ਲੈਪਟਾਪ ਸਕਰੀਨਾਂ
ਆਮ ਕੰਪਿਊਟਰਾਂ ਉੱਤੇ ਅਸੀਂ ਇੱਕੋ ਬ੍ਰਾਊਜ਼ਰ ਸੈਸ਼ਨ ਵਿੱਚ ਲਗਾਤਾਰ ਮਾਊਸ ਹਿਲਜੁਲ ਅਤੇ ਕਈ ਟੈਬਾਂ ਦੀ ਨੈਵੀਗੇਸ਼ਨ ਕੈਪਚਰ ਕਰਦੇ ਹਾਂ। ਹੋਵਰ ਉੱਤੇ ਖੁੱਲ੍ਹਦੇ ਮੀਨੂ ਰਿਕਾਰਡਿੰਗ ਵਿੱਚ ਉੱਥੇ ਦਿਸਦੇ ਹਨ ਜਿੱਥੇ ਇਸ ਦੌਰਾਨ ਸਫ਼ਾ ਆਪਣਾ ਦਸਤਾਵੇਜ਼ ਬਦਲਦਾ ਹੈ; ਸਿਰਫ਼ CSS ਹੋਵਰ ਅਸਰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਨਹੀਂ ਦਿਸਦਾ ਅਤੇ ਰਿਕਾਰਡਿੰਗ ਵਿੱਚ ਨਹੀਂ ਦੁਹਰਾਇਆ ਜਾਂਦਾ।
ਸਮਾਰਟਫ਼ੋਨ & ਟੈਬਲੇਟ
ਟੱਚਸਕਰੀਨਾਂ ਉੱਤੇ ਹੋਵਰ ਕਰਦਾ ਮਾਊਸ ਪੌਇੰਟਰ ਨਹੀਂ ਹੁੰਦਾ। MousePlayer ਟੈਪ ਇਸ਼ਾਰੇ, ਸਵਾਈਪ ਸਕ੍ਰੋਲ ਅਤੇ ਦਿਸ਼ਾ ਬਦਲਾਅ (ਲੰਬਵੀਂ ਬਨਾਮ ਲੇਟਵੀਂ) ਰਿਕਾਰਡ ਕਰਕੇ ਆਪਣੇ ਆਪ ਢਲਦਾ ਹੈ।
ਸੈਸ਼ਨ ਦੌਰਾਨ ਆਕਾਰ ਬਦਲਣ ਦੀ ਚੁਣੌਤੀ
ਵਿਜ਼ਟਰ ਸੈਸ਼ਨ ਦੌਰਾਨ ਟੈਬਲੇਟ ਘੁਮਾਏ ਜਾਂ ਡੈਸਕਟਾਪ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਦਾ ਆਕਾਰ ਬਦਲੇ ਤਾਂ ਵੈੱਬਸਾਈਟ ਲੇਆਉਟ ਬਦਲਦਾ ਹੈ। MousePlayer ਇਹ ਵਿੰਡੋ ਆਕਾਰ ਬਦਲਾਅ ਕੈਪਚਰ ਕਰਕੇ ਚਲਾਉਣ ਵਾਲਾ ਕੈਨਵਸ ਤੁਰੰਤ ਸੁਚੱਜੇ ਢੰਗ ਨਾਲ ਬਦਲਦਾ ਹੈ, ਤਾਂ ਜੋ ਪਰਸਪਰ ਕਾਰਵਾਈ ਦਾ ਸੰਦਰਭ ਰਹੇ।
3. ਸਿਸਟਮ ਹੱਦਾਂ & ਤਕਨੀਕੀ ਸੀਮਾਵਾਂ
ਵਰਤੋਂਕਾਰ ਗੋਪਨੀਯਤਾ, ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਅਤੇ ਤੇਜ਼ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਲਈ MousePlayer ਤੈਅ ਤਕਨੀਕੀ ਹੱਦਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ:
| ਸਿਸਟਮ ਹੱਦ | MousePlayer ਇਸ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦਾ ਹੈ |
|---|---|
| iFrames | ਤੁਹਾਡੇ ਸਫ਼ੇ ਦੇ ਉਸੇ ਮੂਲ ਵਾਲੇ iframe ਸਮੱਗਰੀ ਅਤੇ ਅੰਦਰਲੀ ਪਰਸਪਰ ਕਾਰਵਾਈ ਸਮੇਤ ਰਿਕਾਰਡ ਹੁੰਦੇ ਹਨ। ਹੋਰ ਮੂਲ ਦੀ ਜੋੜੀ ਸਮੱਗਰੀ (ਜਿਵੇਂ YouTube ਪਲੇਅਰ, Stripe ਭੁਗਤਾਨ ਫਾਰਮ) ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਨੀਤੀਆਂ (Same-Origin Policy) ਕਾਰਨ ਅੰਦਰੋਂ ਰਿਕਾਰਡ ਨਹੀਂ ਹੋ ਸਕਦੀ; ਰਿਕਾਰਡਿੰਗ ਵਿੱਚ ਖਾਲੀ ਨੁਮਾਇੰਦੇ ਵਜੋਂ ਦਿਸਦੀ ਹੈ ਅਤੇ ਉੱਥੇ ਲੋਡ ਨਹੀਂ ਹੁੰਦੀ। |
| ਸੰਵੇਦਨਸ਼ੀਲ ਇਨਪੁੱਟ ਖੇਤਰ (PII) | ਪਾਸਵਰਡ ਅਤੇ ਭੁਗਤਾਨ ਖੇਤਰ ਹਰ ਢੱਕਣ ਪੱਧਰ ਉੱਤੇ ਵਿਜ਼ਟਰ ਦੇ ਡਿਵਾਈਸ ਉੱਤੇ ਢੱਕੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਹਰ ਪ੍ਰਾਪਰਟੀ ਲਈ ਸਾਰਾ ਫਾਰਮ ਇਨਪੁੱਟ ਪੂਰਾ ਢੱਕਣਾ ਮੂਲ ਹੈ। ਤੁਸੀਂ ਵੇਖਦੇ ਹੋ ਕਿ ਲਿਖਿਆ ਗਿਆ, ਕੀ ਲਿਖਿਆ ਉਹ ਨਹੀਂ। ਦੋ ਹੱਦਾਂ ਹਨ: ਦੋ ਕਮਜ਼ੋਰ ਪੱਧਰ ਸਿਰਫ਼ ਸਾਡੀ ਲਿਖਤੀ ਮਨਜ਼ੂਰੀ ਨਾਲ ਚਾਲੂ ਹੁੰਦੇ ਹਨ ਅਤੇ ਢੱਕਣਾ ਉਸ ਸਮੱਗਰੀ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ ਜੋ ਤੁਹਾਡਾ ਆਪਣਾ ਸਫ਼ਾ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਦਿਖਾਉਂਦਾ ਹੈ – ਪਤਾ ਦਿਖਾਉਣ ਵਾਲਾ ਪੁਸ਼ਟੀ ਸਫ਼ਾ ਸਨੈਪਸ਼ਾਟ ਦਾ ਹਿੱਸਾ ਹੈ। ਦੋਵੇਂ ਵੇਰਵੇ ਸਾਡੇ DPA ਵਿੱਚ ਹਨ। |
| Canvas & WebGL ਅੰਗ | canvas ਦੀ ਸਮੱਗਰੀ ਤਸਵੀਰ ਵਜੋਂ ਰਿਕਾਰਡ ਹੁੰਦੀ ਹੈ: ਇੱਕ ਵਾਰ ਸਫ਼ਾ ਸਨੈਪਸ਼ਾਟ ਨਾਲ ਅਤੇ ਫਿਰ ਹਰ ਬਦਲਾਅ ਵੇਲੇ, ਵੱਧ ਤੋਂ ਵੱਧ ਲਗਭਗ ਹਰ ਸਕਿੰਟ ਇੱਕ ਵਾਰ ਅਤੇ ਆਕਾਰ ਹੱਦ ਨਾਲ। ਇਸ ਲਈ ਨਰਮ ਐਨੀਮੇਸ਼ਨ ਫਰੇਮਾਂ ਦੀ ਲੜੀ ਵਾਂਗ ਦਿਸਦੇ ਹਨ। ਢੱਕੇ ਖੇਤਰਾਂ ਜਾਂ ਹੋਰ ਮੂਲ ਦੀਆਂ ਤਸਵੀਰਾਂ ਵਾਲੇ canvas ਅੰਗਾਂ ਲਈ ਤਸਵੀਰ ਨਹੀਂ ਭੇਜੀ ਜਾਂਦੀ; WebGL ਸਮੱਗਰੀ ਖਾਲੀ ਰਹਿ ਸਕਦੀ ਹੈ। |
| Web Components (Shadow DOM) | ਖੁੱਲ੍ਹੇ shadow root ਸਮੱਗਰੀ ਸਮੇਤ ਰਿਕਾਰਡ ਹੁੰਦੇ ਹਨ। ਬੰਦ shadow root ਸਕ੍ਰਿਪਟਾਂ ਦੀ ਪਹੁੰਚ ਤੋਂ ਬਾਹਰ ਹਨ; ਉਨ੍ਹਾਂ ਦੀ ਸਮੱਗਰੀ ਰਿਕਾਰਡਿੰਗ ਵਿੱਚ ਗੁੰਮ ਹੈ। |
| ਆਵਾਜਾਈ & ਬ੍ਰਾਊਜ਼ਰ ਸਟੋਰੇਜ | ਡਾਟਾ ਇਨਕ੍ਰਿਪਟ WebSocket ਕਨੈਕਸ਼ਨ (HTTPS/WSS) ਰਾਹੀਂ ਭੇਜਿਆ ਜਾਂਦਾ ਹੈ। ਜੇ ਇਹ ਨਾ ਬਣ ਸਕੇ, ਜਿਵੇਂ ਪ੍ਰੌਕਸੀ ਕਾਰਨ, ਤਾਂ ਸਕ੍ਰਿਪਟ ਇਨਕ੍ਰਿਪਟ HTTP ਰਸਤਾ ਵਰਤਦੀ ਹੈ; ਬਹੁਤ ਵੱਡੇ ਸਫ਼ਾ ਸਨੈਪਸ਼ਾਟ ਵੱਖਰੇ HTTPS ਰਾਹੀਂ ਅੱਪਲੋਡ ਹੁੰਦੇ ਹਨ। MousePlayer ਕੂਕੀ ਨਹੀਂ ਰੱਖਦਾ; ਤੁਹਾਡੀ ਸਾਈਟ ਉੱਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੀ ਲੋਕਲ ਸਟੋਰੇਜ ਅਤੇ ਸੈਸ਼ਨ ਸਟੋਰੇਜ ਵਰਤਦਾ ਹੈ। |
| ਨਿਸ਼ਕਿਰਿਆ AFK ਸਮਾਂ | ਵਿਜ਼ਟਰ ਟੈਬ ਖੁੱਲ੍ਹੀ ਛੱਡ ਕੇ 20 ਮਿੰਟ ਚਲਾ ਜਾਵੇ ਤਾਂ ਇੰਜਣ ਆਪਣੇ ਆਪ ਨਿਸ਼ਕਿਰਿਆਤਾ ਪਛਾਣ ਕੇ ਰਿਕਾਰਡਿੰਗ ਵੇਲੇ ਉਹ ਅੰਤਰਾਲ ਘਟਾ ਦਿੰਦਾ ਹੈ, ਤਾਂ ਜੋ ਅਡੋਲ ਸਕਰੀਨਾਂ ਵੇਖਣ ਵਿੱਚ ਸਮਾਂ ਨਾ ਜਾਵੇ। |