π¨ Π Π°ΡΠΏΠΎΠ·Π½Π°Π²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ² Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Ρ tracking.js Π·Π° 5 ΡΠ°Π³ΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π·ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ² Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ ΠΈ Π² Π²ΠΈΠ΄Π΅ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ tracking.js
Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° Π·Π°Π΄Π°Ρ ΠΌΠ°ΡΠΈΠ½Π½ΠΎΠ³ΠΎ Π·ΡΠ΅Π½ΠΈΡ (ΡΠ΅Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΈ Π»ΠΈΡ) ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°Π½ΠΈΠΈ ΡΠ²Π΅ΡΠ°. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Tracking.js ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅!
Π§ΡΠΎΠ±Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½ΡΠΆΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°Π½ΠΈΡ.
Π Π½Π΅ΠΌ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ ΡΠ°ΠΉΠ»ΠΎΠ², ΠΏΡΠ΅Π²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈ ΠΊΠΎΠ»ΠΎΡΠΏΠΈΠΊΠ΅Ρ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΈΡΠΊΠΎΠΌΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π°ΡΡΡΠΎΠΉΠΊΡ Π΄ΠΎΠΏΡΡΡΠΈΠΌΠΎΠ³ΠΎ ΠΎΡΠΊΠ»ΠΎΠ½Π΅Π½ΠΈΡ (tolerance
) Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° β ΡΡΠ° ΠΎΠΏΡΠΈΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, ΠΌΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ Π΅Π΅ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΠ»Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ΠΏΠΈΠΏΠ΅ΡΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±ΡΠ°ΡΡ ΡΠ²Π΅Ρ ΠΏΡΡΠΌΠΎ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Track color
Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°Π½ΠΈΡ. ΠΠ°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΠ±Π²ΠΎΠ΄ΡΡΡΡ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ.
ΠΠΎΠΈΠ³ΡΠ°ΡΡ Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅.
ΠΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π½Π° GitHub.
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ
Tracking.js β ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π·ΡΠ΅Π½ΠΈΡ Ρ Π½ΠΈΠ·ΠΊΠΈΠΌ ΠΏΠΎΡΠΎΠ³ΠΎΠΌ Π²Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ Π±ΡΠ°ΡΡ Π΅Π΅ ΠΈ ΡΡΠ°Π·Ρ ΠΆΠ΅ Π΄Π΅Π»Π°ΡΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π΅ΡΠΈ.
Π¨Π°Π³ #1. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΡΡΡΠΎΠ²
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ tracking.js ΠΈΠ· github-ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ:
ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ npm-ΠΏΠ°ΠΊΠ΅Ρ:
ΠΠ»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π½Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ:
- jquery β ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ DOM-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ;
- color-picker β Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΡΠΏΠΈΠΊΠ΅ΡΠ°;
- rangeslider.js β ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π» Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° input type="range";
- broiler.js β Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΈΠΏΠ΅ΡΠΊΠΈ.
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ ΡΠ°ΠΉΠ»Ρ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠΊΡΠΈΠΏΡΠΎΠ² Π²ΡΠ΅Ρ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π»ΡΠ±ΡΠΌ ΡΠ΄ΠΎΠ±Π½ΡΠΌ Π΄Π»Ρ Π²Π°Ρ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ΅ΠΊΡΠΈΠΈ head
Π² html-ΡΠ°ΠΉΠ»Π΅:
Π¨Π°Π³ #2. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠΎΠ΄ HTML Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
ΠΠ΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΡΠΊΡΠΈΠΏΡΡ: range-slider.js
ΠΈ Π³Π»Π°Π²Π½ΡΠΉ ΡΠ°ΠΉΠ» color-tracking.js
.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° tolerance
β ΡΠ°ΠΉΠ» range-slider.js
:
Π¨Π°Π³ #3. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΠ΅ΠΊΠ΅ΡΠ°
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ tracking.js, Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΡΠ΅ΠΊΠ΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ Π΅ΠΌΡ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°Π½ΠΈΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ Π½Π°Π±ΠΎΡ ΠΈΠ· ΡΡΠ΅Ρ ΡΠ²Π΅ΡΠΎΠ²: ΠΏΡΡΠΏΡΡΠ½ΡΠΉ (magenta), Π±ΠΈΡΡΠ·ΠΎΠ²ΡΠΉ (cyan) ΠΈ ΠΆΠ΅Π»ΡΡΠΉ (yellow).
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ ΠΌΠ΅ΡΠΎΠ΄ API tracking.ColorTracker.registerColor
:
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π΅Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅ΡΒ» (Add color) ΠΈ ΡΠ΅Π³ΠΈΡΡΡΠΈΡΡΠ΅Ρ Π² ΡΡΠ΅ΠΊΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ Π² ΠΊΠΎΠ»ΠΎΡΠΏΠΈΠΊΠ΅ΡΠ΅ ΡΠ²Π΅Ρ. ΠΠ΅ΡΠΎΠ΄ registerColor
ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°: ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ²Π΅Ρ ΠΈ ΡΡΠ½ΠΊΡΠΈΡ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΡΠ²Π΅ΡΠ°. Π ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π²ΡΡΠΈΡΠ»ΡΡΡ "ΡΠ°Π·Π½ΠΈΡΡ" ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π»Π΅Π²ΡΠΌ ΠΈ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠΌ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΈ ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ Π΅Π΅ Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° tolerance
.
ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ tolerance
, ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΡΠ²Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΡΠΈΡΠ°ΡΡΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌΠΈ ΠΈ ΠΏΠΎΠΏΠ°Π΄ΡΡ Π² Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅.
ΠΠ΅ΡΠΎΠ΄ displayColorList
Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π²ΡΠ΅ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠ°. ΠΠ³ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ.
Π¨Π°Π³ #4. Π‘ΠΎΠ±ΡΡΠΈΡ ΡΡΠ΅ΠΊΠ΅ΡΠ°
ΠΠΎΠ³Π΄Π° ΡΡΠ΅ΠΊΠ΅Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡ ΠΈΡΠΊΠΎΠΌΡΠ΅ ΡΠ²Π΅ΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ, ΠΎΠ½ Π²ΡΠ±ΡΠΎΡΠΈΡ ΡΠΎΠ±ΡΡΠΈΠ΅ track
, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ.
Π ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Ρ ΡΠ°Π½ΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π²ΡΠ΅Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ. ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΡΠ²Π΅Ρ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ.
ΠΠΎΠ»ΡΡΠΈΠ² ΡΡΠΈ Π΄Π°Π½Π½ΡΠ΅, ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΈΡ
Π½Π° ΠΏΡΠ΅Π²ΡΡ (ΠΌΠ΅ΡΠΎΠ΄ drawRect
).
Π¨Π°Π³ #5. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΡΠ΅ΠΊΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ track
:
Π Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΡΠ΅Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° img
(ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ video
ΠΈ canvas
) ΠΈ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΡΠ΅ΠΊΠ΅ΡΠ°.
ΠΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠΌ Π²Π΅ΡΡ ΠΊΠΎΠ΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈ Π·Π°ΠΏΡΡΠΊΠ° ΡΡΠ΅ΠΊΠ΅ΡΠ° ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Track color:
Π‘Π½Π°ΡΠ°Π»Π° ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ΄Π°Π»ΠΈΡΡ Π²ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΠΎΠΈΡΠΊΠ°. ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡ ΡΡΠ΅ΠΊΠ΅ΡΠ° Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ track
ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ (Π²ΡΠ±ΠΎΡ ΡΠ²Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΏΠ΅ΡΠΊΠΈ, ΡΠΌΠ΅Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠ±ΡΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² ΠΏΠΎΠΈΡΠΊΠ°) Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎΠΌΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ (Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° Π²ΠΈΠ΄Π΅ΠΎ), Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° tracking.js ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°ΡΡ Π»ΠΈΡΠ° Π»ΡΠ΄Π΅ΠΉ, Π½ΠΎ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°ΡΡ ΠΈΡ . ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.