@snap/camera-kit 1.10.0 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -54
- package/dist/CameraKit.d.ts +7 -0
- package/dist/CameraKit.d.ts.map +1 -1
- package/dist/CameraKit.js +7 -0
- package/dist/CameraKit.js.map +1 -1
- package/dist/common/loadScript.d.ts +2 -1
- package/dist/common/loadScript.d.ts.map +1 -1
- package/dist/common/loadScript.js.map +1 -1
- package/dist/configuration.d.ts +15 -9
- package/dist/configuration.d.ts.map +1 -1
- package/dist/configuration.js +5 -2
- package/dist/configuration.js.map +1 -1
- package/dist/environment.js +1 -1
- package/dist/environment.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lens-core-module/generated-types.d.ts +13 -1
- package/dist/lens-core-module/generated-types.d.ts.map +1 -1
- package/dist/lens-core-module/generated-types.js.map +1 -1
- package/dist/lens-core-module/loader/lensCoreFactory.d.ts.map +1 -1
- package/dist/lens-core-module/loader/lensCoreFactory.js +7 -5
- package/dist/lens-core-module/loader/lensCoreFactory.js.map +1 -1
- package/dist/lensCoreWasmVersions.js +3 -3
- package/dist/lensCoreWasmVersions.js.map +1 -1
- package/dist/logger/logger.d.ts +45 -9
- package/dist/logger/logger.d.ts.map +1 -1
- package/dist/logger/logger.js +21 -1
- package/dist/logger/logger.js.map +1 -1
- package/dist/logger/registerLogEntriesSubscriber.d.ts.map +1 -1
- package/dist/logger/registerLogEntriesSubscriber.js +2 -15
- package/dist/logger/registerLogEntriesSubscriber.js.map +1 -1
- package/dist/metrics/businessEventsReporter.js +1 -1
- package/dist/metrics/businessEventsReporter.js.map +1 -1
- package/dist/trusted-types/trustedTypesHandler.d.ts +20 -0
- package/dist/trusted-types/trustedTypesHandler.d.ts.map +1 -0
- package/dist/trusted-types/trustedTypesHandler.js +30 -0
- package/dist/trusted-types/trustedTypesHandler.js.map +1 -0
- package/docs/html/assets/hierarchy.js +1 -1
- package/docs/html/assets/navigation.js +1 -1
- package/docs/html/assets/search.js +1 -1
- package/docs/html/classes/CameraKit.html +2 -2
- package/docs/html/classes/CameraKitSession.html +2 -2
- package/docs/html/classes/CameraKitSource.html +2 -2
- package/docs/html/classes/LensPerformanceMeasurement.html +2 -2
- package/docs/html/classes/LensPerformanceMetrics.html +2 -2
- package/docs/html/classes/LensRepository.html +2 -2
- package/docs/html/classes/Transform2D.html +2 -2
- package/docs/html/classes/TypedCustomEvent.html +3 -3
- package/docs/html/classes/TypedEventTarget.html +2 -2
- package/docs/html/enums/Lens_CameraFacing.html +2 -2
- package/docs/html/functions/bootstrapCameraKit.html +2 -2
- package/docs/html/functions/createExtension.html +2 -2
- package/docs/html/functions/createImageSource.html +2 -2
- package/docs/html/functions/createMediaStreamSource.html +2 -2
- package/docs/html/functions/createVideoSource.html +2 -2
- package/docs/html/functions/estimateLensPerformance.html +2 -2
- package/docs/html/functions/filePickerFactory.html +2 -2
- package/docs/html/functions/getExtensionRequestContext.html +2 -2
- package/docs/html/functions/lensSourcesFactory.html +2 -2
- package/docs/html/functions/remoteApiServicesFactory.html +1 -1
- package/docs/html/hierarchy.html +1 -1
- package/docs/html/index.html +19 -19
- package/docs/html/interfaces/BitmojiUserInfo.html +2 -2
- package/docs/html/interfaces/CameraKitBootstrapConfiguration.html +12 -9
- package/docs/html/interfaces/CameraKitDeviceOptions.html +3 -3
- package/docs/html/interfaces/CameraKitSourceInfo.html +2 -2
- package/docs/html/interfaces/CameraKitSourceSubscriber.html +2 -2
- package/docs/html/interfaces/ComputedFrameMetrics.html +2 -2
- package/docs/html/interfaces/CreateSessionOptions.html +2 -2
- package/docs/html/interfaces/EstimatedLensPerformance.html +2 -2
- package/docs/html/interfaces/Font.html +2 -2
- package/docs/html/interfaces/FriendUserInfo.html +2 -2
- package/docs/html/interfaces/FunctionSourceOptions.html +2 -2
- package/docs/html/interfaces/Keyboard.html +2 -2
- package/docs/html/interfaces/KeyboardActiveEvent.html +2 -2
- package/docs/html/interfaces/Lens.html +2 -2
- package/docs/html/interfaces/LensCreator.html +2 -2
- package/docs/html/interfaces/LensHttpRequest.html +2 -2
- package/docs/html/interfaces/LensLaunchData.html +2 -2
- package/docs/html/interfaces/LensSource.html +2 -2
- package/docs/html/interfaces/LensUserData.html +2 -2
- package/docs/html/interfaces/LoadAssetRequest.html +2 -2
- package/docs/html/interfaces/MediaStreamSourceOptions.html +3 -3
- package/docs/html/interfaces/Preview.html +2 -2
- package/docs/html/interfaces/RemoteApiRequest.html +2 -2
- package/docs/html/interfaces/RemoteApiResponse.html +2 -2
- package/docs/html/interfaces/RemoteApiService.html +2 -2
- package/docs/html/interfaces/ScreenRegion.html +2 -2
- package/docs/html/interfaces/Snapcode.html +2 -2
- package/docs/html/interfaces/UriCancelRequest.html +2 -2
- package/docs/html/interfaces/UriRequest.html +2 -2
- package/docs/html/interfaces/UriResponse.html +2 -2
- package/docs/html/interfaces/VideoSourceOptions.html +3 -3
- package/docs/html/modules.html +1 -1
- package/docs/html/types/ArgumentValidationError.html +2 -2
- package/docs/html/types/AssetLoader.html +2 -2
- package/docs/html/types/AssetResponse.html +1 -1
- package/docs/html/types/AssetTiming.html +2 -2
- package/docs/html/types/BenchmarkError.html +1 -1
- package/docs/html/types/BootstrapError.html +2 -2
- package/docs/html/types/CacheKeyNotFoundError.html +1 -1
- package/docs/html/types/CameraKitSessionEventListener.html +2 -2
- package/docs/html/types/CameraKitSessionEvents.html +2 -2
- package/docs/html/types/CameraKitSourceError.html +1 -1
- package/docs/html/types/ConfigurationError.html +2 -2
- package/docs/html/types/FetchHandler.html +1 -1
- package/docs/html/types/FilePicker.html +2 -2
- package/docs/html/types/FilePickerOptions.html +2 -2
- package/docs/html/types/FilePickerResult.html +2 -2
- package/docs/html/types/KeyboardEventListener.html +2 -2
- package/docs/html/types/KeyboardEvents.html +2 -2
- package/docs/html/types/LegalError.html +1 -1
- package/docs/html/types/LensAbortError.html +2 -2
- package/docs/html/types/LensAssetError.html +2 -2
- package/docs/html/types/LensContentValidationError.html +1 -1
- package/docs/html/types/LensError.html +1 -1
- package/docs/html/types/LensExecutionError.html +2 -2
- package/docs/html/types/LensHttpHandler.html +2 -2
- package/docs/html/types/LensImagePickerError.html +2 -2
- package/docs/html/types/LensLaunchParams.html +2 -2
- package/docs/html/types/LensMetricsEvents.html +2 -2
- package/docs/html/types/LensPerformanceCluster.html +1 -1
- package/docs/html/types/LensView.html +2 -2
- package/docs/html/types/LensWait.html +2 -2
- package/docs/html/types/LogLevel.html +11 -0
- package/docs/html/types/Logger.html +5 -0
- package/docs/html/types/Matrix.html +2 -2
- package/docs/html/types/PersistentStoreError.html +2 -2
- package/docs/html/types/PlatformNotSupportedError.html +2 -2
- package/docs/html/types/PublicContainer.html +2 -2
- package/docs/html/types/PublicServices.html +2 -2
- package/docs/html/types/RemoteApiCancelRequestHandler.html +2 -2
- package/docs/html/types/RemoteApiRequestHandler.html +2 -2
- package/docs/html/types/RemoteApiServices.html +1 -1
- package/docs/html/types/RemoteApiStatus.html +2 -2
- package/docs/html/types/RenderTarget.html +2 -2
- package/docs/html/types/ScreenRegionType.html +2 -2
- package/docs/html/types/ScreenRegions.html +2 -2
- package/docs/html/types/Uri.html +1 -1
- package/docs/html/types/WebGLError.html +1 -1
- package/docs/html/types/Zodiac.html +1 -1
- package/docs/html/variables/extensionRequestContext.html +2 -2
- package/docs/md/README.md +57 -55
- package/docs/md/classes/CameraKit.md +1 -1
- package/docs/md/classes/CameraKitSession.md +1 -1
- package/docs/md/classes/CameraKitSource.md +1 -1
- package/docs/md/classes/LensPerformanceMeasurement.md +1 -1
- package/docs/md/classes/LensPerformanceMetrics.md +1 -1
- package/docs/md/classes/LensRepository.md +1 -1
- package/docs/md/classes/Transform2D.md +1 -1
- package/docs/md/classes/TypedCustomEvent.md +1 -1
- package/docs/md/classes/TypedEventTarget.md +1 -1
- package/docs/md/enumerations/Lens_CameraFacing.md +1 -1
- package/docs/md/functions/bootstrapCameraKit.md +1 -1
- package/docs/md/functions/createExtension.md +1 -1
- package/docs/md/functions/createImageSource.md +1 -1
- package/docs/md/functions/createMediaStreamSource.md +1 -1
- package/docs/md/functions/createVideoSource.md +1 -1
- package/docs/md/functions/estimateLensPerformance.md +1 -1
- package/docs/md/functions/filePickerFactory.md +1 -1
- package/docs/md/functions/getExtensionRequestContext.md +1 -1
- package/docs/md/functions/lensSourcesFactory.md +1 -1
- package/docs/md/functions/remoteApiServicesFactory.md +1 -1
- package/docs/md/globals.md +4 -2
- package/docs/md/interfaces/BitmojiUserInfo.md +1 -1
- package/docs/md/interfaces/CameraKitBootstrapConfiguration.md +16 -7
- package/docs/md/interfaces/CameraKitDeviceOptions.md +1 -1
- package/docs/md/interfaces/CameraKitSourceInfo.md +1 -1
- package/docs/md/interfaces/CameraKitSourceSubscriber.md +1 -1
- package/docs/md/interfaces/ComputedFrameMetrics.md +1 -1
- package/docs/md/interfaces/CreateSessionOptions.md +1 -1
- package/docs/md/interfaces/EstimatedLensPerformance.md +1 -1
- package/docs/md/interfaces/Font.md +1 -1
- package/docs/md/interfaces/FriendUserInfo.md +1 -1
- package/docs/md/interfaces/FunctionSourceOptions.md +1 -1
- package/docs/md/interfaces/Keyboard.md +1 -1
- package/docs/md/interfaces/KeyboardActiveEvent.md +1 -1
- package/docs/md/interfaces/Lens.md +1 -1
- package/docs/md/interfaces/LensCreator.md +1 -1
- package/docs/md/interfaces/LensHttpRequest.md +1 -1
- package/docs/md/interfaces/LensLaunchData.md +1 -1
- package/docs/md/interfaces/LensSource.md +1 -1
- package/docs/md/interfaces/LensUserData.md +1 -1
- package/docs/md/interfaces/LoadAssetRequest.md +1 -1
- package/docs/md/interfaces/MediaStreamSourceOptions.md +1 -1
- package/docs/md/interfaces/Preview.md +1 -1
- package/docs/md/interfaces/RemoteApiRequest.md +1 -1
- package/docs/md/interfaces/RemoteApiResponse.md +1 -1
- package/docs/md/interfaces/RemoteApiService.md +1 -1
- package/docs/md/interfaces/ScreenRegion.md +1 -1
- package/docs/md/interfaces/Snapcode.md +1 -1
- package/docs/md/interfaces/UriCancelRequest.md +1 -1
- package/docs/md/interfaces/UriRequest.md +1 -1
- package/docs/md/interfaces/UriResponse.md +1 -1
- package/docs/md/interfaces/VideoSourceOptions.md +1 -1
- package/docs/md/type-aliases/ArgumentValidationError.md +1 -1
- package/docs/md/type-aliases/AssetLoader.md +1 -1
- package/docs/md/type-aliases/AssetResponse.md +1 -1
- package/docs/md/type-aliases/AssetTiming.md +1 -1
- package/docs/md/type-aliases/BenchmarkError.md +1 -1
- package/docs/md/type-aliases/BootstrapError.md +1 -1
- package/docs/md/type-aliases/CacheKeyNotFoundError.md +1 -1
- package/docs/md/type-aliases/CameraKitSessionEventListener.md +1 -1
- package/docs/md/type-aliases/CameraKitSessionEvents.md +1 -1
- package/docs/md/type-aliases/CameraKitSourceError.md +1 -1
- package/docs/md/type-aliases/ConfigurationError.md +1 -1
- package/docs/md/type-aliases/FetchHandler.md +1 -1
- package/docs/md/type-aliases/FilePicker.md +1 -1
- package/docs/md/type-aliases/FilePickerOptions.md +1 -1
- package/docs/md/type-aliases/FilePickerResult.md +1 -1
- package/docs/md/type-aliases/KeyboardEventListener.md +1 -1
- package/docs/md/type-aliases/KeyboardEvents.md +1 -1
- package/docs/md/type-aliases/LegalError.md +1 -1
- package/docs/md/type-aliases/LensAbortError.md +1 -1
- package/docs/md/type-aliases/LensAssetError.md +1 -1
- package/docs/md/type-aliases/LensContentValidationError.md +1 -1
- package/docs/md/type-aliases/LensError.md +1 -1
- package/docs/md/type-aliases/LensExecutionError.md +1 -1
- package/docs/md/type-aliases/LensHttpHandler.md +1 -1
- package/docs/md/type-aliases/LensImagePickerError.md +1 -1
- package/docs/md/type-aliases/LensLaunchParams.md +1 -1
- package/docs/md/type-aliases/LensMetricsEvents.md +1 -1
- package/docs/md/type-aliases/LensPerformanceCluster.md +1 -1
- package/docs/md/type-aliases/LensView.md +1 -1
- package/docs/md/type-aliases/LensWait.md +1 -1
- package/docs/md/type-aliases/LogLevel.md +20 -0
- package/docs/md/type-aliases/Logger.md +15 -0
- package/docs/md/type-aliases/Matrix.md +1 -1
- package/docs/md/type-aliases/PersistentStoreError.md +1 -1
- package/docs/md/type-aliases/PlatformNotSupportedError.md +1 -1
- package/docs/md/type-aliases/PublicContainer.md +1 -1
- package/docs/md/type-aliases/PublicServices.md +1 -1
- package/docs/md/type-aliases/RemoteApiCancelRequestHandler.md +1 -1
- package/docs/md/type-aliases/RemoteApiRequestHandler.md +1 -1
- package/docs/md/type-aliases/RemoteApiServices.md +1 -1
- package/docs/md/type-aliases/RemoteApiStatus.md +1 -1
- package/docs/md/type-aliases/RenderTarget.md +1 -1
- package/docs/md/type-aliases/ScreenRegionType.md +1 -1
- package/docs/md/type-aliases/ScreenRegions.md +1 -1
- package/docs/md/type-aliases/Uri.md +1 -1
- package/docs/md/type-aliases/WebGLError.md +1 -1
- package/docs/md/type-aliases/Zodiac.md +1 -1
- package/docs/md/variables/extensionRequestContext.md +1 -1
- package/package.json +3 -2
package/docs/html/hierarchy.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CameraKit Web SDK - v1.
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CameraKit Web SDK - v1.12.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.12.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"><h1>CameraKit Web SDK - v1.12.0</h1></div><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="463"><a id="CameraKitDeviceOptions" class="tsd-anchor"></a><a href="interfaces/CameraKitDeviceOptions.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>CameraKitDeviceOptions</a><ul><li data-refl="488"><a id="MediaStreamSourceOptions" class="tsd-anchor"></a><a href="interfaces/MediaStreamSourceOptions.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>MediaStreamSourceOptions</a></li><li data-refl="517"><a id="VideoSourceOptions" class="tsd-anchor"></a><a href="interfaces/VideoSourceOptions.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-256"></use></svg>VideoSourceOptions</a></li></ul></li></ul></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></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current">CameraKit Web SDK - v1.12.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>
|
package/docs/html/index.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CameraKit Web SDK - v1.
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CameraKit Web SDK - v1.12.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.12.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"><h1>CameraKit Web SDK - v1.12.0</h1></div><div class="tsd-panel tsd-typography"><a id="snap-camera-kit-web-sdk" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Snap Camera Kit Web SDK<a href="#snap-camera-kit-web-sdk" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p>The Camera Kit Web SDK allows web developers to build Snap's core AR Lens technology into their applications.</p>
|
|
2
2
|
<a id="minimum-browser-requirements" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Minimum browser requirements<a href="#minimum-browser-requirements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
|
|
3
|
-
<li><strong>Chrome
|
|
4
|
-
<li><strong>Safari
|
|
3
|
+
<li><strong>Chrome 95+</strong></li>
|
|
4
|
+
<li><strong>Safari 16+</strong>
|
|
5
5
|
<ul>
|
|
6
6
|
<li>MacOS 12+, iOS 15+, iPadOS 15+</li>
|
|
7
7
|
<li>SIMD: Unsupported</li>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<li>Edge is still currently under evaluation. However, since New Edge is Chromium based, the expectations are similar to that of Chrome.</li>
|
|
14
14
|
</ul>
|
|
15
15
|
</li>
|
|
16
|
-
<li><strong>Firefox</strong>
|
|
16
|
+
<li><strong>Firefox</strong> — Under Evaluation
|
|
17
17
|
<ul>
|
|
18
18
|
<li>Web Worker Mode*: Firefox 105+</li>
|
|
19
19
|
</ul>
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
<p>Note that calling <code>getUserMedia</code> will prompt the user to grant the webpage access to their camera.</p>
|
|
62
62
|
</blockquote>
|
|
63
63
|
<p>Once we have a <code>CameraKitSource</code>, we can tell the <code>CameraKitSession</code> to use this source for rendering.</p>
|
|
64
|
-
<pre><code class="ts"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">createMediaStreamSource</span><span class="hl-1">, </span><span class="hl-0">Transform2D</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"@snap/camera-kit"</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">stream</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">navigator</span><span class="hl-1">.</span><span class="hl-0">mediaDevices</span><span class="hl-1">.</span><span class="hl-5">getUserMedia</span><span class="hl-1">({ </span><span class="hl-0">video:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1"> });</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = </span><span class="hl-5">createMediaStreamSource</span><span class="hl-1">(</span><span class="hl-0">stream</span><span class="hl-1">, { </span><span class="hl-0">transform:</span><span class="hl-1"> </span><span class="hl-0">Transform2D</span><span class="hl-1">.</span><span class="hl-0">MirrorX</span><span class="hl-1">, </span><span class="hl-0">cameraType:</span><span class="hl-1"> </span><span class="hl-3"
|
|
64
|
+
<pre><code class="ts"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">createMediaStreamSource</span><span class="hl-1">, </span><span class="hl-0">Transform2D</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"@snap/camera-kit"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">stream</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">navigator</span><span class="hl-1">.</span><span class="hl-0">mediaDevices</span><span class="hl-1">.</span><span class="hl-5">getUserMedia</span><span class="hl-1">({ </span><span class="hl-0">video:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1"> });</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = </span><span class="hl-5">createMediaStreamSource</span><span class="hl-1">(</span><span class="hl-0">stream</span><span class="hl-1">, { </span><span class="hl-0">transform:</span><span class="hl-1"> </span><span class="hl-0">Transform2D</span><span class="hl-1">.</span><span class="hl-0">MirrorX</span><span class="hl-1">, </span><span class="hl-0">cameraType:</span><span class="hl-1"> </span><span class="hl-3">"user"</span><span class="hl-1"> });</span><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">);</span>
|
|
65
65
|
</code><button type="button">Copy</button></pre>
|
|
66
66
|
|
|
67
67
|
<p>In this example, we also mirror the source stream (which feels more natural in most cases), and we indicate this source comes from a front-facing camera. To read more about these options, see <a href="#customizing-camerakitsource">below</a>.</p>
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
<a id="loading-applying-and-removing-lenses" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Loading, applying, and removing Lenses<a href="#loading-applying-and-removing-lenses" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>In Camera Kit Web SDK -- just like in the Snapchat app itself -- each individual AR experience is called a Lens. Lenses are created using <a href="https://ar.snap.com/en-US/lens-studio" target="_blank" class="external">Lens Studio</a>. You can find more information about acquiring Lenses <a href="https://docs.snap.com/camera-kit/quick-start/build-manage-ar-content/ar-overview" target="_blank" class="external">here</a>.</p>
|
|
75
75
|
<p>You can find Lens and Lens Groups in the <a href="https://camera-kit.snapchat.com/" target="_blank" class="external">Camera Kit Portal</a>. This is where you can manage your Lenses and Lens Groups and where you can find Lens IDs and Lens Group IDs. You can read more about managing Lenses in the Camera Kit Portal <a href="https://docs.snap.com/camera-kit/quick-start/build-manage-ar-content/camera-kit-portal" target="_blank" class="external">here</a>.</p>
|
|
76
76
|
<p>Before applying a Lens to our session, we have to load metadata about that Lens. Lenses can be loaded either one at a time, or entire Lens Groups can be loaded at once. You'll need a Lens ID and its Lens Group ID to complete this step.</p>
|
|
77
|
-
<pre><code class="ts"><span class="hl-7">// Loading a single lens</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">lens</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">lensRepository</span><span class="hl-1">.</span><span class="hl-5">loadLens</span><span class="hl-1">(</span><span class="hl-3">"<Lens ID>"</span><span class="hl-1">, </span><span class="hl-3">"<Lens Group ID>"</span><span class="hl-1">);</span><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">applyLens</span><span class="hl-1">(</span><span class="hl-0">lens</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// Loading one or more Lens Groups – Lenses from all groups are returned as a single array of lenses.</span><br/><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-6">lenses</span><span class="hl-1"> } = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">lensRepository</span><span class="hl-1">.</span><span class="hl-5">loadLensGroups</span><span class="hl-1">([</span><
|
|
77
|
+
<pre><code class="ts"><span class="hl-7">// Loading a single lens</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">lens</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">lensRepository</span><span class="hl-1">.</span><span class="hl-5">loadLens</span><span class="hl-1">(</span><span class="hl-3">"<Lens ID>"</span><span class="hl-1">, </span><span class="hl-3">"<Lens Group ID>"</span><span class="hl-1">);</span><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">applyLens</span><span class="hl-1">(</span><span class="hl-0">lens</span><span class="hl-1">);</span><br/><br/><span class="hl-7">// Loading one or more Lens Groups – Lenses from all groups are returned as a single array of lenses.</span><br/><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-6">lenses</span><span class="hl-1"> } = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">lensRepository</span><span class="hl-1">.</span><span class="hl-5">loadLensGroups</span><span class="hl-1">([</span><span class="hl-3">"<Lens Group ID 1>"</span><span class="hl-1">, </span><span class="hl-3">"<Lens Group ID 2>"</span><span class="hl-1">]);</span><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">applyLens</span><span class="hl-1">(</span><span class="hl-0">lenses</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span>
|
|
78
78
|
</code><button type="button">Copy</button></pre>
|
|
79
79
|
|
|
80
80
|
<a id="removing-the-lens" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Removing the Lens<a href="#removing-the-lens" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can also remove the currently-applied Lens:</p>
|
|
@@ -87,11 +87,11 @@
|
|
|
87
87
|
</code><button type="button">Copy</button></pre>
|
|
88
88
|
|
|
89
89
|
<a id="playing-and-pausing-the-different-rendertargets" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Playing and pausing the different RenderTargets<a href="#playing-and-pausing-the-different-rendertargets" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>By default, <code>play()</code> will only begin rendering the <code>live</code> output canvas. You can specify which canvas to render by passing an argument:</p>
|
|
90
|
-
<pre><code class="ts"><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">play</span><span class="hl-1">(</span><span class="hl-3"
|
|
90
|
+
<pre><code class="ts"><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">play</span><span class="hl-1">(</span><span class="hl-3">"live"</span><span class="hl-1">);</span><br/><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">play</span><span class="hl-1">(</span><span class="hl-3">"capture"</span><span class="hl-1">);</span>
|
|
91
91
|
</code><button type="button">Copy</button></pre>
|
|
92
92
|
|
|
93
93
|
<p>Calling <code>pause()</code> with no arguments will pause both outputs. But just like with <code>play()</code>, you can pass an argument to select which canvas to pause.</p>
|
|
94
|
-
<pre><code class="ts"><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">pause</span><span class="hl-1">(</span><span class="hl-3"
|
|
94
|
+
<pre><code class="ts"><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">pause</span><span class="hl-1">(</span><span class="hl-3">"live"</span><span class="hl-1">);</span><br/><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">pause</span><span class="hl-1">(</span><span class="hl-3">"capture"</span><span class="hl-1">);</span>
|
|
95
95
|
</code><button type="button">Copy</button></pre>
|
|
96
96
|
|
|
97
97
|
<blockquote>
|
|
@@ -100,40 +100,40 @@
|
|
|
100
100
|
<li><em><code>capture</code>: This canvas renders content intended for presenting to other users.</em></li>
|
|
101
101
|
</ul>
|
|
102
102
|
</blockquote>
|
|
103
|
-
<a id="error-handling" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Error Handling<a href="#error-handling" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Camera Kit Web SDK methods may throw errors, or return rejected Promises -- these are documented in the <a href="https://kit.snapchat.com/reference/CameraKit/web/1.
|
|
103
|
+
<a id="error-handling" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Error Handling<a href="#error-handling" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Camera Kit Web SDK methods may throw errors, or return rejected Promises -- these are documented in the <a href="https://kit.snapchat.com/reference/CameraKit/web/1.12.0/index.html" target="_blank" class="external">API docs</a>. It is good practice to handle such cases, to provide a good experience to your users.</p>
|
|
104
104
|
<p>Errors may also occur during Lens rendering. For example, Lenses contain their own scripting, which could throw an error. A rendering error could also occur if a Lens attempts to use a feature that is not supported by Camera Kit Web SDK.</p>
|
|
105
105
|
<p>When a <code>LensExecutionError</code> such as these occurs, the Lens is <strong>automatically removed</strong> from the <code>CameraKitSession</code>. An error event is emitted so that your application can respond appropriately. You can listen to these error events like so:</p>
|
|
106
|
-
<pre><code class="ts"><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">events</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3"
|
|
106
|
+
<pre><code class="ts"><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">events</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3">"error"</span><span class="hl-1">, (</span><span class="hl-0">event</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">console</span><span class="hl-1">.</span><span class="hl-5">error</span><span class="hl-1">(</span><span class="hl-0">event</span><span class="hl-1">.</span><span class="hl-0">detail</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-2">if</span><span class="hl-1"> (</span><span class="hl-0">event</span><span class="hl-1">.</span><span class="hl-0">detail</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">.</span><span class="hl-0">name</span><span class="hl-1"> === </span><span class="hl-3">"LensExecutionError"</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">// The currently-applied Lens encountered a problem that is most likely unrecoverable and the Lens has been removed.</span><br/><span class="hl-1"> </span><span class="hl-7">// Your application may want to prevent this Lens from being applied again.</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
107
107
|
</code><button type="button">Copy</button></pre>
|
|
108
108
|
|
|
109
109
|
<a id="putting-it-all-together" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Putting it all together<a href="#putting-it-all-together" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Using the examples above, here's a complete example of the minimal Camera Kit Web SDK integration:</p>
|
|
110
|
-
<pre><code class="ts"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">boostrapCameraKit</span><span class="hl-1">, </span><span class="hl-0">createMediaStreamSource</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"@snap/camera-kit"</span><span class="hl-1">;</span><br/><br/><span class="hl-1">(</span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">main</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">apiToken</span><span class="hl-1"> = </span><span class="hl-3">"Your API Token value copied from the SnapKit developer portal"</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">cameraKit</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-5">bootstrapCameraKit</span><span class="hl-1">({ </span><span class="hl-0">apiToken</span><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">canvas</span><span class="hl-1"> = </span><span class="hl-0">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-3">"my-canvas"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">session</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-5">createSession</span><span class="hl-1">({ </span><span class="hl-0">liveRenderTarget:</span><span class="hl-1"> </span><span class="hl-0">canvas</span><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">events</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3"
|
|
110
|
+
<pre><code class="ts"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">boostrapCameraKit</span><span class="hl-1">, </span><span class="hl-0">createMediaStreamSource</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"@snap/camera-kit"</span><span class="hl-1">;</span><br/><br/><span class="hl-1">(</span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">main</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">apiToken</span><span class="hl-1"> = </span><span class="hl-3">"Your API Token value copied from the SnapKit developer portal"</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">cameraKit</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-5">bootstrapCameraKit</span><span class="hl-1">({ </span><span class="hl-0">apiToken</span><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">canvas</span><span class="hl-1"> = </span><span class="hl-0">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-3">"my-canvas"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">session</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-5">createSession</span><span class="hl-1">({ </span><span class="hl-0">liveRenderTarget:</span><span class="hl-1"> </span><span class="hl-0">canvas</span><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">events</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3">"error"</span><span class="hl-1">, (</span><span class="hl-0">event</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">if</span><span class="hl-1"> (</span><span class="hl-0">event</span><span class="hl-1">.</span><span class="hl-0">detail</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">.</span><span class="hl-0">name</span><span class="hl-1"> === </span><span class="hl-3">"LensExecutionError"</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-0">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-3">"The current Lens encountered an error and was removed."</span><span class="hl-1">, </span><span class="hl-0">event</span><span class="hl-1">.</span><span class="hl-0">detail</span><span class="hl-1">.</span><span class="hl-0">error</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">stream</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">navigator</span><span class="hl-1">.</span><span class="hl-0">mediaDevices</span><span class="hl-1">.</span><span class="hl-5">getUserMedia</span><span class="hl-1">({ </span><span class="hl-0">video:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = </span><span class="hl-5">createMediaStreamSource</span><span class="hl-1">(</span><span class="hl-0">stream</span><span class="hl-1">, { </span><span class="hl-0">transform:</span><span class="hl-1"> </span><span class="hl-0">Transform2D</span><span class="hl-1">.</span><span class="hl-0">MirrorX</span><span class="hl-1">, </span><span class="hl-0">cameraType:</span><span class="hl-1"> </span><span class="hl-3">"user"</span><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">lens</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">lensRepository</span><span class="hl-1">.</span><span class="hl-5">loadLens</span><span class="hl-1">(</span><span class="hl-3">"<Lens ID>"</span><span class="hl-1">, </span><span class="hl-3">"<Lens Group ID>"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">applyLens</span><span class="hl-1">(</span><span class="hl-0">lens</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">play</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-0">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-3">"Lens rendering has started!"</span><span class="hl-1">);</span><br/><span class="hl-1">})();</span><br/><br/><span class="hl-5">main</span><span class="hl-1">();</span>
|
|
111
111
|
</code><button type="button">Copy</button></pre>
|
|
112
112
|
|
|
113
113
|
<a id="advanced-use-cases" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Advanced use cases<a href="#advanced-use-cases" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="logging" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Logging<a href="#logging" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>By default, Camera Kit Web SDK does very minimal logging. Specifying <code>'console'</code> as logger will cause more log statements to be printed to the browser's console, which may be useful during development.</p>
|
|
114
|
-
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">cameraKit</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-5">bootstrapCameraKit</span><span class="hl-1">({</span><br/><span class="hl-1">
|
|
114
|
+
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">cameraKit</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-5">bootstrapCameraKit</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-0">apiToken:</span><span class="hl-1"> </span><span class="hl-3">"<apiToken>"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">logger:</span><span class="hl-1"> </span><span class="hl-3">"console"</span><span class="hl-1">,</span><br/><span class="hl-1">});</span>
|
|
115
115
|
</code><button type="button">Copy</button></pre>
|
|
116
116
|
|
|
117
117
|
<a id="keyboard-support-for-lenses" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Keyboard support for Lenses<a href="#keyboard-support-for-lenses" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Some Lenses allow for keyboard input. The SDK provides a <code><textarea></code> (<code>HTMLTextAreaElement</code>) element that can be added to your page, and will send its text to the active Lens whenever the user presses the <code>Enter</code> key.</p>
|
|
118
|
-
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">textAreaContainer</span><span class="hl-1"> = </span><span class="hl-0">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-3"
|
|
118
|
+
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">textAreaContainer</span><span class="hl-1"> = </span><span class="hl-0">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-3">"text-area-container"</span><span class="hl-1">);</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">textArea</span><span class="hl-1"> = </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">keyboard</span><span class="hl-1">.</span><span class="hl-5">getElement</span><span class="hl-1">();</span><br/><span class="hl-0">textAreaContainer</span><span class="hl-1">.</span><span class="hl-5">appendChild</span><span class="hl-1">(</span><span class="hl-0">textArea</span><span class="hl-1">);</span>
|
|
119
119
|
</code><button type="button">Copy</button></pre>
|
|
120
120
|
|
|
121
121
|
<p>Alternatively, an event is emitted when a Lens is expecting text input. You can then implement your own UI and logic for obtaining text input from your users, and then send it back to the Lens. For example, something like:</p>
|
|
122
|
-
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">input</span><span class="hl-1"> = </span><span class="hl-0">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-3"
|
|
122
|
+
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">input</span><span class="hl-1"> = </span><span class="hl-0">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-3">"my-text-area"</span><span class="hl-1">);</span><br/><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">keyboard</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3">"active"</span><span class="hl-1">, () </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">input</span><span class="hl-1">.</span><span class="hl-0">classList</span><span class="hl-1">.</span><span class="hl-5">remove</span><span class="hl-1">(</span><span class="hl-3">"hidden"</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-0">input</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3">"keyup"</span><span class="hl-1">, () </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-0">keyboard</span><span class="hl-1">.</span><span class="hl-5">sendInputToLens</span><span class="hl-1">(</span><span class="hl-0">input</span><span class="hl-1">.</span><span class="hl-0">value</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
123
123
|
</code><button type="button">Copy</button></pre>
|
|
124
124
|
|
|
125
125
|
<p>See an example of this <a href="https://camera-kit.snapchat.com/websdk/sample/keyboard" target="_blank" class="external">here</a>.</p>
|
|
126
126
|
<a id="customizing-camerakitsource" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Customizing <code>CameraKitSource</code><a href="#customizing-camerakitsource" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><a id="setting-the-render-size" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Setting the render size<a href="#setting-the-render-size" 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>By default, Camera Kit will render its output at the same resolution as the video input you provided. But you can also tell Camera Kit to render at a different resolution.</p>
|
|
127
127
|
<p>Keep in mind that this controls Camera Kit's render resolution, and not (necessarily) the size at which the output canvas is displayed to the user. The output canvas may be sized using HTML and CSS, and may apply its own scaling to the rendered output.</p>
|
|
128
128
|
<p>Most of the time you'll not need to set the render size – but it could be useful if your video source is, say, very high resolution. In that case, you may observe better performance by telling Camera Kit to render at a lower resolution.</p>
|
|
129
|
-
<pre><code class="ts"><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">)
|
|
129
|
+
<pre><code class="ts"><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">);</span><br/><span class="hl-7">// This must be done *after* calling `setSource()`</span><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">source</span><span class="hl-1">.</span><span class="hl-5">setRenderSize</span><span class="hl-1">(</span><span class="hl-0">width</span><span class="hl-1">, </span><span class="hl-0">height</span><span class="hl-1">);</span>
|
|
130
130
|
</code><button type="button">Copy</button></pre>
|
|
131
131
|
|
|
132
132
|
<blockquote>
|
|
133
133
|
<p>When calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank" class="external"><code>getUserMedia</code></a>, best performance can be achieved by requesting the resolution at which you want to render. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#parameters" target="_blank" class="external">constraints</a>. Then you won't have to use <code>setRenderSize</code> at all.</p>
|
|
134
134
|
</blockquote>
|
|
135
135
|
<a id="camera-type" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Camera type<a href="#camera-type" 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>When setting up a <code>CameraKitSource</code>, you can specify whether or not it is a front facing camera or a back facing camera. By default, the media source will be treated as a front facing camera. If it is a back facing camera be sure to specify it as such when you create your source; this ensures that Lenses created for back facing camera's (e.g. World AR) render properly.</p>
|
|
136
|
-
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">stream</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">navigator</span><span class="hl-1">.</span><span class="hl-0">mediaDevices</span><span class="hl-1">.</span><span class="hl-5">getUserMedia</span><span class="hl-1">(</span><span class="hl-0">constraints</span><span class="hl-1">);</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = </span><span class="hl-5">createMediaStreamSource</span><span class="hl-1">(</span><span class="hl-0">stream</span><span class="hl-1">, { </span><span class="hl-0">cameraType:</span><span class="hl-1"> </span><span class="hl-3"
|
|
136
|
+
<pre><code class="ts"><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">stream</span><span class="hl-1"> = </span><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">navigator</span><span class="hl-1">.</span><span class="hl-0">mediaDevices</span><span class="hl-1">.</span><span class="hl-5">getUserMedia</span><span class="hl-1">(</span><span class="hl-0">constraints</span><span class="hl-1">);</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-6">source</span><span class="hl-1"> = </span><span class="hl-5">createMediaStreamSource</span><span class="hl-1">(</span><span class="hl-0">stream</span><span class="hl-1">, { </span><span class="hl-0">cameraType:</span><span class="hl-1"> </span><span class="hl-3">"environment"</span><span class="hl-1"> });</span><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">);</span>
|
|
137
137
|
</code><button type="button">Copy</button></pre>
|
|
138
138
|
|
|
139
139
|
<a id="fps-limit" class="tsd-anchor"></a><h4 class="tsd-anchor-link">FPS limit<a href="#fps-limit" 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>In some cases, it may be desirable to set a limit on the FPS at which Camera Kit renders. By default, Camera Kit will attempt to render frames at the same rate as the source media. But, for example, if your input media source has a very high framerate you may want to limit Camera Kit's rendering framerate to achieve better performance.</p>
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
|
|
148
148
|
<p>These options can also be used with any of the <a href="#creating-a-camerakitsource">create source helpers</a>.</p>
|
|
149
149
|
<a id="2d-transforms" class="tsd-anchor"></a><h4 class="tsd-anchor-link">2D transforms<a href="#2d-transforms" 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>Any <code>CameraKitSource</code> can be transformed using a matrix, to rotate, scale, or mirror the source media. This is most often used to mirror a front-facing camera stream so that it appears more natural to the user.</p>
|
|
150
|
-
<pre><code class="ts"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">Transform2D</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"@snap/camera-kit"</span><span class="hl-1">;</span><br/><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">)
|
|
150
|
+
<pre><code class="ts"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">Transform2D</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">"@snap/camera-kit"</span><span class="hl-1">;</span><br/><br/><span class="hl-2">await</span><span class="hl-1"> </span><span class="hl-0">session</span><span class="hl-1">.</span><span class="hl-5">setSource</span><span class="hl-1">(</span><span class="hl-0">source</span><span class="hl-1">);</span><br/><span class="hl-7">// This must be done *after* calling `setSource()`</span><br/><span class="hl-0">source</span><span class="hl-1">.</span><span class="hl-5">setTransform</span><span class="hl-1">(</span><span class="hl-0">Transform2D</span><span class="hl-1">.</span><span class="hl-0">MirrorX</span><span class="hl-1">);</span>
|
|
151
151
|
</code><button type="button">Copy</button></pre>
|
|
152
152
|
|
|
153
153
|
<a id="metrics-reporting" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Metrics reporting<a href="#metrics-reporting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Camera Kit Web SDK reports certain important events which may be of interest to the application.</p>
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
</blockquote>
|
|
157
157
|
<p>Currently, the only event that may be of interest is the <code>lensView</code> event. It is emitted whenever a lens is <em>removed</em> from the <code>CameraKitSession</code>, indicating a complete lens view. It contains information about the lens' performance (e.g. fps, frame processing times, etc.) and how long the lens was applied.</p>
|
|
158
158
|
<p>You may listen to these events like so:</p>
|
|
159
|
-
<pre><code class="ts"><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">metrics</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3"
|
|
159
|
+
<pre><code class="ts"><span class="hl-0">cameraKit</span><span class="hl-1">.</span><span class="hl-0">metrics</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-3">"lensView"</span><span class="hl-1">, (</span><span class="hl-0">event</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">console</span><span class="hl-1">.</span><span class="hl-5">debug</span><span class="hl-1">(</span><span class="hl-0">event</span><span class="hl-1">.</span><span class="hl-0">detail</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
160
160
|
</code><button type="button">Copy</button></pre>
|
|
161
161
|
|
|
162
|
-
</div></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"><a href="#snap-camera-kit-web-sdk"><span>Snap <wbr/>Camera <wbr/>Kit <wbr/>Web SDK</span></a><ul><li><a href="#minimum-browser-requirements"><span>Minimum browser requirements</span></a></li><li><a href="#prerequisites"><span>Prerequisites</span></a></li><li><ul><li><a href="#snap-developer-set-up"><span>Snap <wbr/>Developer set up</span></a></li><li><a href="#development-environment"><span>Development environment</span></a></li><li><ul><li><a href="#using-the-sdk-in-a-javascript-project"><span>Using the SDK in a <wbr/>Java<wbr/>Script project</span></a></li></ul></li><li><a href="#content-security-policy"><span>Content <wbr/>Security <wbr/>Policy</span></a></li></ul></li><li><a href="#installing-the-sdk"><span>Installing the SDK</span></a></li><li><ul><li><a href="#importing-camera-kit"><span>Importing <wbr/>Camera <wbr/>Kit</span></a></li></ul></li><li><a href="#bootstrapping-the-sdk"><span>Bootstrapping the SDK</span></a></li><li><a href="#creating-a-camerakitsession"><span>Creating a <wbr/>Camera<wbr/>Kit<wbr/>Session</span></a></li><li><a href="#creating-a-camerakitsource"><span>Creating a <wbr/>Camera<wbr/>Kit<wbr/>Source</span></a></li><li><a href="#loading-applying-and-removing-lenses"><span>Loading, applying, and removing <wbr/>Lenses</span></a></li><li><ul><li><a href="#removing-the-lens"><span>Removing the <wbr/>Lens</span></a></li></ul></li><li><a href="#playback"><span>Playback</span></a></li><li><ul><li><a href="#playing-and-pausing-the-different-rendertargets"><span>Playing and pausing the different <wbr/>Render<wbr/>Targets</span></a></li></ul></li><li><a href="#error-handling"><span>Error <wbr/>Handling</span></a></li><li><a href="#putting-it-all-together"><span>Putting it all together</span></a></li><li><a href="#advanced-use-cases"><span>Advanced use cases</span></a></li><li><ul><li><a href="#logging"><span>Logging</span></a></li><li><a href="#keyboard-support-for-lenses"><span>Keyboard support for <wbr/>Lenses</span></a></li><li><a href="#customizing-camerakitsource"><span>Customizing <wbr/>Camera<wbr/>Kit<wbr/>Source</span></a></li><li><ul><li><a href="#setting-the-render-size"><span>Setting the render size</span></a></li><li><a href="#camera-type"><span>Camera type</span></a></li><li><a href="#fps-limit"><span>FPS limit</span></a></li><li><a href="#2d-transforms"><span>2<wbr/>D transforms</span></a></li></ul></li><li><a href="#metrics-reporting"><span>Metrics reporting</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current">CameraKit Web SDK - v1.
|
|
162
|
+
</div></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"><a href="#snap-camera-kit-web-sdk"><span>Snap <wbr/>Camera <wbr/>Kit <wbr/>Web SDK</span></a><ul><li><a href="#minimum-browser-requirements"><span>Minimum browser requirements</span></a></li><li><a href="#prerequisites"><span>Prerequisites</span></a></li><li><ul><li><a href="#snap-developer-set-up"><span>Snap <wbr/>Developer set up</span></a></li><li><a href="#development-environment"><span>Development environment</span></a></li><li><ul><li><a href="#using-the-sdk-in-a-javascript-project"><span>Using the SDK in a <wbr/>Java<wbr/>Script project</span></a></li></ul></li><li><a href="#content-security-policy"><span>Content <wbr/>Security <wbr/>Policy</span></a></li></ul></li><li><a href="#installing-the-sdk"><span>Installing the SDK</span></a></li><li><ul><li><a href="#importing-camera-kit"><span>Importing <wbr/>Camera <wbr/>Kit</span></a></li></ul></li><li><a href="#bootstrapping-the-sdk"><span>Bootstrapping the SDK</span></a></li><li><a href="#creating-a-camerakitsession"><span>Creating a <wbr/>Camera<wbr/>Kit<wbr/>Session</span></a></li><li><a href="#creating-a-camerakitsource"><span>Creating a <wbr/>Camera<wbr/>Kit<wbr/>Source</span></a></li><li><a href="#loading-applying-and-removing-lenses"><span>Loading, applying, and removing <wbr/>Lenses</span></a></li><li><ul><li><a href="#removing-the-lens"><span>Removing the <wbr/>Lens</span></a></li></ul></li><li><a href="#playback"><span>Playback</span></a></li><li><ul><li><a href="#playing-and-pausing-the-different-rendertargets"><span>Playing and pausing the different <wbr/>Render<wbr/>Targets</span></a></li></ul></li><li><a href="#error-handling"><span>Error <wbr/>Handling</span></a></li><li><a href="#putting-it-all-together"><span>Putting it all together</span></a></li><li><a href="#advanced-use-cases"><span>Advanced use cases</span></a></li><li><ul><li><a href="#logging"><span>Logging</span></a></li><li><a href="#keyboard-support-for-lenses"><span>Keyboard support for <wbr/>Lenses</span></a></li><li><a href="#customizing-camerakitsource"><span>Customizing <wbr/>Camera<wbr/>Kit<wbr/>Source</span></a></li><li><ul><li><a href="#setting-the-render-size"><span>Setting the render size</span></a></li><li><a href="#camera-type"><span>Camera type</span></a></li><li><a href="#fps-limit"><span>FPS limit</span></a></li><li><a href="#2d-transforms"><span>2<wbr/>D transforms</span></a></li></ul></li><li><a href="#metrics-reporting"><span>Metrics reporting</span></a></li></ul></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current">CameraKit Web SDK - v1.12.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>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>BitmojiUserInfo | CameraKit Web SDK - v1.
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>BitmojiUserInfo | CameraKit Web SDK - v1.12.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.12.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="BitmojiUserInfo.html">BitmojiUserInfo</a></li></ul><h1>Interface BitmojiUserInfo</h1></div><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">BitmojiUserInfo</span> <span class="tsd-signature-symbol">{</span><br/> <a class="tsd-kind-property" href="BitmojiUserInfo.html#avatarid">avatarId</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="BitmojiUserInfo.html#selfieid">selfieId</a><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><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">Properties</h3><div class="tsd-index-list"><a href="BitmojiUserInfo.html#avatarid" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>avatar<wbr/>Id?</span></a>
|
|
2
2
|
<a href="BitmojiUserInfo.html#selfieid" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>selfie<wbr/>Id?</span></a>
|
|
3
|
-
</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-Properties"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Properties</h2></summary><section><section class="tsd-panel tsd-member"><a id="avatarid" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Optional</code><span>avatar<wbr/>Id</span><a href="#avatarid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">avatarId</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div></section><section class="tsd-panel tsd-member"><a id="selfieid" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Optional</code><span>selfie<wbr/>Id</span><a href="#selfieid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">selfieId</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div></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-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#avatarid" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>avatar<wbr/>Id</span></a><a href="#selfieid" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>selfie<wbr/>Id</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CameraKit Web SDK - v1.
|
|
3
|
+
</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-Properties"><h2><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg> Properties</h2></summary><section><section class="tsd-panel tsd-member"><a id="avatarid" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Optional</code><span>avatar<wbr/>Id</span><a href="#avatarid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">avatarId</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div></section><section class="tsd-panel tsd-member"><a id="selfieid" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag">Optional</code><span>selfie<wbr/>Id</span><a href="#selfieid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">selfieId</span><span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div></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-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#avatarid" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>avatar<wbr/>Id</span></a><a href="#selfieid" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>selfie<wbr/>Id</span></a></div></details></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">CameraKit Web SDK - v1.12.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>
|