diff options
Diffstat (limited to 'public/bluebey-studio/src/background.js')
| -rw-r--r-- | public/bluebey-studio/src/background.js | 666 |
1 files changed, 0 insertions, 666 deletions
diff --git a/public/bluebey-studio/src/background.js b/public/bluebey-studio/src/background.js deleted file mode 100644 index adc7f94..0000000 --- a/public/bluebey-studio/src/background.js +++ /dev/null @@ -1,666 +0,0 @@ -/** - * The studio backdrop, as a DOM layer that sits behind the WebGL canvas. - * - * The renderer is created with `alpha: true`, so whenever it is cleared to - * alpha 0 the page shows through. Painting the backdrop into a sibling layer - * placed *under* `#view` therefore gives the character a scene without touching - * the scene graph: the CC0 photo, the user's own picture and the phone's camera - * feed are all just CSS on one element, and no texture has to be uploaded per - * frame. - * - * `backdropStyle()` is deliberately pure. It is the only place that turns the - * `view.background*` slice into a CSS descriptor, so the behaviour `apply()` - * ships with is exactly the behaviour the unit tests cover. - */ - -/** The library already downloaded into `assets/backgrounds/` (see CREDITS.json). - * Most are Poly Haven *HDRIs* - CC0 photographs of real places - so each one comes - * with a floor, a horizon and perspective, which is what gives a picture depth - * that a flat wall texture cannot. `mutoujima`, `dokan` and `uchu` are the - * exceptions: original illustrations drawn for this studio by the author, not - * CC0 photos. */ -export const BACKGROUND_PRESETS = [ - { name: 'empty_warehouse_01', label: '倉庫' }, - { name: 'ballroom', label: '広間' }, - { name: 'kloppenheim_06_puresky', label: '空と雲' }, - { name: 'autumn_park', label: '秋の公園' }, - // The places a councillor explains things in, or stands in to make a point. - // Poly Haven has no true classroom, desert or 社長室, so these are the closest - // real places it does have. - { name: 'newman_cafeteria', label: '学校' }, - { name: 'wooden_lounge', label: '社長室（木の部屋）' }, - { name: 'minedump_flats', label: '砂漠' }, - { name: 'spiaggia_di_mondello', label: '海岸' }, - // ポリヘイブンの写真ではなく、作者（安竹洋平）が描き起こしたオリジナルの一枚絵。 - { name: 'mutoujima', label: '無人島' }, - { name: 'dokan', label: '土管のある空き地' }, - { name: 'uchu', label: '宇宙船の中' }, - // 「ぶるべーを探せ！」用。物がたくさん詰まっていて、同じ形が何度も出てくる場所。 - { name: 'abandoned_factory_canteen_01', label: '廃工場の食堂' }, - { name: 'basement_boxing_ring', label: '地下室のリング' }, - { name: 'autoshop_01', label: '自動車工場' }, - { name: 'urban_alley_01', label: '路地' }, -]; - -const DEFAULT_PRESET = 'autumn_park'; - -/** - * Manga effect-line backdrops, drawn *procedurally* (no file, no network). - * - * They are the classic stress marks: a burst of lines from behind the character - * (`focus`), lines raining down (`fall`), lines streaming sideways (`speed`) and - * short lines ringing a wide ellipse so the empty middle reads as isolation - * (`ellipse`). - * Each is a canvas painted black on white; the same generator runs for the - * preview, the PNG and the standalone build. - */ -export const EFFECT_PRESETS = [ - { name: 'focus', label: '集中線' }, - { name: 'fall', label: '落ち込み線' }, - { name: 'speed', label: '疾走線' }, - { name: 'ellipse', label: '楕円集中線' }, -]; - -const DEFAULT_EFFECT = 'focus'; - -/** The canvas every effect is painted on, so preview and export agree. */ -export const EFFECT_SIZE = { width: 1200, height: 800 }; - -/** - * A small deterministic PRNG (FNV-1a seeding + mulberry32), so an effect looks - * the same on every run, in every build, and in the tests. - */ -function makeRandom(seedText) { - let seed = 2166136261; - for (let i = 0; i < seedText.length; i++) { - seed ^= seedText.charCodeAt(i); - seed = Math.imul(seed, 16777619); - } - return () => { - seed = (seed + 0x6d2b79f5) | 0; - let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); - t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; - return ((t ^ (t >>> 14)) >>> 0) / 4294967296; - }; -} - -/** - * Paint one effect-line backdrop onto `ctx`. Pure and deterministic: given the - * same name and size it always issues the same black-on-white strokes, so the - * unit tests can pin the look down and the cache below stays sound. - * - * @param {CanvasRenderingContext2D} ctx - * @param {'focus'|'fall'|'speed'|'ellipse'} name - * @param {{width:number,height:number}} [size] - */ -export function drawEffectLines(ctx, name, size = EFFECT_SIZE) { - const width = positiveOrOne(size?.width); - const height = positiveOrOne(size?.height); - const kind = EFFECT_PRESETS.some((preset) => preset.name === name) ? name : DEFAULT_EFFECT; - const random = makeRandom(kind); - - ctx.save(); - ctx.fillStyle = '#ffffff'; - ctx.fillRect(0, 0, width, height); - ctx.strokeStyle = '#111111'; - ctx.lineCap = 'butt'; - - if (kind === 'focus') { - // A burst: lines radiate from a point behind the head, and stop short of it - // so the character's face is not crossed by ink. - const cx = width * 0.5; - const cy = height * 0.42; - const reach = Math.hypot(width, height) * 1.1; - const near = Math.min(width, height); - for (let i = 0; i < 150; i++) { - const angle = (i / 150) * Math.PI * 2 + (random() - 0.5) * 0.03; - const inner = near * (0.12 + random() * 0.5); - ctx.lineWidth = 1 + random() * 4; - ctx.beginPath(); - ctx.moveTo(cx + Math.cos(angle) * inner, cy + Math.sin(angle) * inner); - ctx.lineTo(cx + Math.cos(angle) * reach, cy + Math.sin(angle) * reach); - ctx.stroke(); - } - } else if (kind === 'fall') { - // Lines raining down from the top edge, of uneven length. - for (let i = 0; i < 90; i++) { - const x = Math.min(width, Math.max(0, ((i + 0.5) / 90) * width + (random() - 0.5) * 8)); - const length = height * (0.25 + random() * 0.7); - ctx.lineWidth = 1 + random() * 3; - ctx.beginPath(); - ctx.moveTo(x, 0); - ctx.lineTo(x, length); - ctx.stroke(); - } - } else if (kind === 'speed') { - // Lines streaming in from one side or the other. - for (let i = 0; i < 70; i++) { - const y = Math.min(height, Math.max(0, ((i + 0.5) / 70) * height + (random() - 0.5) * 6)); - const length = width * (0.35 + random() * 0.65); - const x = random() < 0.5 ? 0 : width - length; - ctx.lineWidth = 1 + random() * 3.5; - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(x + length, y); - ctx.stroke(); - } - } else if (kind === 'ellipse') { - // A dense ring of short lines *outside* a wide ellipse: the blank inside is - // the point (the 「ひとり」 panel), so nothing is drawn there. The start - // points are spaced by arc length, not by angle - an equal angular step - // bunches the lines at the two ends of a wide ellipse and leaves gaps along - // the flat top and bottom, which is what made the old ring look uneven. Each - // line then leaves along the ellipse's outward normal, so the inner edge - // stays a clean ellipse all the way round. Lengths vary (0.5-1.7x reach) and - // every line is anchored to the ring, so none reads as a stray scratch. - const cx = width * 0.5; - const cy = height * 0.5; - const rx = Math.min(width * 0.42, height * 0.9); - const ry = rx * 0.55; - const lines = 200; - const reach = Math.min(width, height) * 0.24; - - // Cumulative arc length around the ring, so the lines can be spread evenly - // around it rather than evenly by angle. - const samples = 512; - const arc = [0]; - for (let s = 1; s <= samples; s++) { - const prev = ((s - 1) / samples) * Math.PI * 2; - const next = (s / samples) * Math.PI * 2; - const dx = (Math.cos(next) - Math.cos(prev)) * rx; - const dy = (Math.sin(next) - Math.sin(prev)) * ry; - arc.push(arc[s - 1] + Math.hypot(dx, dy)); - } - const total = arc[samples]; - - let s = 1; - for (let i = 0; i < lines; i++) { - const target = ((i + 0.5) / lines) * total; - while (s < samples && arc[s] < target) s++; - const span = arc[s] - arc[s - 1] || 1; - const t = (((s - 1) + (target - arc[s - 1]) / span) / samples) * Math.PI * 2; - const cos = Math.cos(t); - const sin = Math.sin(t); - // The outward normal of an ellipse points along (cos/rx, sin/ry), not along - // the radius from the centre, so the lines meet the ring at a right angle. - const nx = cos / rx; - const ny = sin / ry; - const length = (reach * (0.5 + random() * 1.1)) / (Math.hypot(nx, ny) || 1); - ctx.lineWidth = 1 + random() * 3.5; - const startX = cx + cos * rx; - const startY = cy + sin * ry; - ctx.beginPath(); - ctx.moveTo(startX, startY); - ctx.lineTo(startX + nx * length, startY + ny * length); - ctx.stroke(); - } - } - ctx.restore(); -} - -/** How each `backgroundFit` paints: a CSS size, plus whether the image tiles. */ -const FIT_STYLES = { - cover: { backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }, - contain: { backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }, - stretch: { backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }, - tile: { backgroundSize: 'auto', backgroundRepeat: 'repeat' }, -}; -const DEFAULT_FIT = 'cover'; - -/** A live frame is a replaced element, so the same fit maps to `object-fit`. */ -const OBJECT_FIT = { cover: 'cover', contain: 'contain', '100% 100%': 'fill', auto: 'cover' }; - -const MODES = new Set(['solid', 'transparent', 'preset', 'image', 'effect', 'camera']); - -/** Device orientation fires around 60 Hz; 30 Hz is plenty for swinging a camera. */ -const GYRO_INTERVAL_MS = 33; - -/** Coerce to a finite number, or `null` when the value is not one. */ -function finiteOrNull(value) { - const n = Number(value); - return Number.isFinite(n) ? n : null; -} - -function normalizeMode(mode) { - return MODES.has(mode) ? mode : 'solid'; -} - -function clamp01(value) { - const n = finiteOrNull(value); - if (n == null) return 0; - return Math.min(1, Math.max(0, n)); -} - -function nonNegative(value) { - const n = finiteOrNull(value); - return n == null ? 0 : Math.max(0, n); -} - -function positiveOrOne(value) { - const n = finiteOrNull(value); - return n == null || n <= 0 ? 1 : n; -} - -/** The shortest signed distance between two angles, in degrees. */ -function wrapDeg(degrees) { - return ((degrees + 540) % 360) - 180; -} - -/** - * Turn the `view` slice into the plain descriptor `apply()` renders from. - * Every field is optional, so a half-written state still yields a usable look; - * an unknown `background` falls back to `solid` and an unknown `backgroundFit` - * to `cover`. - * - * `offset` is in fractions of the layer size, and `visible` is false only for - * `transparent` (where the page background is meant to show through). - */ -export function backdropStyle(viewState) { - const state = viewState && typeof viewState === 'object' ? viewState : {}; - const fit = FIT_STYLES[state.backgroundFit] ?? FIT_STYLES[DEFAULT_FIT]; - const offset = state.backgroundOffset && typeof state.backgroundOffset === 'object' - ? state.backgroundOffset - : {}; - - return { - backgroundSize: fit.backgroundSize, - backgroundRepeat: fit.backgroundRepeat, - mirror: state.cameraMirror === true, - darken: clamp01(state.backgroundDarken), - blur: nonNegative(state.backgroundBlur), - offset: { x: finiteOrNull(offset.x) ?? 0, y: finiteOrNull(offset.y) ?? 0 }, - scale: positiveOrOne(state.backgroundScale), - visible: normalizeMode(state.background) !== 'transparent', - }; -} - -/** `assets/backgrounds/<name>.webp` - what the multi-file build serves. */ -function defaultResolveUrl(name) { - return `assets/backgrounds/${name}.webp`; -} - -/** - * Build the backdrop layer for a `#stage` element. - * - * `resolveUrl(name)` maps a preset name to an image URL; the single-file build - * passes one that reads an inlined map, while the default points at - * `assets/backgrounds/`. `onNeedsRender` is called whenever the layer changes so - * the host can repaint. - * - * The returned object is the only way in: the layer never reads or writes the - * studio state itself, `apply(viewState)` is the single entry point. - */ -export function createBackdrop({ stage, resolveUrl, onNeedsRender } = {}) { - if (!stage || typeof stage.prepend !== 'function') { - throw new Error('createBackdrop: ステージ要素（#stage）が必要です'); - } - - const doc = stage.ownerDocument ?? globalThis.document; - const resolve = typeof resolveUrl === 'function' ? resolveUrl : defaultResolveUrl; - const needsRender = typeof onNeedsRender === 'function' ? onNeedsRender : () => {}; - - const el = doc.createElement('div'); - el.className = 'backdrop'; - el.setAttribute('aria-hidden', 'true'); - Object.assign(el.style, { - position: 'absolute', - inset: '0', - zIndex: '0', - overflow: 'hidden', - pointerEvents: 'none', - transformOrigin: 'center', - }); - - // The image surface is a plain div so blur/scale/tint stay pure CSS. - const media = doc.createElement('div'); - Object.assign(media.style, { position: 'absolute', inset: '0', backgroundPosition: 'center' }); - - // The camera feed is a muted, inline, autoplaying video for the AR mode. - const video = doc.createElement('video'); - video.muted = true; - video.playsInline = true; - video.autoplay = true; - video.setAttribute('muted', ''); - video.setAttribute('playsinline', ''); - video.setAttribute('aria-hidden', 'true'); - Object.assign(video.style, { position: 'absolute', inset: '0', display: 'none' }); - - // The dark veil sits on top of whichever surface is showing, so the character - // keeps its contrast against a busy photo. - const veil = doc.createElement('div'); - Object.assign(veil.style, { position: 'absolute', inset: '0' }); - - el.append(media, video, veil); - // Prepended, i.e. before the canvas; the canvas is lifted back above it. - stage.prepend(el); - - const canvas = stage.querySelector('canvas'); - if (canvas) { - canvas.style.position = 'relative'; - canvas.style.zIndex = '1'; - } - - /** The most recent state slice, so the imperative helpers keep its styling. */ - let last = {}; - let stream = null; - - let gyroEnabled = false; - let gyroAttached = false; - let gyroBase = null; - let gyroCallback = null; - let lastGyroAt = 0; - - const effectUrls = new Map(); - - /** The data URL for an effect-line backdrop, generated once and cached. */ - function effectUrl(name) { - const key = EFFECT_PRESETS.some((preset) => preset.name === name) ? name : DEFAULT_EFFECT; - if (effectUrls.has(key)) return effectUrls.get(key); - const surface = doc.createElement('canvas'); - surface.width = EFFECT_SIZE.width; - surface.height = EFFECT_SIZE.height; - const surfaceCtx = surface.getContext('2d'); - if (!surfaceCtx) return null; - drawEffectLines(surfaceCtx, key, EFFECT_SIZE); - const url = surface.toDataURL('image/png'); - effectUrls.set(key, url); - return url; - } - - function imageUrlOf(mode, viewState) { - if (mode === 'image') { - return typeof viewState.backgroundImage === 'string' && viewState.backgroundImage - ? viewState.backgroundImage - : null; - } - if (mode === 'effect') { - const name = typeof viewState.backgroundEffect === 'string' && viewState.backgroundEffect - ? viewState.backgroundEffect - : DEFAULT_EFFECT; - return effectUrl(name); - } - if (mode !== 'preset') return null; - - const name = typeof viewState.backgroundPreset === 'string' && viewState.backgroundPreset - ? viewState.backgroundPreset - : DEFAULT_PRESET; - try { - const url = resolve(name); - if (typeof url === 'string' && url) return url; - } catch { - // Fall through to the file path: an unknown preset is not worth throwing. - } - return defaultResolveUrl(name); - } - - function colorOr(value) { - return typeof value === 'string' && value ? value : '#ffffff'; - } - - /** - * Fit, mirror, blur and the blur bleeding past the edges (the negative inset - * keeps `filter: blur()` from fading the border to transparent). - */ - function styleSurface(node, style) { - node.style.inset = style.blur > 0 ? `-${style.blur * 2}px` : '0'; - node.style.filter = style.blur > 0 ? `blur(${style.blur}px)` : 'none'; - node.style.transform = style.mirror ? 'scaleX(-1)' : 'none'; - - if (node === media) { - node.style.backgroundSize = style.backgroundSize; - node.style.backgroundRepeat = style.backgroundRepeat; - } else { - node.style.objectFit = OBJECT_FIT[style.backgroundSize] ?? 'cover'; - } - } - - function apply(viewState) { - last = viewState && typeof viewState === 'object' ? viewState : {}; - const style = backdropStyle(last); - - const wanted = normalizeMode(last.background); - const url = imageUrlOf(wanted, last); - // A preset that cannot be resolved is shown as a plain colour, never blank. - const drawable = wanted === 'preset' || wanted === 'image' || wanted === 'effect'; - const mode = drawable && !url ? 'solid' : wanted; - - el.style.display = style.visible ? 'block' : 'none'; - el.style.backgroundColor = mode === 'solid' ? colorOr(last.backgroundColor) : 'transparent'; - el.style.transform = style.scale === 1 && style.offset.x === 0 && style.offset.y === 0 - ? 'none' - : `scale(${style.scale}) translate(${style.offset.x * 100}%, ${style.offset.y * 100}%)`; - - veil.style.background = `rgba(0, 0, 0, ${style.darken})`; - veil.style.display = style.darken > 0 ? 'block' : 'none'; - - const showCamera = style.visible && mode === 'camera'; - const showImage = style.visible && (mode === 'preset' || mode === 'image' || mode === 'effect'); - // Leaving the AR mode must release the camera, not just hide the video. - if (!showCamera && stream) stopCamera(); - - styleSurface(media, style); - styleSurface(video, style); - media.style.display = showImage ? 'block' : 'none'; - video.style.display = showCamera ? 'block' : 'none'; - media.style.backgroundImage = showImage ? `url("${url}")` : 'none'; - - needsRender(); - } - - /** Show a built-in backdrop, keeping the fit/darken/blur already in play. */ - function loadPreset(name) { - const preset = typeof name === 'string' && name ? name : DEFAULT_PRESET; - apply({ ...last, background: 'preset', backgroundPreset: preset }); - } - - /** Apply a stored data URL (as kept in `view.backgroundImage`). */ - function applyImage(dataUrl) { - if (typeof dataUrl !== 'string' || !dataUrl) { - apply({ ...last, background: 'solid', backgroundImage: null }); - return; - } - apply({ ...last, background: 'image', backgroundImage: dataUrl }); - } - - /** Read a user File into a data URL, show it, and hand the URL back to save. */ - async function loadImageFile(file) { - const dataUrl = await new Promise((resolveUrl, reject) => { - const reader = new FileReader(); - reader.onload = () => resolveUrl(String(reader.result)); - reader.onerror = () => reject(reader.error ?? new Error('画像を読み込めませんでした')); - reader.readAsDataURL(file); - }); - applyImage(dataUrl); - return dataUrl; - } - - /* Shown whenever the page is not a secure context. This is a fact about the - * web platform, not about any one browser, so the wording must not point a - * finger at the browser the user happens to be holding. */ - const INSECURE_CAMERA_REASON = - 'この開き方（http のアドレス）では、どのブラウザでもカメラを使えません。https のサイトか localhost で開いてください。'; - - /** - * Japanese, actionable text for the ways `getUserMedia` usually fails. On a - * phone this toast is all the user has to go on, so each case names the exact - * thing to tap instead of just stating that something went wrong. - */ - function cameraFailureReason(error) { - switch (error?.name) { - case 'NotAllowedError': - case 'PermissionDeniedError': - return 'カメラが許可されていません。URLバーのアイコン→カメラ→「許可」に変え（一度「ブロック」するとブラウザは覚えています）、端末の設定でもアプリに許可してください（Android: 設定→アプリ→Brave→権限→カメラ／iOS: 設定→Brave→カメラ）。'; - case 'NotFoundError': - case 'DevicesNotFoundError': - return '使えるカメラが見つかりませんでした'; - case 'NotReadableError': - case 'TrackStartError': - return 'カメラを起動できませんでした（他のアプリが使用中の可能性があります）'; - case 'OverconstrainedError': - case 'ConstraintNotSatisfiedError': - return '指定したカメラを使用できません'; - case 'SecurityError': - // No `mediaDevices` at all is the usual symptom, but this covers the - // same cause when a sandboxed frame raises the error instead. - return INSECURE_CAMERA_REASON; - default: - return 'カメラを起動できませんでした'; - } - } - - async function startCamera(facing = 'environment') { - const mediaDevices = globalThis.navigator?.mediaDevices; - if (!mediaDevices || typeof mediaDevices.getUserMedia !== 'function') { - // An insecure page has no `mediaDevices` at all. Say so plainly rather - // than leaving the user to think their camera or browser is broken. - return { - ok: false, - reason: globalThis.isSecureContext === false - ? INSECURE_CAMERA_REASON - : 'カメラを使うには https か localhost が必要です', - }; - } - - stopCamera(); - try { - const next = await mediaDevices.getUserMedia({ video: { facingMode: facing } }); - stream = next; - video.srcObject = next; - try { - await video.play(); - } catch { - // A blocked autoplay still resolves to a painting stream in practice. - } - apply({ ...last, background: 'camera', cameraFacing: facing }); - return { ok: true }; - } catch (error) { - stopCamera(); - return { ok: false, reason: cameraFailureReason(error) }; - } - } - - function stopCamera() { - const active = stream; - stream = null; - if (active) { - try { - for (const track of active.getTracks()) track.stop(); - } catch { - // A track that cannot be stopped is already gone as far as we care. - } - } - if (video) { - try { - video.pause(); - } catch { - // Pausing a video without a source is expected to throw. - } - video.srcObject = null; - video.style.display = 'none'; - } - } - - function emitGyro(yaw, pitch, roll) { - gyroCallback?.({ yaw, pitch, roll }); - } - - /** - * Attach the orientation listener and take the current pose as zero, so the - * first reading a callback sees is `{ yaw: 0, pitch: 0, roll: 0 }`. - */ - function enableGyro() { - gyroEnabled = true; - gyroBase = null; - if (!gyroAttached && typeof globalThis.addEventListener === 'function') { - globalThis.addEventListener('deviceorientation', handleOrientation); - gyroAttached = true; - } - emitGyro(0, 0, 0); - } - - /** - * Degrees of turn from the pose gyro started at. `yaw` grows clockwise - * (turning the device to the right); `pitch` and `roll` follow the raw - * `beta` and `gamma` axes. Readings are throttled to roughly 30 Hz. - */ - function handleOrientation(event) { - if (!gyroEnabled) return; - - const alpha = typeof event?.alpha === 'number' ? event.alpha : null; - const beta = typeof event?.beta === 'number' ? event.beta : null; - const gamma = typeof event?.gamma === 'number' ? event.gamma : null; - if (alpha == null && beta == null && gamma == null) return; - - if (!gyroBase) gyroBase = { alpha: alpha ?? 0, beta: beta ?? 0, gamma: gamma ?? 0 }; - - const now = Date.now(); - if (now - lastGyroAt < GYRO_INTERVAL_MS) return; - lastGyroAt = now; - - emitGyro( - alpha == null ? 0 : wrapDeg(gyroBase.alpha - alpha), - beta == null ? 0 : wrapDeg(beta - gyroBase.beta), - gamma == null ? 0 : wrapDeg(gamma - gyroBase.gamma), - ); - } - - /** Ask for orientation permission (iOS) and start listening. */ - async function requestGyro() { - const OrientationEvent = globalThis.DeviceOrientationEvent; - if (!OrientationEvent || typeof globalThis.addEventListener !== 'function') return false; - - if (typeof OrientationEvent.requestPermission === 'function') { - let granted = false; - try { - granted = (await OrientationEvent.requestPermission()) === 'granted'; - } catch { - granted = false; - } - if (!granted) return false; - } - - enableGyro(); - return true; - } - - /** Subscribe to `{ yaw, pitch, roll }`; returns an unsubscribe function. */ - function onGyro(callback) { - gyroCallback = typeof callback === 'function' ? callback : null; - if (!gyroEnabled) enableGyro(); - return () => { - if (gyroCallback === callback) gyroCallback = null; - }; - } - - function dispose() { - stopCamera(); - if (gyroAttached) { - globalThis.removeEventListener?.('deviceorientation', handleOrientation); - gyroAttached = false; - } - gyroEnabled = false; - gyroCallback = null; - gyroBase = null; - el.remove(); - } - - return { - el, - apply, - loadPreset, - loadImageFile, - applyImage, - startCamera, - stopCamera, - /** The data URL of a drawn effect line, so exports can composite the same - * bitmap the preview shows. */ - effectUrl, - get cameraActive() { - return stream !== null; - }, - requestGyro, - onGyro, - snapshot() {}, - dispose, - }; -} |