# streamix-runtime

> Streamix Panel Javascript runtime.

Latest version **1.0.0-beta.9** (published 2023-05-27) · 0 weekly downloads

## Install

```sh
npm install streamix-runtime
pnpm add streamix-runtime
yarn add streamix-runtime
bun add streamix-runtime
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.9 |
| Published | 2023-05-27 |
| First published | 2022-09-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 306 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sebastian Ware |
| Maintainers | jhsware |

## Links

- npm: https://www.npmjs.com/package/streamix-runtime
- npm.io page: https://npm.io/package/streamix-runtime

## Dependencies (6)

- [inferno](https://npm.io/package/inferno.md) ^8.0.0
- [simple-peer](https://npm.io/package/simple-peer.md) ^9.11.1
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^4.4.1
- [inferno-animation](https://npm.io/package/inferno-animation.md) ^8.0.0
- [component-registry](https://npm.io/package/component-registry.md) ^3.0.0-beta.3
- [streamix-interfaces](https://npm.io/package/streamix-interfaces.md) ^1.0.0-beta.9

## Recent versions

- 1.0.0-beta.9 (latest) — 2023-05-27
- 1.0.0-beta.8 — 2023-02-10
- 1.0.0-beta.7 — 2023-02-10
- 1.0.0-beta.6 — 2022-10-22
- 1.0.0-beta.5 — 2022-09-27
- 1.0.0-beta.4 — 2022-09-27
- 1.0.0-beta.3 — 2022-09-27
- 1.0.0-beta.2 — 2022-09-27
- 1.0.0-beta.1 — 2022-09-27

## README

# Streamix Runtime


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

```scss
@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.

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

```html
<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.

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

---
_Source: https://npm.io/package/streamix-runtime · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._