@zappar/zappar-cv 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.0.2] - 2023-05-04
+
+### Fixed
+
+- Unique user calculation when using the Zapworks built-in analytics system
+
+## [2.0.1] - 2023-03-24
+
+### Fixed
+
+- Workaround for bug in iOS Safari 16.4 that selects the wrong rear-facing camera on some devices
+
 ## [2.0.0] - 2022-08-23
 
 ### Added

package/README.md

@@ -18,8 +18,8 @@ npm i @zappar/zappar-cv
 
 You can use our CDN from within your HTML:
 ```
-<script src="https://libs.zappar.com/zappar-cv/2.0.0/zappar-cv.js"></script>
+<script src="https://libs.zappar.com/zappar-cv/2.0.2/zappar-cv.js"></script>
 ```
 
 Or you can download and host our standalone JavaScript bundle:
-[https://libs.zappar.com/zappar-cv/2.0.0/zappar-cv.zip](https://libs.zappar.com/zappar-cv/2.0.0/zappar-cv.zip)
+[https://libs.zappar.com/zappar-cv/2.0.2/zappar-cv.zip](https://libs.zappar.com/zappar-cv/2.0.2/zappar-cv.zip)

package/lib/additional.d.ts

@@ -23,4 +23,5 @@ export interface Additional {
     browser_incompatible: () => boolean;
     browser_incompatible_ui: () => void;
     sequence_source_time_set: (o: zappar_sequence_source_t, ms: number) => void;
+    cookies_permitted: (p: boolean) => void;
 }

package/lib/camera-source.d.ts

@@ -7,6 +7,8 @@ export declare class CameraSource extends HTMLElementSource {
     static DEFAULT_DEVICE_ID: string;
     private _currentStream;
     private _activeDeviceId;
+    private _explicitUserCameraId;
+    private _explicitEnvironmentCameraId;
     constructor(_impl: zappar_camera_source_t, pipeline: zappar_pipeline_t, _deviceId: string);
     destroy(): void;
     private _stop;

package/lib/camera-source.js

@@ -84,6 +84,20 @@ export class CameraSource extends HTMLElementSource {
             }
             else {
                 facingMode = (this._deviceId === CameraSource.DEFAULT_DEVICE_ID) ? "environment" : "user";
+                if (profile.ios164CameraSelection) {
+                    if (!this._explicitEnvironmentCameraId || !this._explicitUserCameraId) {
+                        const stream = yield navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode } });
+                        let tracks = stream.getTracks();
+                        tracks.forEach(t => t.stop());
+                        let devices = yield navigator.mediaDevices.enumerateDevices();
+                        devices = devices.filter(val => val.kind === 'videoinput');
+                        if (devices.length >= 2) {
+                            this._explicitUserCameraId = devices[0].deviceId;
+                            this._explicitEnvironmentCameraId = devices[1].deviceId;
+                        }
+                    }
+                    deviceId = (facingMode === 'environment') ? this._explicitEnvironmentCameraId : this._explicitUserCameraId;
+                }
             }
             let constraints = {
                 audio: false,

package/lib/gen/zappar-client.js

@@ -29,9 +29,10 @@ export class zappar_client {
                     m.logLevel(level);
                 });
             },
-            analytics_project_id_set: (id) => {
+            analytics_project_id_set: (id, uid) => {
                 this.serializer.sendMessage(31, m => {
                     m.string(id);
+                    m.string(uid);
                 });
             },
             // #### pipeline ####

package/lib/gen/zappar-cwrap.js

@@ -4,7 +4,7 @@ export function getRuntimeObject(mod) {
         "number"
     ]);
     let analytics_project_id_set_wrapped = mod.cwrap("zappar_analytics_project_id_set", null, [
-        "string"
+        "string", "string"
     ]);
     let pipeline_create_wrapped = mod.cwrap("zappar_pipeline_create", "number", []);
     let pipeline_destroy_wrapped = mod.cwrap("zappar_pipeline_destroy", null, ["number"]);
@@ -195,9 +195,10 @@ export function getRuntimeObject(mod) {
             let ret = log_level_set_wrapped(arg_level);
             return ret;
         },
-        analytics_project_id_set: (id) => {
+        analytics_project_id_set: (id, uid) => {
             let arg_id = id;
-            let ret = analytics_project_id_set_wrapped(arg_id);
+            let arg_uid = uid;
+            let ret = analytics_project_id_set_wrapped(arg_id, arg_uid);
             return ret;
         },
         pipeline_create: () => {

package/lib/gen/zappar-native.d.ts

@@ -91,7 +91,7 @@ export declare type zappar_instant_world_tracker_t = number & {
 export interface zappar_cwrap {
     log_level(): log_level_t;
     log_level_set(level: log_level_t): void;
-    analytics_project_id_set(id: string): void;
+    analytics_project_id_set(id: string, uid: string): void;
     pipeline_create(): zappar_pipeline_t;
     pipeline_destroy(o: zappar_pipeline_t): void;
     pipeline_frame_update(o: zappar_pipeline_t): void;

package/lib/gen/zappar-server.js

@@ -34,7 +34,7 @@ export class zappar_server {
                     break;
                 }
                 case 31: {
-                    this._impl.analytics_project_id_set(msg.string());
+                    this._impl.analytics_project_id_set(msg.string(), msg.string());
                     break;
                 }
                 case 27: {

package/lib/gen/zappar.d.ts

@@ -58,7 +58,7 @@ export interface zappar {
     permission_denied_any(): boolean;
     permission_denied_camera(): boolean;
     permission_denied_motion(): boolean;
-    analytics_project_id_set(id: string): void;
+    analytics_project_id_set(id: string, uid: string): void;
     pipeline_create(): zappar_pipeline_t;
     pipeline_destroy(o: zappar_pipeline_t): void;
     pipeline_camera_frame_upload_gl(o: zappar_pipeline_t): void;

package/lib/imagetracker-previewmesh.js

@@ -48,6 +48,11 @@ function cylindrical(info) {
 }
 function conical(info) {
     const radius_diff = info.topRadius - info.bottomRadius;
+    // Prevents divide by zero errors.
+    if (radius_diff === 0) {
+        console.warn("Conical target has matching radii, using cylindrical preview mesh with a defined image size instead.");
+        return cylindrical(info);
+    }
     const height_3d = Math.sqrt(info.sideLength * info.sideLength - radius_diff * radius_diff);
     const flip = info.bottomRadius > info.topRadius;
     let aspect_ratio = info.trainedWidth / info.trainedHeight;

package/lib/native.js

@@ -40,10 +40,12 @@ export function initialize(opts) {
             d: ab
         }, [ab]);
     });
+    const uid = getUID();
+    let hasPersistedUID = false;
     if (window.location.hostname.toLowerCase().indexOf(".zappar.io") > 0 || window.location.hostname.toLowerCase().indexOf(".webar.run") > 0) {
         let pathParts = window.location.pathname.split("/");
         if (pathParts.length > 1 && pathParts[1].length > 0)
-            c.impl.analytics_project_id_set(".wiz" + pathParts[1]);
+            c.impl.analytics_project_id_set(".wiz" + pathParts[1], uid);
     }
     messageManager.onIncomingMessage.bind(msg => {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -479,6 +481,16 @@ export function initialize(opts) {
         }, html_element_source_create: (pipeline, elm) => HTMLElementSource.createVideoElementSource(pipeline, elm), html_element_source_start: o => { var _a; return (_a = HTMLElementSource.getVideoElementSource(o)) === null || _a === void 0 ? void 0 : _a.start(); }, html_element_source_pause: o => { var _a; return (_a = HTMLElementSource.getVideoElementSource(o)) === null || _a === void 0 ? void 0 : _a.pause(); }, html_element_source_destroy: o => { var _a; return (_a = HTMLElementSource.getVideoElementSource(o)) === null || _a === void 0 ? void 0 : _a.destroy(); }, sequence_source_create: p => SequenceSource.create(p), sequence_source_load_from_memory: (o, data) => { var _a; return (_a = SequenceSource.get(o)) === null || _a === void 0 ? void 0 : _a.loadFromMemory(data); }, sequence_source_pause: o => { var _a; return (_a = SequenceSource.get(o)) === null || _a === void 0 ? void 0 : _a.pause(); }, sequence_source_start: o => { var _a; return (_a = SequenceSource.get(o)) === null || _a === void 0 ? void 0 : _a.start(); }, sequence_source_max_playback_fps_set: (o, fps) => { var _a; return (_a = SequenceSource.get(o)) === null || _a === void 0 ? void 0 : _a.maxPlaybackFpsSet(fps); }, sequence_source_time_set: (o, t) => { var _a; return (_a = SequenceSource.get(o)) === null || _a === void 0 ? void 0 : _a.setTime(t); }, sequence_source_destroy: o => { var _a; return (_a = SequenceSource.get(o)) === null || _a === void 0 ? void 0 : _a.destroy(); }, permission_granted_all: permissionGrantedAll, permission_granted_camera: permissionGrantedCamera, permission_granted_motion: permissionGrantedMotion, permission_denied_any: permissionDeniedAny, permission_denied_camera: permissionDeniedCamera, permission_denied_motion: permissionDeniedMotion, permission_request_motion: permissionRequestMotion, permission_request_camera: permissionRequestCamera, permission_request_all: permissionRequestAll, permission_request_ui: permissionRequestUI, permission_request_ui_promise: permissionRequestUI, permission_denied_ui: permissionDeniedUI, browser_incompatible: compatibility.incompatible, browser_incompatible_ui: compatibility.incompatible_ui, log_level_set: l => {
             setLogLevel(l);
             c.impl.log_level_set(l);
+        }, cookies_permitted: p => {
+            if (p) {
+                if (!hasPersistedUID) {
+                    persistUID(uid);
+                    hasPersistedUID = true;
+                }
+            }
+            else {
+                deleteUID();
+            }
         } });
     return client;
 }
@@ -490,3 +502,25 @@ function loadDefaultFaceModel(o) {
         client === null || client === void 0 ? void 0 : client.face_tracker_model_load_from_memory(o, ab);
     });
 }
+function getUID() {
+    let uid = window.localStorage.getItem('z_uar_lid');
+    if (uid === null) {
+        const destination = new Uint8Array(8);
+        window.crypto.getRandomValues(destination);
+        uid = '';
+        for (let i = 0; i < destination.byteLength; i++) {
+            const part = destination[i].toString(16);
+            if (part.length === 1)
+                uid += '0' + part;
+            else if (part.length === 2)
+                uid += part;
+        }
+    }
+    return uid;
+}
+function persistUID(u) {
+    window.localStorage.setItem('z_uar_lid', u);
+}
+function deleteUID() {
+    window.localStorage.removeItem('z_uar_lid');
+}

package/lib/permission.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { UAParser } from "ua-parser-js";
+import { STRINGS, tr } from "./tr";
 let parser = new UAParser();
 let _permissionGrantedCamera = false;
 let _permissionGrantedMotion = false;
@@ -120,9 +121,9 @@ export function permissionRequestUI() {
         }
     </style>
     <div class="zappar-inner">
-        <div class="zappar-title">Almost there...</div>
-        <div class="zappar-text">In order to provide this augmented reality experience, we need access to your device's camera and motion sensors.</div>
-        <button id="zappar-permission-request-button">Grant Access</button>
+        <div class="zappar-title">${tr(STRINGS.PermissionTitle)}</div>
+        <div class="zappar-text">${tr(STRINGS.PermissionDescription)}</div>
+        <button id="zappar-permission-request-button">${tr(STRINGS.PermissionButton)}</button>
     </div>
 `;
         document.body.append(div);

package/lib/profile.d.ts

@@ -15,4 +15,5 @@ export declare let profile: {
     videoElementInDOM: boolean;
     preferMediaStreamTrackProcessorCamera: boolean;
     preferImageBitmapCamera: boolean;
+    ios164CameraSelection: boolean;
 };

package/lib/profile.js

@@ -16,7 +16,8 @@ export let profile = {
     dataHeight: 240,
     videoElementInDOM: false,
     preferMediaStreamTrackProcessorCamera: false,
-    preferImageBitmapCamera: false
+    preferImageBitmapCamera: false,
+    ios164CameraSelection: false
 };
 if (typeof window !== "undefined") {
     window["zeeProfile"] = profile;
@@ -74,5 +75,8 @@ function iDevice(version) {
                 profile.dataHeight = 180;
             }
         }
+        if ((majorVersion === 16 && minorVersion >= 4) || (majorVersion > 16)) {
+            profile.ios164CameraSelection = true;
+        }
     }
 }

package/lib/tr.d.ts

@@ -0,0 +1,6 @@
+export declare enum STRINGS {
+    PermissionTitle = 0,
+    PermissionDescription = 1,
+    PermissionButton = 2
+}
+export declare function tr(str: STRINGS): string;

package/lib/tr.js

@@ -0,0 +1,42 @@
+export var STRINGS;
+(function (STRINGS) {
+    STRINGS[STRINGS["PermissionTitle"] = 0] = "PermissionTitle";
+    STRINGS[STRINGS["PermissionDescription"] = 1] = "PermissionDescription";
+    STRINGS[STRINGS["PermissionButton"] = 2] = "PermissionButton";
+})(STRINGS || (STRINGS = {}));
+function parseLanguage(inp) {
+    const [lang, locale] = inp.toLowerCase().split("-");
+    return [lang, locale || ""];
+}
+const [lang, locale] = parseLanguage(navigator.language);
+export function tr(str) {
+    switch (lang) {
+        case "es":
+            switch (str) {
+                case STRINGS.PermissionTitle: return "Ya casi...";
+                case STRINGS.PermissionDescription: return "Para brindar esta experiencia de realidad aumentada, necesitamos acceso a la cámara y los sensores de movimiento de su dispositivo.";
+                case STRINGS.PermissionButton: return "Permitir acceso";
+            }
+            break;
+        case "de":
+            switch (str) {
+                case STRINGS.PermissionTitle: return "Fast am Ziel..";
+                case STRINGS.PermissionDescription: return "Um dir dieses Augmented Reality Erlebnis zu liefern, brauchen wir Zugriff auf die Kamera und Bewegungssensoren deines Gerätes.";
+                case STRINGS.PermissionButton: return "Gewähre Zugriff";
+            }
+            break;
+        case "pt":
+            switch (str) {
+                case STRINGS.PermissionTitle: return "Está quase!";
+                case STRINGS.PermissionDescription: return "Esta experiência de realidade aumentada precisa de acesso à câmera e aos sensores de movimento deste dispositivo.";
+                case STRINGS.PermissionButton: return "Permitir acesso";
+            }
+            break;
+    }
+    switch (str) {
+        case STRINGS.PermissionTitle: return "Almost there...";
+        case STRINGS.PermissionDescription: return "In order to provide this augmented reality experience, we need access to your device's camera and motion sensors.";
+        case STRINGS.PermissionButton: return "Grant Access";
+    }
+    return "";
+}

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "2.0.0";
+export declare const VERSION = "2.0.2";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = "2.0.0";
+export const VERSION = "2.0.2";