Virtual Try-On Custom HTML Element

Introduction

The Virtual Try On (VTO) experience is designed for high-end mobile devices, allowing users to see virtual shoes on their feet.

Quick Start

Import the component into your HTML:

<script
  type="module"
  src="https://sneaker-window.vyking.io/vyking-apparel/1/vyking-apparel.js"
></script>

Use the Vyking Apparel component by adding the following HTML:

<vyking-apparel
  share
  autocamera
  autocamera-width="640"
  autocamera-height="360"
  onerror="alert(`Error: ${event.message}`)"
  poster="https://sneaker-window.vyking.io/vyking-assets/customer/vyking-io/yeezy_boost_700_carbon_blue/shoeIcon.png"
  apparel="https://sneaker-window.vyking.io/vyking-assets/customer/vyking-io/yeezy_boost_700_carbon_blue/offsets.json"
  config="../assets/config/modeld.foot.bin"
  key="io.vyking"
  alt="Virtual Try On"
>
  <canvas slot="canvas">Virtual Try On</canvas>
</vyking-apparel>

Examples

Example

Configuration File

A configuration file, supplied by Vyking, is required. This file will be encrypted with a client key and will only be valid for certain domain names. The choice of client key and supported domains will be provided by you, the client. The page using the vyking-apparel library must supply this client key along with the fetched contents of the configuration file and be hosted on one of the valid domain names. Only one key is supported, but several domain names are allowed. To support private development servers, private IP addresses (e.g. 192.168.0.20) and localhost are automatically allowed, but the client key must be valid.

The configuration file will have an expiry date, and needs to be replaced before this date is reached to prevent interruption to the service.

Camera management

When the autocamera attribute is set the window blur and focus events are used to manage the camera. This is so that the camera is only in use whilst visible and is free for use by other browser tabs when not. The events are only listened for when the vyking-apparel element is connected to the DOM to prevent automatically starting the camera when the element is not visible.

Use of an iframe

Hosting the vyking-apparel element inside an HTML iframe provides encapsulation and allows all its memory, including code, to be garbage collected when removed.

Viewport meta tag

Consider adding a viewport meta tag to the HTML page hosting the vyking-apparel element. (This maybe easier if the vyking-apparel element is hosted in an iframe.) Typically this would be:

<head>
  :
  :
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  :
  :
</head>

Releases

1.1.6 First release
1.1.7 Added lensFactor attribute and some documentation
1.1.8 Support HDR environments, Upgraded to Three 0.152.0 & started using Lit (version 2.7.5)
1.1.9 Refactored events so they bubble and are composable. Also changed play, pause and finish from CustomEvents to Events.
1.1.10 Support 42 point Tensorflow model.
1.2.1 Default loader, advice, play button can be replaced. Default share button added.
1.2.2 Support offsets.json version 2 files.
1.2.3 Now using @vyking/apparel version 1.1.12.
1.2.4 Now using @vyking/apparel version 1.1.13. Renamed attribute autocamera-framerate to autocamera-frame-rate and now support attribute autocamera-facing-mode.
1.2.5 Support GLTF variants.
1.2.6 Upgraded to Tensorflow 4.11.0 and Three 0.157.0
1.2.7 Upgraded to @vyking/apparel version 1.1.16.
1.2.8 Upgraded to @vyking/apparel version 1.1.17.
1.2.9 Upgraded to @vyking/apparel version 1.1.18 and set the defaultEnvironmentImage property to reference a neutral.hdr image so that legacy offsets.json files are not dark.
1.2.10 Now also support the attribute "config-key" for setting the decryption key. Upgraded to @vyking/apparel version 1.1.19.
1.2.11 Upgraded to @vyking/apparel version 1.1.20.
1.2.12 Upgraded to @vyking/apparel version 1.1.21 and also stop/start the camera on th blur/focus events for iOS to try and handle iOS multi-lens camera bugs.
1.2.13
- Upgraded to @vyking/apparel version 1.1.22.
- Changed the default tone mapping to no tone mapping.
- Added support for share decorations.
- The blur and focus events used to control the autocamera are now only active if the vyking-apparel element is connected to the DOM.The image is assigned to the vyking-apparel's "backgroundImage" style property.
1.2.14
- Fixed the blur and focus events controlling the autocamera to work when vyking-apparel is hosted inside an iframe.
- Changed the default advice image.

