@virtualscenery/greenscreenstream
Version:
Genereate new MediaStreams or Canvas elements based on MediaStreams (webcam) with any background image/video. Greenscreen your webcam and enable virtual backgrounds in your web applications.
91 lines (90 loc) • 86.8 kB
HTML
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>GreenScreenStream | @virtualscenery/greenscreenstream</title><meta name="description" content="Documentation for @virtualscenery/greenscreenstream"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">@virtualscenery/greenscreenstream</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">GreenScreenStream</a></li></ul><h1>Class GreenScreenStream</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>The <code>GreenScreenStream</code> class provides a virtual background solution for video streams,
supporting both chroma key (green screen) and machine learning-based background segmentation.
It manages video sources, background images or videos, and rendering via WebGL, and can output
the processed stream as a MediaStream suitable for use in web applications.</p>
<p>Features:</p>
<ul>
<li>Supports chroma key (green screen) and ML-based segmentation (BodyPix).</li>
<li>Allows dynamic background replacement with images or videos.</li>
<li>Provides methods to start/stop rendering, add video tracks, and capture the output stream.</li>
<li>Offers color analysis utilities (dominant color, palette extraction).</li>
<li>Configurable mask, chroma key, and rendering settings.</li>
<li>Integrates with WebGL for efficient real-time compositing.</li>
</ul>
<p>Usage:</p>
<ol>
<li>Instantiate with the desired green screen method and resolution.</li>
<li>Call <code>initialize()</code> with a background source and optional configuration.</li>
<li>Add a video track (e.g., from a webcam) using <code>addVideoTrack()</code>.</li>
<li>Start rendering with <code>start()</code>.</li>
<li>Capture the processed stream via <code>captureStream()</code>.</li>
<li>Stop rendering with <code>stop()</code>.</li>
</ol>
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="typescript"><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-2">gss</span><span class="hl-1"> = </span><span class="hl-0">new</span><span class="hl-1"> </span><span class="hl-3">GreenScreenStream</span><span class="hl-1">(</span><span class="hl-4">GreenScreenMethod</span><span class="hl-1">.</span><span class="hl-4">VirtualBackground</span><span class="hl-1">, { </span><span class="hl-4">x:</span><span class="hl-1"> </span><span class="hl-5">1280</span><span class="hl-1">, </span><span class="hl-4">y:</span><span class="hl-1"> </span><span class="hl-5">720</span><span class="hl-1"> });</span><br/><span class="hl-6">await</span><span class="hl-1"> </span><span class="hl-4">gss</span><span class="hl-1">.</span><span class="hl-3">initialize</span><span class="hl-1">(</span><span class="hl-7">'background.jpg'</span><span class="hl-1">);</span><br/><span class="hl-6">await</span><span class="hl-1"> </span><span class="hl-4">gss</span><span class="hl-1">.</span><span class="hl-3">addVideoTrack</span><span class="hl-1">(</span><span class="hl-4">webcamTrack</span><span class="hl-1">);</span><br/><span class="hl-4">gss</span><span class="hl-1">.</span><span class="hl-3">start</span><span class="hl-1">();</span><br/><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-2">outputStream</span><span class="hl-1"> = </span><span class="hl-4">gss</span><span class="hl-1">.</span><span class="hl-3">captureStream</span><span class="hl-1">();</span>
</code><button type="button">Copy</button></pre>
</div></div></section><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L66">green-screen-stream.ts:66</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Constructor"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="#backgroundcolor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>background<wbr/>Color</span></a>
<a href="#backgroundsource" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>background<wbr/>Source</span></a>
<a href="#bodypix" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>body<wbr/>Pix</span></a>
<a href="#bufferfrag" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>buffer<wbr/>Frag</span></a>
<a href="#buffervert" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>buffer<wbr/>Vert</span></a>
<a href="#canvas" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>canvas</span></a>
<a href="#canvasel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>canvas<wbr/>El?</span></a>
<a href="#ctx" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>ctx</span></a>
<a href="#demolished" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>demolished</span></a>
<a href="#fliphorizontal" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>flip<wbr/>Horizontal</span></a>
<a href="#foregroundcolor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>foreground<wbr/>Color</span></a>
<a href="#frame" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>frame</span></a>
<a href="#greenscreenmethod" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>green<wbr/>Screen<wbr/>Method</span></a>
<a href="#isrendering" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>is<wbr/>Rendering</span></a>
<a href="#mainfrag" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>main<wbr/>Frag</span></a>
<a href="#mainvert" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>main<wbr/>Vert</span></a>
<a href="#maskbluramount" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>mask<wbr/>Blur<wbr/>Amount</span></a>
<a href="#maxfps" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>max<wbr/>Fps</span></a>
<a href="#mediastream" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>media<wbr/>Stream</span></a>
<a href="#modelloaded" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>model<wbr/>Loaded</span></a>
<a href="#opacity" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>opacity</span></a>
<a href="#rafid" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>raf<wbr/>Id</span></a>
<a href="#resolution" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>resolution</span></a>
<a href="#starttime" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>start<wbr/>Time</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="#addvideotrack" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Video<wbr/>Track</span></a>
<a href="#capturestream" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>capture<wbr/>Stream</span></a>
<a href="#dominant" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>dominant</span></a>
<a href="#flipstreamhorizontal" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>flip<wbr/>Stream<wbr/>Horizontal</span></a>
<a href="#getcolorsfromstream" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>get<wbr/>Colors<wbr/>From<wbr/>Stream</span></a>
<a href="#initialize" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>initialize</span></a>
<a href="#pallette" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>pallette</span></a>
<a href="#scaleimagetocanvas" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>scale<wbr/>Image<wbr/>To<wbr/>Canvas</span></a>
<a href="#setbackground" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Background</span></a>
<a href="#setbodypixmodel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Body<wbr/>Pix<wbr/>Model</span></a>
<a href="#setchromakey" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Chroma<wbr/>Key</span></a>
<a href="#setmaskrange" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Mask<wbr/>Range</span></a>
<a href="#start" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>start</span></a>
<a href="#stop" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Method"><use href="../assets/icons.svg#icon-2048"></use></svg><span>stop</span></a>
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Constructors"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Constructors</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="constructor"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="constructorgreenscreenstream"><span class="tsd-signature-keyword">new</span> <span class="tsd-kind-constructor-signature">GreenScreenStream</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">greenScreenMethod</span><span class="tsd-signature-symbol">:</span> <a href="../enums/GreenScreenMethod.html" class="tsd-signature-type tsd-kind-enum">GreenScreenMethod</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">resolution</span><span class="tsd-signature-symbol">:</span> <a href="../enums/VideoResolution.html" class="tsd-signature-type tsd-kind-enum">VideoResolution</a> <span class="tsd-signature-symbol">|</span> <a href="Vector2.html" class="tsd-signature-type tsd-kind-class">Vector2</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">canvasEl</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">HTMLCanvasElement</span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="" class="tsd-signature-type tsd-kind-class">GreenScreenStream</a><a href="#constructorgreenscreenstream" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Constructs a new instance of the green screen stream handler.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">greenScreenMethod</span>: <a href="../enums/GreenScreenMethod.html" class="tsd-signature-type tsd-kind-enum">GreenScreenMethod</a></span><div class="tsd-comment tsd-typography"><p>The method to use for green screen processing.</p>
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">resolution</span>: <a href="../enums/VideoResolution.html" class="tsd-signature-type tsd-kind-enum">VideoResolution</a> <span class="tsd-signature-symbol">|</span> <a href="Vector2.html" class="tsd-signature-type tsd-kind-class">Vector2</a></span><div class="tsd-comment tsd-typography"><p>The desired video resolution or a vector specifying width and height.</p>
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">canvasEl</span>: <span class="tsd-signature-type">HTMLCanvasElement</span></span><div class="tsd-comment tsd-typography"><p>(Optional) An existing HTMLCanvasElement to use for rendering. If not provided, a new canvas will be created.</p>
<p>Initializes the media stream and canvas, sets the canvas resolution, and determines whether to use machine learning-based background removal based on the selected green screen method.</p>
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="" class="tsd-signature-type tsd-kind-class">GreenScreenStream</a></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L107">green-screen-stream.ts:107</a></li></ul></aside></div></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="backgroundcolor"><span>background<wbr/>Color</span><a href="#backgroundcolor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">backgroundColor</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/RGBA.html" class="tsd-signature-type tsd-kind-interface">RGBA</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L75">green-screen-stream.ts:75</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="backgroundsource"><span>background<wbr/>Source</span><a href="#backgroundsource" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">backgroundSource</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLImageElement</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">HTMLVideoElement</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L80">green-screen-stream.ts:80</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="bodypix"><span>body<wbr/>Pix</span><a href="#bodypix" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">bodyPix</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">BodyPix</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L79">green-screen-stream.ts:79</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="bufferfrag"><span>buffer<wbr/>Frag</span><a href="#bufferfrag" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">bufferFrag</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = BUFFER_FRAG</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L93">green-screen-stream.ts:93</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="buffervert"><span>buffer<wbr/>Vert</span><a href="#buffervert" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">bufferVert</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = BUFFER_VERT</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L92">green-screen-stream.ts:92</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="canvas"><span>canvas</span><a href="#canvas" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">canvas</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">HTMLCanvasElement</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L95">green-screen-stream.ts:95</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="canvasel"><code class="tsd-tag">Optional</code><span>canvas<wbr/>El</span><a href="#canvasel" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">canvasEl</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">HTMLCanvasElement</span></div><div class="tsd-comment tsd-typography"><p>(Optional) An existing HTMLCanvasElement to use for rendering. If not provided, a new canvas will be created.</p>
<p>Initializes the media stream and canvas, sets the canvas resolution, and determines whether to use machine learning-based background removal based on the selected green screen method.</p>
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L107">green-screen-stream.ts:107</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="ctx"><span>ctx</span><a href="#ctx" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">ctx</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">WebGLRenderingContext</span> <span class="tsd-signature-symbol">|</span> <span class="tsd-signature-type">WebGL2RenderingContext</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L76">green-screen-stream.ts:76</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="demolished"><span>demolished</span><a href="#demolished" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">demolished</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">DemolishedRenderer</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L77">green-screen-stream.ts:77</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="fliphorizontal"><span>flip<wbr/>Horizontal</span><a href="#fliphorizontal" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">flipHorizontal</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L72">green-screen-stream.ts:72</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="foregroundcolor"><span>foreground<wbr/>Color</span><a href="#foregroundcolor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">foregroundColor</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/RGBA.html" class="tsd-signature-type tsd-kind-interface">RGBA</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L74">green-screen-stream.ts:74</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="frame"><span>frame</span><a href="#frame" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">frame</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = -1</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L68">green-screen-stream.ts:68</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="greenscreenmethod"><span>green<wbr/>Screen<wbr/>Method</span><a href="#greenscreenmethod" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">greenScreenMethod</span><span class="tsd-signature-symbol">:</span> <a href="../enums/GreenScreenMethod.html" class="tsd-signature-type tsd-kind-enum">GreenScreenMethod</a></div><div class="tsd-comment tsd-typography"><p>The method to use for green screen processing.</p>
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L107">green-screen-stream.ts:107</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="isrendering"><span>is<wbr/>Rendering</span><a href="#isrendering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">isRendering</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L67">green-screen-stream.ts:67</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mainfrag"><span>main<wbr/>Frag</span><a href="#mainfrag" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">mainFrag</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = MAIN_FRAG</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L90">green-screen-stream.ts:90</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mainvert"><span>main<wbr/>Vert</span><a href="#mainvert" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">mainVert</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> = MAIN_VERT</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L91">green-screen-stream.ts:91</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="maskbluramount"><span>mask<wbr/>Blur<wbr/>Amount</span><a href="#maskbluramount" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">maskBlurAmount</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L73">green-screen-stream.ts:73</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="maxfps"><span>max<wbr/>Fps</span><a href="#maxfps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">maxFps</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L94">green-screen-stream.ts:94</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="mediastream"><span>media<wbr/>Stream</span><a href="#mediastream" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">mediaStream</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">MediaStream</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L78">green-screen-stream.ts:78</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="modelloaded"><span>model<wbr/>Loaded</span><a href="#modelloaded" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">modelLoaded</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L96">green-screen-stream.ts:96</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="opacity"><span>opacity</span><a href="#opacity" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">opacity</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L71">green-screen-stream.ts:71</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rafid"><span>raf<wbr/>Id</span><a href="#rafid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">rafId</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L69">green-screen-stream.ts:69</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="resolution"><span>resolution</span><a href="#resolution" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">resolution</span><span class="tsd-signature-symbol">:</span> <a href="Vector2.html" class="tsd-signature-type tsd-kind-class">Vector2</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L81">green-screen-stream.ts:81</a></li></ul></aside></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="starttime"><span>start<wbr/>Time</span><a href="#starttime" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">startTime</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = null</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L70">green-screen-stream.ts:70</a></li></ul></aside></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Methods</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="addvideotrack"><span>add<wbr/>Video<wbr/>Track</span><a href="#addvideotrack" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="addvideotrack-1"><span class="tsd-kind-call-signature">addVideoTrack</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">track</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">MediaStreamTrack</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span><a href="#addvideotrack-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a video track to the media stream and sets up the source video element.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">track</span>: <span class="tsd-signature-type">MediaStreamTrack</span></span><div class="tsd-comment tsd-typography"><p>The video track to add.</p>
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">></span></h4><p>A promise that resolves when the track is added and the source video is ready.</p>
<div class="tsd-comment tsd-typography"><div class="tsd-tag-memberof"><h4 class="tsd-anchor-link" id="memberof">Memberof<a href="#memberof" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>GreenScreenStream</p>
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L201">green-screen-stream.ts:201</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="capturestream"><span>capture<wbr/>Stream</span><a href="#capturestream" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="capturestream-1"><span class="tsd-kind-call-signature">captureStream</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">fps</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">MediaStream</span><a href="#capturestream-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Captures the current state of the canvas as a MediaStream.
Optionally, you can specify the frames per second (fps) for the captured stream.</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag">Optional</code><span class="tsd-kind-parameter">fps</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>The frames per second for the captured stream (default is 25).</p>
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">MediaStream</span></h4><p>The captured MediaStream from the canvas.</p>
<div class="tsd-comment tsd-typography"><div class="tsd-tag-memberof"><h4 class="tsd-anchor-link" id="memberof-1">Memberof<a href="#memberof-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>GreenScreenStream</p>
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L231">green-screen-stream.ts:231</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="dominant"><span>dominant</span><a href="#dominant" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="dominant-1"><span class="tsd-kind-call-signature">dominant</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">imageData</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">ImageData</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">pixelCount</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><a href="#dominant-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Get the most dominant color in the imageData provided</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">imageData</span>: <span class="tsd-signature-type">ImageData</span></span><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">pixelCount</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span></h4><p>The dominant color as an RGB array.</p>
<div class="tsd-comment tsd-typography"><div class="tsd-tag-memberof"><h4 class="tsd-anchor-link" id="memberof-2">Memberof<a href="#memberof-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>GreenScreenStream</p>
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L333">green-screen-stream.ts:333</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="flipstreamhorizontal"><span>flip<wbr/>Stream<wbr/>Horizontal</span><a href="#flipstreamhorizontal" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="flipstreamhorizontal-1"><span class="tsd-kind-call-signature">flipStreamHorizontal</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">void</span><a href="#flipstreamhorizontal-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Flips the video stream horizontally.
Toggles the <code>flipHorizontal</code> property in the segment configuration.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"><div class="tsd-tag-memberof"><h4 class="tsd-anchor-link" id="memberof-3">Memberof<a href="#memberof-3" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>GreenScreenStream</p>
</div></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/VirtualScenery/greenscreenstream/blob/2630a063f118fe751b03669a9a6648668a0a01b4/src/green-screen-stream.ts#L391">green-screen-stream.ts:391</a></li></ul></aside></div></li></ul></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="getcolorsfromstream"><span>get<wbr/>Colors<wbr/>From<wbr/>Stream</span><a href="#getcolorsfromstream" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class=""><div class="tsd-signature tsd-anchor-link" id="getcolorsfromstream-1"><span class="tsd-kind-call-signature">getColorsFromStream</span><span class="tsd-signature-symbol">()</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{</span><br/> <span class="tsd-kind-property">dominant</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">;</span><br/> <span class="tsd-kind-property">palette</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span><a href="#getcolorsfromstream-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></div><div class="tsd-description"><div class="tsd-comment tsd-typography"><p>Retrieves the color palette and dominant color from the current video stream.
This method captures the current frame from the video source, processes it,
and returns an object containing the color palette and dominant color.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{</span> <span class="tsd-kind-property">dominant</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">[</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">]</span><span class="tsd-signature-symbol">;</span> <span class="tsd-kind-property">palette</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">[</span><span class="tsd-sign