@snap/react-camera-kit 0.0.1
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/LICENSE.md +37 -0
- package/README.md +130 -0
- package/dist/cjs/CameraKitProvider.d.ts +203 -0
- package/dist/cjs/CameraKitProvider.d.ts.map +1 -0
- package/dist/cjs/CameraKitProvider.js +542 -0
- package/dist/cjs/CameraKitProvider.js.map +1 -0
- package/dist/cjs/Canvas.d.ts +7 -0
- package/dist/cjs/Canvas.d.ts.map +1 -0
- package/dist/cjs/Canvas.js +50 -0
- package/dist/cjs/Canvas.js.map +1 -0
- package/dist/cjs/LensPlayer.d.ts +101 -0
- package/dist/cjs/LensPlayer.d.ts.map +1 -0
- package/dist/cjs/LensPlayer.js +67 -0
- package/dist/cjs/LensPlayer.js.map +1 -0
- package/dist/cjs/index.d.ts +17 -0
- package/dist/cjs/index.d.ts.map +1 -0
- package/dist/cjs/index.js +34 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/internal/bootstrapUtils.d.ts +13 -0
- package/dist/cjs/internal/bootstrapUtils.d.ts.map +1 -0
- package/dist/cjs/internal/bootstrapUtils.js +29 -0
- package/dist/cjs/internal/bootstrapUtils.js.map +1 -0
- package/dist/cjs/internal/error.d.ts +2 -0
- package/dist/cjs/internal/error.d.ts.map +1 -0
- package/dist/cjs/internal/error.js +30 -0
- package/dist/cjs/internal/error.js.map +1 -0
- package/dist/cjs/internal/isMobile.d.ts +5 -0
- package/dist/cjs/internal/isMobile.d.ts.map +1 -0
- package/dist/cjs/internal/isMobile.js +15 -0
- package/dist/cjs/internal/isMobile.js.map +1 -0
- package/dist/cjs/internal/logging.d.ts +40 -0
- package/dist/cjs/internal/logging.d.ts.map +1 -0
- package/dist/cjs/internal/logging.js +63 -0
- package/dist/cjs/internal/logging.js.map +1 -0
- package/dist/cjs/internal/metrics.d.ts +29 -0
- package/dist/cjs/internal/metrics.d.ts.map +1 -0
- package/dist/cjs/internal/metrics.js +128 -0
- package/dist/cjs/internal/metrics.js.map +1 -0
- package/dist/cjs/internal/sessionUtils.d.ts +3 -0
- package/dist/cjs/internal/sessionUtils.d.ts.map +1 -0
- package/dist/cjs/internal/sessionUtils.js +17 -0
- package/dist/cjs/internal/sessionUtils.js.map +1 -0
- package/dist/cjs/internal/sourceUtils.d.ts +22 -0
- package/dist/cjs/internal/sourceUtils.d.ts.map +1 -0
- package/dist/cjs/internal/sourceUtils.js +143 -0
- package/dist/cjs/internal/sourceUtils.js.map +1 -0
- package/dist/cjs/package.json +1 -0
- package/dist/cjs/types.d.ts +96 -0
- package/dist/cjs/types.d.ts.map +1 -0
- package/dist/cjs/types.js +26 -0
- package/dist/cjs/types.js.map +1 -0
- package/dist/cjs/useApplyLens.d.ts +25 -0
- package/dist/cjs/useApplyLens.d.ts.map +1 -0
- package/dist/cjs/useApplyLens.js +87 -0
- package/dist/cjs/useApplyLens.js.map +1 -0
- package/dist/cjs/useApplySource.d.ts +11 -0
- package/dist/cjs/useApplySource.d.ts.map +1 -0
- package/dist/cjs/useApplySource.js +66 -0
- package/dist/cjs/useApplySource.js.map +1 -0
- package/dist/cjs/usePlaybackOptions.d.ts +38 -0
- package/dist/cjs/usePlaybackOptions.d.ts.map +1 -0
- package/dist/cjs/usePlaybackOptions.js +51 -0
- package/dist/cjs/usePlaybackOptions.js.map +1 -0
- package/dist/cjs/version.d.ts +3 -0
- package/dist/cjs/version.d.ts.map +1 -0
- package/dist/cjs/version.js +6 -0
- package/dist/cjs/version.js.map +1 -0
- package/dist/esm/CameraKitProvider.d.ts +203 -0
- package/dist/esm/CameraKitProvider.d.ts.map +1 -0
- package/dist/esm/CameraKitProvider.js +533 -0
- package/dist/esm/CameraKitProvider.js.map +1 -0
- package/dist/esm/Canvas.d.ts +7 -0
- package/dist/esm/Canvas.d.ts.map +1 -0
- package/dist/esm/Canvas.js +45 -0
- package/dist/esm/Canvas.js.map +1 -0
- package/dist/esm/LensPlayer.d.ts +101 -0
- package/dist/esm/LensPlayer.d.ts.map +1 -0
- package/dist/esm/LensPlayer.js +63 -0
- package/dist/esm/LensPlayer.js.map +1 -0
- package/dist/esm/index.d.ts +17 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +13 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/internal/bootstrapUtils.d.ts +13 -0
- package/dist/esm/internal/bootstrapUtils.d.ts.map +1 -0
- package/dist/esm/internal/bootstrapUtils.js +26 -0
- package/dist/esm/internal/bootstrapUtils.js.map +1 -0
- package/dist/esm/internal/error.d.ts +2 -0
- package/dist/esm/internal/error.d.ts.map +1 -0
- package/dist/esm/internal/error.js +27 -0
- package/dist/esm/internal/error.js.map +1 -0
- package/dist/esm/internal/isMobile.d.ts +5 -0
- package/dist/esm/internal/isMobile.d.ts.map +1 -0
- package/dist/esm/internal/isMobile.js +12 -0
- package/dist/esm/internal/isMobile.js.map +1 -0
- package/dist/esm/internal/logging.d.ts +40 -0
- package/dist/esm/internal/logging.d.ts.map +1 -0
- package/dist/esm/internal/logging.js +58 -0
- package/dist/esm/internal/logging.js.map +1 -0
- package/dist/esm/internal/metrics.d.ts +29 -0
- package/dist/esm/internal/metrics.d.ts.map +1 -0
- package/dist/esm/internal/metrics.js +91 -0
- package/dist/esm/internal/metrics.js.map +1 -0
- package/dist/esm/internal/sessionUtils.d.ts +3 -0
- package/dist/esm/internal/sessionUtils.d.ts.map +1 -0
- package/dist/esm/internal/sessionUtils.js +14 -0
- package/dist/esm/internal/sessionUtils.js.map +1 -0
- package/dist/esm/internal/sourceUtils.d.ts +22 -0
- package/dist/esm/internal/sourceUtils.d.ts.map +1 -0
- package/dist/esm/internal/sourceUtils.js +139 -0
- package/dist/esm/internal/sourceUtils.js.map +1 -0
- package/dist/esm/types.d.ts +96 -0
- package/dist/esm/types.d.ts.map +1 -0
- package/dist/esm/types.js +20 -0
- package/dist/esm/types.js.map +1 -0
- package/dist/esm/useApplyLens.d.ts +25 -0
- package/dist/esm/useApplyLens.d.ts.map +1 -0
- package/dist/esm/useApplyLens.js +81 -0
- package/dist/esm/useApplyLens.js.map +1 -0
- package/dist/esm/useApplySource.d.ts +11 -0
- package/dist/esm/useApplySource.d.ts.map +1 -0
- package/dist/esm/useApplySource.js +60 -0
- package/dist/esm/useApplySource.js.map +1 -0
- package/dist/esm/usePlaybackOptions.d.ts +38 -0
- package/dist/esm/usePlaybackOptions.d.ts.map +1 -0
- package/dist/esm/usePlaybackOptions.js +48 -0
- package/dist/esm/usePlaybackOptions.js.map +1 -0
- package/dist/esm/version.d.ts +3 -0
- package/dist/esm/version.d.ts.map +1 -0
- package/dist/esm/version.js +3 -0
- package/dist/esm/version.js.map +1 -0
- package/package.json +94 -0
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { useEffect, useMemo } from "react";
|
|
2
|
+
import hash from "stable-hash";
|
|
3
|
+
import { useInternalCameraKit } from "./CameraKitProvider";
|
|
4
|
+
/**
|
|
5
|
+
* Declarative hook to apply a source to the current CameraKit session.
|
|
6
|
+
* This is a thin wrapper around the imperative `applySource` and `removeSource` methods
|
|
7
|
+
* exposed by `useCameraKit()`.
|
|
8
|
+
*
|
|
9
|
+
* @param source - The source input (camera, video, or image)
|
|
10
|
+
* @param outputSize - Optional output size configuration
|
|
11
|
+
*/
|
|
12
|
+
export function useApplySource(source = { kind: "camera" }, outputSize) {
|
|
13
|
+
const { cameraKit, sdkStatus, currentSession, applySource, removeSource, getLogger } = useInternalCameraKit();
|
|
14
|
+
const log = getLogger("useApplySource");
|
|
15
|
+
// Keeps the same source instance while `sourceKey` stays equal,
|
|
16
|
+
// this is needed because source can be provided as a regular inline object,
|
|
17
|
+
// which is recreated on each re-render.
|
|
18
|
+
const sourceKey = hash(source);
|
|
19
|
+
const safeSource = useMemo(() => source, [sourceKey]);
|
|
20
|
+
// Stabilize outputSize reference to avoid unnecessary re-applications
|
|
21
|
+
const outputSizeKey = hash(outputSize);
|
|
22
|
+
const safeOutputSize = useMemo(() => outputSize, [outputSizeKey]);
|
|
23
|
+
// Synchronize the current CameraKit session with the requested source.
|
|
24
|
+
// Runs when source or outputSize meaningfully change (see stable-key check).
|
|
25
|
+
// Applies the source once, with an abort-guard so late resolutions don't affect unmounted components.
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (sdkStatus !== "ready" || !cameraKit || !currentSession)
|
|
28
|
+
return;
|
|
29
|
+
let cancelled = false;
|
|
30
|
+
const started = performance.now();
|
|
31
|
+
log.info("source_apply_attempt", { kind: safeSource.kind });
|
|
32
|
+
(async () => {
|
|
33
|
+
try {
|
|
34
|
+
await applySource(safeSource, safeOutputSize);
|
|
35
|
+
if (cancelled) {
|
|
36
|
+
log.info("source_remove_attempt", { kind: safeSource.kind, reason: "cancelled" });
|
|
37
|
+
await removeSource();
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
log.info("source_apply_success", {
|
|
41
|
+
kind: safeSource.kind,
|
|
42
|
+
elapsedMs: Math.round(performance.now() - started),
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
catch (err) {
|
|
46
|
+
if (cancelled)
|
|
47
|
+
return;
|
|
48
|
+
log.error("source_apply_failure", { kind: safeSource.kind }, err);
|
|
49
|
+
}
|
|
50
|
+
})();
|
|
51
|
+
return () => {
|
|
52
|
+
cancelled = true;
|
|
53
|
+
log.info("source_remove_attempt", { kind: safeSource.kind, reason: "cleanup" });
|
|
54
|
+
removeSource().catch((err) => {
|
|
55
|
+
log.warn("source_remove_on_unmount_failed", { kind: safeSource.kind }, err);
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
}, [safeSource, safeOutputSize, sdkStatus, cameraKit, currentSession, applySource, removeSource, log]);
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=useApplySource.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useApplySource.js","sourceRoot":"","sources":["../../src/useApplySource.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport hash from \"stable-hash\";\nimport { useInternalCameraKit } from \"./CameraKitProvider\";\nimport { OutputSize, SourceInput } from \"./types\";\n\n/**\n * Declarative hook to apply a source to the current CameraKit session.\n * This is a thin wrapper around the imperative `applySource` and `removeSource` methods\n * exposed by `useCameraKit()`.\n *\n * @param source - The source input (camera, video, or image)\n * @param outputSize - Optional output size configuration\n */\nexport function useApplySource(source: SourceInput = { kind: \"camera\" }, outputSize?: OutputSize) {\n const { cameraKit, sdkStatus, currentSession, applySource, removeSource, getLogger } = useInternalCameraKit();\n const log = getLogger(\"useApplySource\");\n\n // Keeps the same source instance while `sourceKey` stays equal,\n // this is needed because source can be provided as a regular inline object,\n // which is recreated on each re-render.\n const sourceKey = hash(source);\n const safeSource = useMemo(() => source, [sourceKey]);\n\n // Stabilize outputSize reference to avoid unnecessary re-applications\n const outputSizeKey = hash(outputSize);\n const safeOutputSize = useMemo(() => outputSize, [outputSizeKey]);\n\n // Synchronize the current CameraKit session with the requested source.\n // Runs when source or outputSize meaningfully change (see stable-key check).\n // Applies the source once, with an abort-guard so late resolutions don't affect unmounted components.\n useEffect(() => {\n if (sdkStatus !== \"ready\" || !cameraKit || !currentSession) return;\n\n let cancelled = false;\n const started = performance.now();\n\n log.info(\"source_apply_attempt\", { kind: safeSource.kind });\n\n (async () => {\n try {\n await applySource(safeSource, safeOutputSize);\n if (cancelled) {\n log.info(\"source_remove_attempt\", { kind: safeSource.kind, reason: \"cancelled\" });\n await removeSource();\n return;\n }\n log.info(\"source_apply_success\", {\n kind: safeSource.kind,\n elapsedMs: Math.round(performance.now() - started),\n });\n } catch (err) {\n if (cancelled) return;\n log.error(\"source_apply_failure\", { kind: safeSource.kind }, err);\n }\n })();\n\n return () => {\n cancelled = true;\n log.info(\"source_remove_attempt\", { kind: safeSource.kind, reason: \"cleanup\" });\n removeSource().catch((err) => {\n log.warn(\"source_remove_on_unmount_failed\", { kind: safeSource.kind }, err);\n });\n };\n }, [safeSource, safeOutputSize, sdkStatus, cameraKit, currentSession, applySource, removeSource, log]);\n}\n"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { CameraKitSessionEvents, Lens, ScreenRegions } from "@snap/camera-kit";
|
|
2
|
+
export interface PlaybackOptions {
|
|
3
|
+
/**
|
|
4
|
+
* A maximum FPS, rendering will not exceed this limit.
|
|
5
|
+
*
|
|
6
|
+
* This may be useful to reduce CPU/GPU resource usage by CameraKit if, for example,
|
|
7
|
+
* the input media source has a low FPS – CameraKit would then not try to render more
|
|
8
|
+
* frequently than the source produces new frames.
|
|
9
|
+
*
|
|
10
|
+
* This may also be useful to gracefully degrade performance in situations where
|
|
11
|
+
* lowering FPS is preferable over alternatives.
|
|
12
|
+
*/
|
|
13
|
+
fpsLimit?: number;
|
|
14
|
+
/**
|
|
15
|
+
* Whether to mute all sounds. Unmuted by default.
|
|
16
|
+
*/
|
|
17
|
+
muted?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Configuration object containing the current set of screen regions.
|
|
20
|
+
*
|
|
21
|
+
* Screen regions define areas of the screen that have special meaning for Lens rendering,
|
|
22
|
+
* such as safe rendering areas, UI button locations, keyboard areas, etc. This allows lenses
|
|
23
|
+
* to adapt their content placement based on the host application's UI layout.
|
|
24
|
+
*/
|
|
25
|
+
screenRegions?: ScreenRegions;
|
|
26
|
+
/**
|
|
27
|
+
* A callback to handle Lens playback errors.
|
|
28
|
+
*/
|
|
29
|
+
onError?: (error: CameraKitSessionEvents["detail"]["error"], lens: Lens) => void;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Declarative hook to configure Lens playback options (FPS limit, muted state, screen regions).
|
|
33
|
+
* This is a thin wrapper around the imperative session control methods exposed by `useCameraKit()`.
|
|
34
|
+
*
|
|
35
|
+
* @param options - Session control options
|
|
36
|
+
*/
|
|
37
|
+
export declare function usePlaybackOptions(options: PlaybackOptions): void;
|
|
38
|
+
//# sourceMappingURL=usePlaybackOptions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePlaybackOptions.d.ts","sourceRoot":"","sources":["../../src/usePlaybackOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG/E,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAClF;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,QA2C1D"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { useInternalCameraKit } from "./CameraKitProvider";
|
|
3
|
+
/**
|
|
4
|
+
* Declarative hook to configure Lens playback options (FPS limit, muted state, screen regions).
|
|
5
|
+
* This is a thin wrapper around the imperative session control methods exposed by `useCameraKit()`.
|
|
6
|
+
*
|
|
7
|
+
* @param options - Session control options
|
|
8
|
+
*/
|
|
9
|
+
export function usePlaybackOptions(options) {
|
|
10
|
+
const { currentSession, sdkStatus, setFPSLimit, setMuted, setScreenRegions, getLogger } = useInternalCameraKit();
|
|
11
|
+
const log = getLogger("usePlaybackOptions");
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (!currentSession || !options.onError)
|
|
14
|
+
return;
|
|
15
|
+
const handleError = (event) => {
|
|
16
|
+
options.onError?.(event.detail.error, event.detail.lens);
|
|
17
|
+
};
|
|
18
|
+
currentSession.events.addEventListener("error", handleError);
|
|
19
|
+
return () => {
|
|
20
|
+
currentSession.events.removeEventListener("error", handleError);
|
|
21
|
+
};
|
|
22
|
+
}, [currentSession, options.onError]);
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (sdkStatus !== "ready" || !currentSession || options.fpsLimit === undefined)
|
|
25
|
+
return;
|
|
26
|
+
setFPSLimit(options.fpsLimit).catch((error) => {
|
|
27
|
+
log.error("fps_limit_apply_failed", { fpsLimit: options.fpsLimit }, error);
|
|
28
|
+
});
|
|
29
|
+
}, [currentSession, sdkStatus, options.fpsLimit, setFPSLimit, log]);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (sdkStatus !== "ready" || !currentSession || options.muted === undefined)
|
|
32
|
+
return;
|
|
33
|
+
try {
|
|
34
|
+
setMuted(options.muted);
|
|
35
|
+
}
|
|
36
|
+
catch (error) {
|
|
37
|
+
log.error("muted_state_apply_failed", { muted: options.muted }, error);
|
|
38
|
+
}
|
|
39
|
+
}, [currentSession, sdkStatus, options.muted, setMuted, log]);
|
|
40
|
+
useEffect(() => {
|
|
41
|
+
if (sdkStatus !== "ready" || !currentSession || !options.screenRegions)
|
|
42
|
+
return;
|
|
43
|
+
setScreenRegions(options.screenRegions).catch((error) => {
|
|
44
|
+
log.error("screen_regions_apply_failed", { screenRegions: options.screenRegions }, error);
|
|
45
|
+
});
|
|
46
|
+
}, [currentSession, sdkStatus, options.screenRegions, setScreenRegions, log]);
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=usePlaybackOptions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePlaybackOptions.js","sourceRoot":"","sources":["../../src/usePlaybackOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAmC3D;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,OAAwB;IACzD,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACjH,MAAM,GAAG,GAAG,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAO;QAEhD,MAAM,WAAW,GAAG,CAAC,KAA6B,EAAE,EAAE;YACpD,OAAO,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC;QAEF,cAAc,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE7D,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,KAAK,OAAO,IAAI,CAAC,cAAc,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS;YAAE,OAAO;QAEvF,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5C,GAAG,CAAC,KAAK,CAAC,wBAAwB,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;QAC7E,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,KAAK,OAAO,IAAI,CAAC,cAAc,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO;QAEpF,IAAI,CAAC;YACH,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,GAAG,CAAC,KAAK,CAAC,0BAA0B,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,KAAK,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,CAAC,aAAa;YAAE,OAAO;QAE/E,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACtD,GAAG,CAAC,KAAK,CAAC,6BAA6B,EAAE,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,OAAO,CAAC,aAAa,EAAE,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC;AAChF,CAAC","sourcesContent":["import { useEffect } from \"react\";\nimport { CameraKitSessionEvents, Lens, ScreenRegions } from \"@snap/camera-kit\";\nimport { useInternalCameraKit } from \"./CameraKitProvider\";\n\nexport interface PlaybackOptions {\n /**\n * A maximum FPS, rendering will not exceed this limit.\n *\n * This may be useful to reduce CPU/GPU resource usage by CameraKit if, for example,\n * the input media source has a low FPS – CameraKit would then not try to render more\n * frequently than the source produces new frames.\n *\n * This may also be useful to gracefully degrade performance in situations where\n * lowering FPS is preferable over alternatives.\n */\n fpsLimit?: number;\n\n /**\n * Whether to mute all sounds. Unmuted by default.\n */\n muted?: boolean;\n\n /**\n * Configuration object containing the current set of screen regions.\n *\n * Screen regions define areas of the screen that have special meaning for Lens rendering,\n * such as safe rendering areas, UI button locations, keyboard areas, etc. This allows lenses\n * to adapt their content placement based on the host application's UI layout.\n */\n screenRegions?: ScreenRegions;\n\n /**\n * A callback to handle Lens playback errors.\n */\n onError?: (error: CameraKitSessionEvents[\"detail\"][\"error\"], lens: Lens) => void;\n}\n\n/**\n * Declarative hook to configure Lens playback options (FPS limit, muted state, screen regions).\n * This is a thin wrapper around the imperative session control methods exposed by `useCameraKit()`.\n *\n * @param options - Session control options\n */\nexport function usePlaybackOptions(options: PlaybackOptions) {\n const { currentSession, sdkStatus, setFPSLimit, setMuted, setScreenRegions, getLogger } = useInternalCameraKit();\n const log = getLogger(\"usePlaybackOptions\");\n\n useEffect(() => {\n if (!currentSession || !options.onError) return;\n\n const handleError = (event: CameraKitSessionEvents) => {\n options.onError?.(event.detail.error, event.detail.lens);\n };\n\n currentSession.events.addEventListener(\"error\", handleError);\n\n return () => {\n currentSession.events.removeEventListener(\"error\", handleError);\n };\n }, [currentSession, options.onError]);\n\n useEffect(() => {\n if (sdkStatus !== \"ready\" || !currentSession || options.fpsLimit === undefined) return;\n\n setFPSLimit(options.fpsLimit).catch((error) => {\n log.error(\"fps_limit_apply_failed\", { fpsLimit: options.fpsLimit }, error);\n });\n }, [currentSession, sdkStatus, options.fpsLimit, setFPSLimit, log]);\n\n useEffect(() => {\n if (sdkStatus !== \"ready\" || !currentSession || options.muted === undefined) return;\n\n try {\n setMuted(options.muted);\n } catch (error) {\n log.error(\"muted_state_apply_failed\", { muted: options.muted }, error);\n }\n }, [currentSession, sdkStatus, options.muted, setMuted, log]);\n\n useEffect(() => {\n if (sdkStatus !== \"ready\" || !currentSession || !options.screenRegions) return;\n\n setScreenRegions(options.screenRegions).catch((error) => {\n log.error(\"screen_regions_apply_failed\", { screenRegions: options.screenRegions }, error);\n });\n }, [currentSession, sdkStatus, options.screenRegions, setScreenRegions, log]);\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,eAAO,MAAM,OAAO,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC","sourcesContent":["/** Package version — auto-synced from package.json by scripts/sync-version.sh. */\nexport const VERSION = \"0.0.1\";\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@snap/react-camera-kit",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "React Camera Kit for web applications",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/cjs/index.js",
|
|
7
|
+
"module": "./dist/esm/index.js",
|
|
8
|
+
"types": "./dist/esm/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": {
|
|
12
|
+
"types": "./dist/esm/index.d.ts",
|
|
13
|
+
"default": "./dist/esm/index.js"
|
|
14
|
+
},
|
|
15
|
+
"require": {
|
|
16
|
+
"types": "./dist/cjs/index.d.ts",
|
|
17
|
+
"default": "./dist/cjs/index.js"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"sync-version": "bash scripts/sync-version.sh",
|
|
27
|
+
"prebuild": "npm run sync-version",
|
|
28
|
+
"build": "npm run clean && npm run build:esm && npm run build:cjs",
|
|
29
|
+
"build:esm": "tsc -p tsconfig.esm.json",
|
|
30
|
+
"build:cjs": "tsc -p tsconfig.cjs.json && echo '{\"type\":\"commonjs\"}' > dist/cjs/package.json",
|
|
31
|
+
"watch": "tsc -p tsconfig.esm.json --watch",
|
|
32
|
+
"clean": "rm -rf dist",
|
|
33
|
+
"prepublishOnly": "npm run build",
|
|
34
|
+
"typecheck": "tsc --noEmit",
|
|
35
|
+
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
36
|
+
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
37
|
+
"test": "jest",
|
|
38
|
+
"test:watch": "jest --watch",
|
|
39
|
+
"test:coverage": "jest --coverage",
|
|
40
|
+
"prepare": "npm run sync-version && husky",
|
|
41
|
+
"demo:install": "npm --prefix demo install",
|
|
42
|
+
"demo:dev": "npm --prefix demo run dev",
|
|
43
|
+
"demo:typecheck": "npm --prefix demo run typecheck",
|
|
44
|
+
"demo:build": "npm --prefix demo run build"
|
|
45
|
+
},
|
|
46
|
+
"keywords": [
|
|
47
|
+
"react",
|
|
48
|
+
"camera",
|
|
49
|
+
"webcam",
|
|
50
|
+
"sdk",
|
|
51
|
+
"camera-kit",
|
|
52
|
+
"camera kit",
|
|
53
|
+
"Snap",
|
|
54
|
+
"Snapchat",
|
|
55
|
+
"Augmented Reality",
|
|
56
|
+
"AR",
|
|
57
|
+
"Lens"
|
|
58
|
+
],
|
|
59
|
+
"author": "",
|
|
60
|
+
"license": "MIT",
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"stable-hash": "^0.0.6"
|
|
63
|
+
},
|
|
64
|
+
"peerDependencies": {
|
|
65
|
+
"@snap/camera-kit": "^1.13.0",
|
|
66
|
+
"react": ">=16.8.0",
|
|
67
|
+
"react-dom": ">=16.8.0",
|
|
68
|
+
"rxjs": ">=7"
|
|
69
|
+
},
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"@snap/camera-kit": "^1.13.0",
|
|
72
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
73
|
+
"@testing-library/react": "^16.3.0",
|
|
74
|
+
"@testing-library/user-event": "^14.6.1",
|
|
75
|
+
"@types/jest": "^30.0.0",
|
|
76
|
+
"@types/react": "^18.3.12",
|
|
77
|
+
"@types/react-dom": "^18.3.1",
|
|
78
|
+
"husky": "^9.1.7",
|
|
79
|
+
"jest": "^30.2.0",
|
|
80
|
+
"jest-environment-jsdom": "^30.2.0",
|
|
81
|
+
"lint-staged": "^16.2.6",
|
|
82
|
+
"prettier": "^3.6.2",
|
|
83
|
+
"react": "^18.3.1",
|
|
84
|
+
"react-dom": "^18.3.1",
|
|
85
|
+
"ts-jest": "^29.4.5",
|
|
86
|
+
"ts-node": "^10.9.2",
|
|
87
|
+
"typescript": "^5.6.3"
|
|
88
|
+
},
|
|
89
|
+
"lint-staged": {
|
|
90
|
+
"*.{ts,tsx,js,jsx,json,css,md}": [
|
|
91
|
+
"prettier --write"
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
}
|