# Cant use onWristTracking? and my watches not showing on my hand

**URL:** <https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618>\
**Category:** Help & Questions\
**Tags:** web-sdk\
**Created:** [April 1, 2024, 6:31am UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618 "2024-04-01T06:31:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lindanz](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@lindanz](https://forum.deepar.ai/u/lindanz)\
**Post date:** [April 1, 2024, 6:31am UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618/1 "2024-04-01T06:31:16Z")

</div>

Hi, i want to use wrist tracking to build a try on watches, the problem is it wont show the watches on my hand, plus there’s no preview for onWristTracked?

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/deepar/original/1X/7680bd8fcf9215a3bc50d3297cc76e18d52fdc13.png)

Here’s my code, thank you for the help

```auto
import * as deepar from 'deepar';

// Log the version. Just in case.
console.log("Deepar version: " + deepar.version);

// Top-level await is not supported.
// So we wrap the whole code in an async function that is called immediatly.
(async function() {
  const watch1 = document.getElementById("watch1");
  watch1.addEventListener('click', function(){
    deepAR.switchEffect('effects/Watch1.deepar', {slot: 'DEFAULT_SLOT'});
  });
  
  const watch2 = document.getElementById("watch2");
  watch2.addEventListener('click', function(){
    deepAR.switchEffect('effects/Watch2.deepar', {slot: 'DEFAULT_SLOT'});
  });
  
  const watch3 = document.getElementById("watch3");
  watch3.addEventListener('click', function(){
  });
  
  const watch4 = document.getElementById("watch4");
  watch4.addEventListener('click', function(){
  });
  
  const watch5 = document.getElementById("watch5");
  watch5.addEventListener('click', function(){
  });

  const watch6 = document.getElementById("watch6");
  watch6.addEventListener('click', function(){
  });
  // Resize the canvas according to screen size.
  const canvas = document.getElementById('deepar-canvas');
  
  // this is to make the canvas look good on high-res screens
  const scale = window.devicePixelRatio || 1;
  
  const width = window.innerWidth > window.innerHeight ? Math.floor(window.innerHeight * 0.66) : window.innerWidth
  canvas.width = Math.floor(width * scale);
  canvas.height = Math.floor(window.innerHeight * scale);

  // constrain the actual size of the canvas
  canvas.style.maxHeight = window.innerHeight + "px";
  canvas.style.maxWidth = width + "px";;

  // Initialize DeepAR.
  const deepAR = await deepar.initialize({
    licenseKey: 'Key',
    canvas: canvas,
    effect: 'effects/Watch1.deepar',
    additionalOptions: {
      // Use the front camera.
      cameraConfig: {
        facingMode: "environment",
      },
    }
  });

  deepAR.callbacks.onWristTracked = (wristData) => {
    if(wristData.detected) {
      console.log("Detected");
      deepAR.callbacks.onWristTracked = undefined;
    }
  };

})();

```

---

<div class="post-metadata">

**Author:** ![igor](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/igor/32/547_2.png) [@igor](https://forum.deepar.ai/u/igor)\
**Post date:** [April 2, 2024, 6:54am UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618/2 "2024-04-02T06:54:52Z")

</div>

Hi @lindanz!

Reordering some part of your code could make it work. Try setting the size and scale of the canvas first, then initialize the DeepAR SDK, and finally set up all the callbacks. Check the console for any errors because of uninitialized variable usage.

Regarding the `onWristTracking` not appearing in the suggestions, check if you’re using the latest version of the SDK. For me, it does show it.

---

<div class="post-metadata">

**Author:** ![lindanz](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@lindanz](https://forum.deepar.ai/u/lindanz)\
**Post date:** [April 2, 2024, 7:27am UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618/3 "2024-04-02T07:27:11Z")

</div>

Thank you for the reply @igor , it seems like my DeepAR SDK version is still 5.0.0 which i cant use the wrist tracking, how can i update it to the latest? can i just change it directly on my package.json?

fyi, i got my code from the github of shoes-try-on

> **[GitHub - DeepARSDK/shoetryon-web-js: Shoe try-on example app with DeepAR Web SDK](https://github.com/DeepARSDK/shoetryon-web-js)**
>
> Shoe try-on example app with DeepAR Web SDK. Contribute to DeepARSDK/shoetryon-web-js development by creating an account on GitHub.

Here’s my package.json

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/deepar/original/1X/7f536150efa31544f54d4a3c0b54aa901b9c3d4b.png)

---

<div class="post-metadata">

**Author:** ![igor](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/igor/32/547_2.png) [@igor](https://forum.deepar.ai/u/igor)\
**Post date:** [April 2, 2024, 10:47am UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618/4 "2024-04-02T10:47:37Z")

</div>

You can check what version of the DeepAR SDK is used by opening the console in the browser.  
The version in the `package.json` states that the version can be any minor release after version `5.0.0` and that includes the newest version `5.6.0`. In case that’s not the version being used you can run `npm update`.

---

<div class="post-metadata">

**Author:** ![lindanz](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@lindanz](https://forum.deepar.ai/u/lindanz)\
**Post date:** [April 2, 2024, 12:02pm UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618/5 "2024-04-02T12:02:23Z")

</div>

It finally works, after i check my DeepAR version on console, it turns out it’s still on `5.0.0`, and then i just need to update it with `npm update` as you said. Now the watches show up and `onWristTracking` can be used. Thank you for the help 😁

---

<div class="post-metadata">

**Author:** ![igor](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.deepar.ai/igor/32/547_2.png) [@igor](https://forum.deepar.ai/u/igor)\
**Post date:** [April 2, 2024, 12:14pm UTC](https://forum.deepar.ai/t/cant-use-onwristtracking-and-my-watches-not-showing-on-my-hand/618/6 "2024-04-02T12:14:26Z")

</div>

Great! Glad I could help 😃