# Prop: handsfree.debug

This property contains references to all the debug elements used to hold the webcam stream and the skeleton and keypoint overlays. The following elements are all automatically created if you omit the .setup config during instantiation.

# Properties

handsfree.debug.$canvas[modelName]: CANVAS
The canvas element used for overlaying the skeleton/keypoints
handsfree.debug.context[modelName]: CANVAS
The canvas context used for overlaying the skeleton/keypoints
handsfree.debug.$video: VIDEO
The video element containing the webcam stream. You can access the stream directly with handsfree.debug.$video.srcObject. Currently this is only used by the weboji model as each model handles the stream differently. This will be unified eventually!
handsfree.debug.$wrap: CANVAS
The element that contains the canvases and video. If you need to move all the debug elements around in your DOM, this is the element to target

# Example

const handsfree = new Handsfree({hands: true})
handsfree.start()

// Move the debuggers to a DIV#debug-window
document.querySelector('#debug-window').appendChild(handsfree.debug.$wrap)

// Apply a filter to the canvas
handsfree.debug.$canvas.weboji.style.filter = 'blur(4px)'
Last Updated: 12/18/2020, 1:32:44 PM
Debugger