The Render function defines what visual rendering should be done on each frame of the video. It can be used to visualize the output of Guru’s AI platform. It is optional.

​
Function Defintion

The Render function receives two arguments: one of type FrameCanvas, defined below, and a second which is the output of the Process function for that frame. Your implementation can use the FrameCanvas object to modify the appearance of the output video, using information from the output of Process.

Refer to the Frame for a definition of the common types used by FrameCanvas.

The Render function allows you to modify the FrameCanvas with the output of the Process function.

/**
 * @param {FrameCanvas} frameCanvas - A canvas for the current frame, on which draw operations can be made.
 * @param {*} processResult - The output of the Process function for this frame.
 */
function renderFrame(frameCanvas, processResult) {
}

/**
 * The canvas for a frame, onto which draw operations can be made. This is passed as input to renderFrame().
 */
class FrameCanvas {

  /**
   * Draw a box with the given color around this object's location onto the frame.
   *
   * @param {FrameObject} object - The object around which the box will be drawn.
   * @param {Color} color - The color of the box.
   * @param {number} width - The width of the box's border, in pixels. Defaults to 5.
   * @return {FrameCanvas} This FrameCanvas, that can be used to chain calls.
   */
  drawBoundingBox(object, color, width = 2);

  /**
   * Draws a circle on the canvas.
   *
   * @param {Position} position - The position of the center of the circle.
   * @param {number} radius - The radius of the circle, in pixels.
   * @param {Color} color - The color of the circle.
   * @param {boolean} filled - True if the circle should be filled in. Default true.
   * @param {number} width - If not filled, then this is the width of the circle boundary in pixels. Default 2.
   * @param {number} alpha - Optional, how transparent the circle should be. 0 is invisible, 1 is fully visible. Default is 1.
   */
  drawCircle(position, radius, color, {
    filled = true,
    width = 2,
    alpha = 1.0,
  } = {});

  /**
   * Draws a line between two points on the canvas.
   *
   * @param {Position} from - The position to draw from.
   * @param {Position} to - The position to draw to.
   * @param {Color} color - The color of the line.
   * @param {number} width - Optional, the width of the line in pixels. Default 2.
   * @param {number} alpha - Optional, how transparent the line should be. 0 is invisible, 1 is fully visible. Default is 1.
   */
  drawLine(from, to, color, {
    width = 2,
    alpha = 1.0,
  } = {});

  /**
   * Draws a rectangle on the canvas. The rectangle may have a background color, or be transparent.
   *
   * @param {Position} topLeft - The position of the top-left corner of the rectangle.
   * @param {Position} bottomRight - The position of the bottom-right corner of the rectangle.
   * @param {Color} borderColor - Optional, the color of border of the rectangle. Either this or backgroundColor must be present.
   * @param {Color} backgroundColor - Optional, the color of background of the rectangle. If omitted then the background will be transparent. Either this or backgroundColor must be present.
   * @param {number} width - Optional, the width of the border in pixels. Default 2.
   * @param {number} alpha - Optional, how transparent the rectangle should be. 0 is invisible, 1 is fully visible. Default is 1.
   */
  drawRect(topLeft, bottomRight, {
    borderColor = undefined,
    backgroundColor = undefined,
    width = 2,
    alpha = 1.0,
  } = {});

  /**
   * Draw the skeleton for the given object onto the frame. Note that the object must have its keypoints
   * inferred in order to draw the skeleton.
   *
   * @param {FrameObject} object - The object whose skeleton will be drawn onto the canvas.
   * @param {Color} lineColor - The color of the lines connecting the keypoints in the skeleton.
   * @param {Color} keypointColor - The color of the circles representing the joint keypoints in the skeleton.
   * @param {number} lineWidth - The width, in pixels, of the lines connecting the keypoints. Defaults to 5.
   * @param {number} keypointRadius - The radius, in pixels, of the circles representing the keypoints. Defaults to 5.
   */
  drawSkeleton(object, lineColor, keypointColor, lineWidth = 2, keypointRadius = 5);

  /**
   * Draws text at a specific location on the canvas.
   *
   * @param {string} text - The text to draw.
   * @param {Position} position - The location to draw at. 0,0 is the top-left corner.
   * @param {Color} color - The color of the text.
   * @param {number} maxWidth - Optional, the maximum width of the text in pixels, after which it will wrap. Default 1000.
   * @param {number} fontSize - Optional, the size of the font. Default 24.
   * @param {number} padding - Optional, the amount of padding to apply to the location of the text from its location. Default 0.
   * @param {number} alpha - Optional, how transparent the font should be. 0 is invisible, 1 is fully visible. Default is 1.
   */
  drawText(text, position, color, {
    maxWidth = 1000,
    fontSize = 24,
    padding = 0,
    alpha = 1.0,
  } = {});
MovementAnalyzerOutputs