Streamix Runtime

About Sizes

Size: 1920px x 1080px Size: 32units x 18units 1unit = 60px bottom = 0 left = 0

@function dpx($size) {
  @return calc($size * var(--streamixPx));
}

@function opacityBorderPx($size) {
  @return calc($size + var(--streamixBorderPadPx));
}

div {
  font-size: dpx(20px);  // output: font-size: 40px;
}

#streamix-stage {
    width: dpx(1920px);
    height: dpx(1080px);
    position: relative;
}

#streamix-opacity {
    width: dpx(1920px);
    height: dpx(1080px);
    position: relative;
}

About Opacity

Streamix Panel can be run in two modes:

• Luma keying -- single input with luma keying
• Keying layer -- dual input with key layer

When run in luma keyeing mode, the opacity is binary and anythin below a certain darkness threshold is keyed away. This saves an input channel on your ATEM Mini but prevents you from having translucent graphics on your stream

When run in keying layer mode, one input provides the graphics and the other provides keying data where opacity is set as:

• black = fully transparent
• white = fully opaque

In keying layer mode, the two outputs are rendered side-by-side. You will need a USB-C to dual HDMI splitter and spread your output window over both virtual monitors. The splitter can then feed your ATEM Mini on two channels.

{
  "__type__": "GraphicsPackage",
  "__version__": "1",
  "name": "graphics-logo",
  "displayName": "Graphics Logo",
  "description": "Show a nice logo at the top right corner of the stream.",
  "form": {
  }
}

<div id=“streamix-stage”></div>
<div id=“streamix-opacity”></div>

All graphics packages must handle both keying modes, and it is up to the graphics package developer to make sure that the appropriate keying layer is generated. In simple cases you can just add the following css, but you may want to be more specific.

#streamix-opacity .[package-name] * {
    opacity: 1;
    color: white!important;
    background-color: white!important;
}