Attributes

Name	Description	Type	Default
config	A configuration buffer must be provided to unlock the tracking features. This can either be specified as a url via this attribute or by setting the configPromise property with a promise that will resolve to the configuration as an arrayBuffer type. The latter option allows for prefetching the configuration.	.bin File URL
config-key	A key needs to be provided to decrypt the configuration buffer.	String
~~key~~	This is deprecated, use config-key instead. A key needs to be provided to decrypt the configuration buffer.	String
autocamera	Automatically start and manage the camera.	Boolean	`false`
autocamera-width	The ideal width to use when automatically managing the camera.	Number	`640`
autocamera-height	The ideal height to use when automatically managing the camera.	Number	`360`
autocamera-frame-rate	The max frame rate to use when automatically managing the camera.	Number	`60`
autocamera-facing-mode	The facing mode to use when automatically managing the camera.	`environment` or `user`	`environment`
poster	An image to display whilst waiting for the resources to load and start.	Image URL
apparel	The virtual apparel to try on.	JSON File URL
flipy	If specified the image will be mirrored by flipping about the Y axis.	Boolean	`false`
rotate	Specify this when the input camera needs rotating. This is typically when an external camera needs to be rotated from landscape to portrait.	Boolean	`false`
stats	Enable the Three.js statistics element and console logging of internal timings.	Boolean	`false`
debug	Enable debug features such as showing the various canvases used.	Boolean	`false`
lens-factor	Adjust the zoom factor used when rendering the image. Zooming in slightly allows the virtual apparel to still be seen when the tracked body part appears to nearly outside the camera's field of view. Values less that 1.0 zoom in and values greater than 1.0 zoom out.	Float	`1.0`
share	Enable the share feature. This uses the navigator.share facility, if supported.	Boolean	`false`
share-quality	The share feature generates an 'image/jpeg' image of the rendered canvas using the Canvas.toDataURL method. The share-quality attribute is used as the method's quality parameter.	Float, `0.0` to `1.0` (inclusive)	`1.0`
share-decoration	If this attribute is present then the share decorations will be added to the shared image.	Boolean	`false`
share-product	The share product name decoration to use instead of the longDescription property in the offsets.json file.
share-brand	The share brand name decoration to use instead of the shortDescription property in the offsets.json file.
share-logo	A document.querySelector tag referencing an img element defining the share logo decoration to use.
default-tone-mapping	The tone mapping to use if not specified in the offsets.json file.	String	`NoToneMapping`
default-exposure	The tone mapping exposure value to use if not specified in the offsets.json file.	Number	`1.0`
default-environment-image	The url of an equirectangular HDR environment image to use if not specified in the offsets.json file, or if the offset.json file only specifies a jpg image (default: https://sneaker-window.vyking.io/vyking-apparel/1/assets/images/neutral.hdr).	String	`https://sneaker-window.vyking.io/vyking-apparel/1/assets/images/neutral.hdr`

Properties

Name	Description	Type
configPromise	Set the configuration as a promise that will resolve to an ArrayBuffer type. This allows a pre-fetched configuration to be used.	(config: Promise)
config	Set or unset the config property.	(url: `string` or `null`)
configKey	Set or unset the key property.	(key: `string` or `null`)
~~key~~	This is deprecated, use configKey instead. Set or unset the key property.	(key: `string` or `null`)
apparel	Set or unset the apparel property.	(url: `string` or `null`)
srcVideo	Get the video element providing the images to process.	`HTMLVideoElement` or `undefined`
canvas	Get the canvas element being rendered to.	`HTMLCanvasElement` or `undefined`
expiryDate	Get the configuration expiry date.	`Date`
paused	Returns a boolean that indicates whether the vyking-apparel element is paused.	`boolean`
variants	Read only record of the available apparel variants to choose amongst.	`VykingVariants`
variant	The apparel variant selected.	`VykingVariant`

Parts

Name	Description
default-advice	Scope your CSS to vyking-apparel::part(advice) to change the styling of the advice. Most common would be probably changing the background-color, height and width.
default-loader	Scope your CSS to vyking-apparel::part(default-loader) to change the styling of the default loader. Most common would be probably changing the background-color, height and width (avoid the transform property as that is how the progress is updated).
default-play	Scope your CSS to vyking-apparel::part(play) to change the styling of the play button. Most common would be probably changing the background-color, height and width.
default-variant-picker	Scope your CSS to vyking-apparel::part(default-variant-picker) to change the styling of the apparel variant picker. Most common would be probably changing the background-color, height and width.
qrcode	Scope your CSS to vyking-apparel::part(qrcode) to change the styling of the qrcode. Most common would be probably changing the height and width.

Slots

Name	Description
loader	By placing a child element under <vyking-apparel> with slot="loader", this element will replace the default loader. This is expected to be a CSS style only loader that ideally only uses compositing operations.
advice	By placing a child element under <vyking-apparel> with slot="advice", this element will replace the default advice displayed when tracked body parts are not detected.
play	By placing a child element under <vyking-apparel> with slot="play", this element will replace the default play button displayed when the experience is paused.
share	By placing a child element under <vyking-apparel> with slot="share", this element will replace the default share button.
variant-picker	By placing a child element under <vyking-apparel> with slot="variant-picker", this element will replace the default variant-picker tool.
src	By placing a child element under <vyking-apparel> with slot="src", this element will replace the default HTMLVideoElement. An HTMLVideoElement provides the source images to place the virtual apparel on. This can either specify a normal video, a custom srcObject or if the autocamera attribute is specified then a camera will be automatically attached to the video element and managed. If a custom srcObject is supplied then the vyking-apparel element will not manage the video element content (eg will not play or pause the video element). Set the hidden attribute to prevent processing delays from affecting the layout. Set the autoplay, muted, and playsinline attributes to allow the video to play.
canvas	The canvas the VTO experience will be rendered on. This must be provided, there is no default.

Events

Name	Description
error	An error has occurred. An interesting example is when errorEvent.error.cause.name === 'NotAllowedError', because this means the user denied camera permission.
expirydate	The date the configuration will expire.
anatomydetected	This event is dispatched when detection transitions between detecting and not detecting, or visa-versa, a body part. `detail: { bodyPart: string, detected: boolean }`
apparelchanged	Dispatched when the request to change the apparel has completed. `detail: { success: boolean, cause?: Error }`
aapparelmaterialaltered	Dispatched when the request to alter the apparel material has completed. `detail: { success: boolean, cause?: Error }`
imageprocessorchanged	Dispatched when the image processor has been loaded. `detail: { success: boolean, cause?: Error }`
play	Dispatched when transitioning to playing.
pause	Dispatched when the vyking-apparel element is paused.
finish	Dispatched when finished, usually when dispose() is called.

Global Configuration

Some configurable properties of the vyking-apparel element must be defined before the first vyking-apparel element is created, so set the configuration early. A global configuration option to do this can be define like so:

<script>
  self.HTMLVykingApparelElement = self.HTMLVykingApparelElement || {};
</script>

powerPreference

This controls the Three.js WebGLRender's power preference setting.

<script>
  self.HTMLVykingApparelElement = self.HTMLVykingApparelElement || {};
  self.HTMLVykingApparelElement.powerPreference = "high-performance";
</script>

isDisabled, disabledQRCodeUrl & disabledQRCodeCaption

The isDisabled option can be combined with the disabledQRCodeUrl and disabledQRCodeCaption options to display a QR code instead of the VTO experience under controlled conditions. For example, instead of showing the virtual shoe fitting experience on a desktop computer a QR code can be displayed that the user can point their mobile device at to run on instead.

<script>
  const isDisabled = () => {
    if (
      /android/i.test(navigator.userAgent) ||
      /iPad|iPhone|iPod/.test(navigator.userAgent)
    ) {
      return false;
    }

    return false;
  };
  self.HTMLVykingApparelElement = self.HTMLVykingApparelElement || {};
  self.HTMLVykingApparelElement.disabledQRCodeUrl = document.location.href;
  self.HTMLVykingApparelElement.disabledQRCodeCaption =
    "Please use your mobile";
  self.HTMLVykingApparelElement.isDisabled = isDisabled();
</script>

Introduction​

Quick Start​

Examples​

Configuration File​

Camera management​

Use of an iframe​

Viewport meta tag​

Releases​

Attributes​

Properties​

Parts​

Slots​

Events​

Global Configuration​

powerPreference​

isDisabled, disabledQRCodeUrl & disabledQRCodeCaption​