@snap/camera-kit
Version:
Camera Kit Web
37 lines (36 loc) • 21.7 kB
HTML
<html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CameraKitSource | CameraKit Web SDK - v1.13.0</title><meta name="description" content="Documentation for CameraKit Web SDK"/><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><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">CameraKit Web SDK - v1.13.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">CameraKit Web SDK</a></li><li><a href="CameraKitSource.html">CameraKitSource</a></li></ul><h1>Class CameraKitSource</h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>This general-purpose class represents a source of media for a <a href="CameraKitSession.html" class="tsd-kind-class">CameraKitSession</a>.</p>
<p>When an instance is passed to <a href="CameraKitSession.html#setsource" class="tsd-kind-method">CameraKitSession.setSource</a>, it will be "attached"
to the session. Later it may be "detached" from the session.</p>
<p>Passing a <a href="../interfaces/CameraKitSourceSubscriber.html" class="tsd-kind-interface">CameraKitSourceSubscriber</a> to the constructor allows callers to specify behavior
that will occur when the source is attached and detached. This can be used to e.g. update the render size.</p>
<p><strong>Important:</strong> Once a source has been attached to a <a href="CameraKitSession.html" class="tsd-kind-class">CameraKitSession</a>, it cannot be reattached,
even if it has been detached. You must supply a new instance of <a href="CameraKitSource.html" class="tsd-kind-class">CameraKitSource</a> to <a href="CameraKitSession.html#setsource" class="tsd-kind-method">CameraKitSession.setSource</a>.
If you want to reuse the existing source, you can use its <a href="CameraKitSource.html#copy" class="tsd-kind-method">CameraKitSource.copy</a> method to create a new
instance.</p>
</div><div class="tsd-comment tsd-typography"></div></section><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"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> 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="CameraKitSource.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><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">Methods</h3><div class="tsd-index-list"><a href="CameraKitSource.html#copy" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>copy</span></a>
<a href="CameraKitSource.html#setrendersize" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Render<wbr/>Size</span></a>
<a href="CameraKitSource.html#settransform" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Transform</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"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Constructors</h2></summary><section><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructorcamerakitsource" class="tsd-anchor"></a><span class="tsd-signature-keyword">new</span> <span class="tsd-kind-constructor-signature">CameraKitSource</span><span class="tsd-signature-symbol">(</span><br/> <span class="tsd-kind-parameter">sourceInfo</span><span class="tsd-signature-symbol">:</span> <a href="../interfaces/CameraKitSourceInfo.html" class="tsd-signature-type tsd-kind-interface">CameraKitSourceInfo</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">subscriber</span><span class="tsd-signature-symbol">?:</span> <a href="../interfaces/CameraKitSourceSubscriber.html" class="tsd-signature-type tsd-kind-interface">CameraKitSourceSubscriber</a><span class="tsd-signature-symbol">,</span><br/> <span class="tsd-kind-parameter">deviceInfo</span><span class="tsd-signature-symbol">?:</span> <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" class="tsd-signature-type external" target="_blank">Partial</a><span class="tsd-signature-symbol"><</span><a href="../interfaces/CameraKitDeviceOptions.html" class="tsd-signature-type tsd-kind-interface">CameraKitDeviceOptions</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">,</span><br/><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="CameraKitSource.html" class="tsd-signature-type tsd-kind-class">CameraKitSource</a><a href="#constructorcamerakitsource" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">sourceInfo</span>: <a href="../interfaces/CameraKitSourceInfo.html" class="tsd-signature-type tsd-kind-interface">CameraKitSourceInfo</a></span></li><li><span><span class="tsd-kind-parameter">subscriber</span>: <a href="../interfaces/CameraKitSourceSubscriber.html" class="tsd-signature-type tsd-kind-interface">CameraKitSourceSubscriber</a><span class="tsd-signature-symbol"> = {}</span></span></li><li><span><span class="tsd-kind-parameter">deviceInfo</span>: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" class="tsd-signature-type external" target="_blank">Partial</a><span class="tsd-signature-symbol"><</span><a href="../interfaces/CameraKitDeviceOptions.html" class="tsd-signature-type tsd-kind-interface">CameraKitDeviceOptions</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> = {}</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a href="CameraKitSource.html" class="tsd-signature-type tsd-kind-class">CameraKitSource</a></h4></li></ul></section></section></details><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Methods"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Methods</h2></summary><section><section class="tsd-panel tsd-member"><a id="copy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>copy</span><a href="#copy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="copy-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">copy</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">deviceInfo</span><span class="tsd-signature-symbol">?:</span> <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" class="tsd-signature-type external" target="_blank">Partial</a><span class="tsd-signature-symbol"><</span><a href="../interfaces/CameraKitDeviceOptions.html" class="tsd-signature-type tsd-kind-interface">CameraKitDeviceOptions</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="CameraKitSource.html" class="tsd-signature-type tsd-kind-class">CameraKitSource</a><a href="#copy-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Make a copy of the source, sharing the same <a href="../interfaces/CameraKitSourceSubscriber.html" class="tsd-kind-interface">CameraKitSourceSubscriber</a>.</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">deviceInfo</span>: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype" class="tsd-signature-type external" target="_blank">Partial</a><span class="tsd-signature-symbol"><</span><a href="../interfaces/CameraKitDeviceOptions.html" class="tsd-signature-type tsd-kind-interface">CameraKitDeviceOptions</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> = {}</span></span><div class="tsd-comment tsd-typography"><p>Optionally provide new device info for the copy (e.g. to change the camera type).</p>
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="CameraKitSource.html" class="tsd-signature-type tsd-kind-class">CameraKitSource</a></h4><p>The new <a href="CameraKitSource.html" class="tsd-kind-class">CameraKitSource</a></p>
<div class="tsd-comment tsd-typography"></div></li></ul></section><section class="tsd-panel tsd-member"><a id="setrendersize" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>set<wbr/>Render<wbr/>Size</span><a href="#setrendersize" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="setrendersize-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">setRenderSize</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">width</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">,</span> <span class="tsd-kind-parameter">height</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> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="tsd-signature-type external" target="_blank">Promise</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span><a href="#setrendersize-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Set the resolution used to render this source.</p>
<p>If greater performance is required, a smaller render size may boost frame-rate. It does come at a cost, including
loss of accuracy in various tracking and computer-vision algorithms (since they'll be operating on fewer pixels).</p>
<p>By default (i.e. if this method is never called), then the render size will match the size of the input media.
Best performance can be achieved by varying the size of the input media and allowing CameraKit to render at a
resolution that matches the input media -- this method should only be used if the input media resolution cannot
be changed to the desired size.</p>
<p>It’s important to distinguish render size from display size. The size at which the output canvases are displayed
on a web page is determined by the CSS of the page. It is distinct from the size at which CameraKit renders
Lenses. Performance is dominated by render size, while any display scaling (using CSS) can most often be thought
of as free.</p>
<p>The size of the Live and Capture <a href="../types/RenderTarget.html" class="tsd-kind-type-alias">RenderTarget</a> is always the same.</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">width</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>pixels</p>
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">height</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>pixels</p>
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="tsd-signature-type external" target="_blank">Promise</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></h4><p>Promise resolves when the render size has been successfully updated.</p>
<div class="tsd-comment tsd-typography"><div class="tsd-tag-todo"><h4 class="tsd-anchor-link"><a id="todo" class="tsd-anchor"></a>Todo<a href="#todo" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>Currently it's only valid to call <code>setRenderSize</code> after <code>CameraKitSession.play</code> has been called. This
constraint should be removed, so callers don't have to understand the underlying LensCore state machine.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="settransform" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>set<wbr/>Transform</span><a href="#settransform" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="settransform-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">setTransform</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">transform</span><span class="tsd-signature-symbol">:</span> <a href="Transform2D.html" class="tsd-signature-type tsd-kind-class">Transform2D</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="tsd-signature-type external" target="_blank">Promise</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span><a href="#settransform-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Apply a 2D transformation to the source (e.g. translation, rotation, scale).</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">transform</span>: <a href="Transform2D.html" class="tsd-signature-type tsd-kind-class">Transform2D</a></span><div class="tsd-comment tsd-typography"><p>Specifies the 3x3 matrix describing the transformation.</p>
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise" class="tsd-signature-type external" target="_blank">Promise</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">></span></h4><div class="tsd-comment tsd-typography"></div></li></ul></section></section></details></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Constructors"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Constructors</summary><div><a href="#constructor" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></div></details><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Methods"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Methods</summary><div><a href="#copy" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>copy</span></a><a href="#setrendersize" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Render<wbr/>Size</span></a><a href="#settransform" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Transform</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CameraKit Web SDK - v1.13.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>