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

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?

Here’s my code, thank you for the help

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 = window.innerHeight + "px"; = 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) {
      deepAR.callbacks.onWristTracked = undefined;


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.

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

Here’s my package.json

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.

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 :grin:

Great! Glad I could help :smiley: