Create Overlay Configuration

Overlay configuration is used to change the content to be overlaid onto the output video.

By default, this includes code only.

  1. Navigate to the Control Room for the Project

  2. Edit the target Event

  3. Update the Watermark Config field with the desired fields
    Size, Opacity and Position can be set at the top level and optionally overridden for each layer

    • size: font size integer for the fields

    • layers: an array of field lists - choose from:

      • code - a generated code to identify the user

      • name - name assigned to the Watermark user entry

      • username - username assigned to the Watermark user entry

      • logo and url - an image, must have accompanying url entry with the location of the file
        Additional entries can be added to override the settings for each layer for size, opacity or position. See below for examples

    • opacity (optional): a decimal value representing the transparency of the layer, if specified must be between 0.0 (fully transparent/clear) and 1.0 (fully opaque/solid)

    • style (optional): Set to Tiled for values to be repeated in a fixed, angled position over the entire video

    • position (optional): Fixes the layer to a static position
      Choose from values: Left, Right, Top, Bottom, TopLeft, TopRight, BottomLeft, BottomRight

  4. Save Changes

Ensure that the JSON input is valid, for example with a linting tool

Example Watermark Overlay Configuration

Moving Code (default)

The following is the default setting, with code set to size 40 and a moving position.

{
  "size": 40,
  "layers": [
    {
      "field": "code"
    }
  ]
}
JSON

Moving Name and Username

The following sets username to size 45 and overrides the size for name to 35.

Both have a moving positioning.

{
  "size": 45,
  "layers": [
    {
      "field": "name",
      "size": "35"
    },
    { "field": "username" }
  ]
}
JSON

Moving Name, Username and Code

The following sets name and username to size 60, with a moving position.

Additionally, code is set to size 40, with 10% opacity and a fixed bottom left position.

{
  "size": 60,
  "layers": [
    { "field": "name" },
    { "field": "username" },
    {
      "field": "code",
      "size": 40,
      "opacity": 0.1,
      "position": "BottomLeft"
    }
  ]
}
JSON

Tiled Name and Username

{
  "size": 60,
  "opacity": 0.15,
  "style": "Tiled",
  "layers": [{ "field": "name" }, { "field": "username" }]
}
JSON 
{
  "size": 60,
  "opacity": 0.5,
  "style": "Tiled",
  "layers": [
    { "field": "name" },
    { "field": "username" },
    {
      "field": "logo",
      "url": "https://push.live/wp-content/uploads/2020/11/PUSH-WHITE-ICON.png",
      "size": 0.3,
      "opacity": 0.5
    }
  ]
}
JSON