Skip to main content
  1. Chyron
  2. PRIME VSAR
  3. Guides
  4. User Guide (v1.9)

20: VSAR Web

Overview

The focus of VSAR Web is to provide a web based user interface for controlling VSAR in a more intuitive streamlined way. It's designed as an alternative to Live Assist Panels (Chyron Panels) for controlling VSAR.

By default VSAR Web can be accessed on http://localhost:8080/ or on local network with the ip address of the machine followed by the port (:8080)

Notes
  • Supported browser is Chrome
  • VSAR Web is currently not yet optimized for Mobile/Tablet devices.

Chroma Keyer

The CHROMA KEYER tab can be found in the top left section of the web page. The Chroma keyer panel provides the ability to remotely control Internal Chroma Keyer.

image66.png

On air

While the On Air mode is on, the preview window does not update this to alleviate performance requirements for VSAR. On Air mode gets automatically activated when VSAR is in Play mode. The On Air mode can be manually overridden by clicking on the switch manually.

Keyer

In this dropdown a Chroma keyer that you wish to control is selected. if multiple VSARs (connected to VSAR Controller) have a Chroma keyer with the same Actor ID they are considered the same.

View

View mode gives the ability to change preview viewing mode.

  • Composite: the Output of the Chroma Keyer

image151.png

  • Foreground: the unmodified Input of the Chroma Keyer

image85.png

  • Matte: the Alpha channel visualized in grayscale

image9.png

Background

Dropdown for selecting background for Composite View. Background works only for Composite View mode and is only visible in VSAR Web.

image28.png

  • Checkerboard: Small/Large

image254.png

Color: simple color picked by the color picker

image230.png

  • Camera: image from camera in a VSAR (automatically detects new cameras in levels)

image238.png

Refine Passes

This section is for editing key and values of a chroma keyer.

Preset

Preset section is for saving values of chroma keyer.

image3.png

  • Create present - (the [+] icon) allows the creation of a new present from current chroma keyer values.
  • Revert present - (the [⬅] icon) allows to revert current values to preset values. If the selected preset is Default, values are reverted to default values of the chroma keyer.
  • Delete preset - (the [🗑️] icon) allows to delete current preset, default preset can’t be deleted.
  • Save - saves changes to current preset.

Presets are stored in VSAR Project content next to a Chroma keyer asset as Data Table, with the suffix “_Presets”. This asset is considered unsaved after changes/creation by Unreal Engine, if you wish to keep these presets save this asset before or on project close.

Passes

This section allows you to select for what chroma keyer pass the values are edited. 

image95.png

Individual passes can be disabled/enabled with the small switches on the right side.

For Chroma keying and Despill passes Key Colors can be selected, both allow for multiple keying colors.

  • New key color can be added with the blue [+] icon.
  • All key colors can be reverted to default with the yellow gear icon.
  • Clicking on the color bar opens color adjustments pop up.
  • Clicking on the Gray [+] icon, starts a draw pick.
  • Clicking on the the [🗑️] icon removes the key color.

Draw pick

When selecting color through the draw pick you can click on the preview to select a single point or click and hold the left mouse button to draw, this selects an array of points that gets averaged resulting in a single color.

image63.png

Values

This section is for editing individual pass parameters.

image267.png

Each input field has a name, value section where a new value can be entered, slider button and a reset button.

image209.png

The slider button opens a slider popup that allows changing the value with the range slider.

image35.png

Chroma keying pass has advanced settings that can be revealed by clicking on the advanced settings button.

image156.png

Setting for ranges of values and what values are considered advanced are in: VSAR Web settings config.js

See the VSAR Setup Guide for more info.

Synced Chroma keyers

When multiple machines are connected to VSAR Controller.

Chroma keyer supports synchronized workflow where a single chroma keyer represents chroma keyers on multiple machines this happens while there is a chroma keyer with the same Actor ID.

image44.png

(“ChromaKeyer_2” in this example)

The idea is to have a copy of the project on multiple machines to support multiple camera inputs and control a single chroma key across them.

When keyers are in sync there is numeric indicator next to them how many machines it's representing

image54.png

(the [2] indicating two in this example)

While in this mode presets are stored for multiple projects simultaneously and work the same as usual. There are cases where presets can be desynchronised, then the same numeric indicator “[number of machines]” would show for the synchronized presets and the desynchronised get additional “_index”

image168.png

In this example, Studio2 preset is synchronized and the Studio1 preset is desynchronised creating a second preset instance Studio1_1.

For more info on the VSAR controller service configuration, see the VSAR Setup Guide.