een-api-toolkit 0.1.13 → 0.2.0

package/examples/vue-cameras/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "een-api-toolkit": "file:../..",
-        "pinia": "^2.1.7",
+        "pinia": "^3.0.4",
         "vue": "^3.4.0",
         "vue-router": "^4.2.0"
       },
@@ -23,21 +23,22 @@
       }
     },
     "../..": {
-      "version": "0.0.13",
+      "version": "0.1.13",
       "license": "MIT",
       "devDependencies": {
         "@playwright/test": "^1.57.0",
-        "@types/node": "^22.0.0",
-        "@typescript-eslint/eslint-plugin": "^6.21.0",
-        "@typescript-eslint/parser": "^6.21.0",
+        "@types/node": "^25.0.3",
+        "@typescript-eslint/eslint-plugin": "^8.51.0",
+        "@typescript-eslint/parser": "^8.51.0",
         "@vitejs/plugin-vue": "^6.0.0",
-        "@vue/tsconfig": "^0.5.0",
+        "@vue/tsconfig": "^0.8.1",
         "dotenv": "^17.2.3",
-        "eslint": "^8.56.0",
-        "eslint-plugin-vue": "^9.20.0",
+        "eslint": "^9.39.2",
+        "eslint-plugin-vue": "^10.6.2",
+        "globals": "^17.0.0",
         "husky": "^9.1.7",
         "jsdom": "^27.4.0",
-        "pinia": "^2.1.7",
+        "pinia": "^3.0.4",
         "tsx": "^4.21.0",
         "typedoc": "^0.28.15",
         "typedoc-plugin-markdown": "^4.9.0",
@@ -990,6 +991,30 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.1.tgz",
@@ -1063,6 +1088,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1179,6 +1228,24 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1188,6 +1255,12 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/muggle-string": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
@@ -1220,6 +1293,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1240,20 +1319,19 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
-      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^6.6.3",
-        "vue-demi": "^0.14.10"
+        "@vue/devtools-api": "^7.7.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "typescript": ">=4.4.4",
-        "vue": "^2.7.0 || ^3.5.11"
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1261,6 +1339,15 @@
         }
       }
     },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.57.0",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
@@ -1321,6 +1408,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
@@ -1372,6 +1465,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1521,32 +1635,6 @@
         }
       }
     },
-    "node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.6.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",

package/examples/vue-cameras/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "stop": "npx kill-port 3333",
+    "stop": "lsof -ti :3333 2>/dev/null | xargs -r kill -9 || echo 'Port 3333 is free'",
     "dev": "npm run stop && vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "een-api-toolkit": "file:../..",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.4",
     "vue": "^3.4.0",
     "vue-router": "^4.2.0"
   },

package/examples/vue-feeds/README.md

@@ -0,0 +1,162 @@
+# EEN API Toolkit - Vue Feeds Example
+
+A Vue 3 example demonstrating how to list camera feeds and display live video using the een-api-toolkit.
+
+![Feeds Screenshot](feeds-screenshot.png)
+
+## Features Demonstrated
+
+- OAuth authentication flow (login, callback, logout)
+- Protected routes with navigation guards
+- `getCameras()` function for listing cameras
+- `listFeeds()` function for listing available feeds per camera
+- `initMediaSession()` for cookie-based media authentication
+- Live video preview using multipart URL streams
+- Live Video SDK integration for WebCodecs-based streaming
+- Feed type filtering (main, preview, talkdown)
+- Modal-based video preview with multiple stream modes
+
+## APIs Used
+
+- `getCameras()` - List available cameras
+- `listFeeds()` - List feeds with streaming URLs (HLS, Multipart, FLV, RTSP)
+- `initMediaSession()` - Initialize session cookie for media access
+- `useAuthStore()` - Authentication state management
+- `initEenToolkit()` - Toolkit initialization
+
+## Video Streaming Modes
+
+This example demonstrates two different approaches to live video:
+
+| Mode | Stream Type | Technology | Latency | Browser Support |
+|------|-------------|------------|---------|-----------------|
+| **Preview** | Multipart URL | Session cookie + img tag | ~2-5s | All modern browsers |
+| **Live SDK** | WebCodecs | JWT + Live Video SDK | <1s | Chrome 94+, Edge 94+, Opera 80+ |
+
+## Setup
+
+### Prerequisites
+
+1. **Start the OAuth proxy** (required for authentication):
+
+   The OAuth proxy is a separate project that handles token management securely.
+   Clone and run it from: https://github.com/klaushofrichter/een-oauth-proxy
+
+   ```bash
+   # In a separate terminal, from the een-oauth-proxy directory
+   npm install
+   npm run dev
+   ```
+
+   The proxy should be running at `http://localhost:8787`.
+
+### Example Setup
+
+All commands below should be run from this example directory (`examples/vue-feeds/`):
+
+2. Copy the environment file:
+   ```bash
+   # From examples/vue-feeds/
+   cp .env.example .env
+   ```
+
+3. Edit `.env` with your EEN credentials:
+   ```env
+   VITE_EEN_CLIENT_ID=your-client-id
+   VITE_PROXY_URL=http://localhost:8787
+   # DO NOT change the redirect URI - EEN IDP only permits this URL
+   VITE_REDIRECT_URI=http://127.0.0.1:3333
+   ```
+
+4. Install dependencies and start:
+   ```bash
+   # From examples/vue-feeds/
+   npm install
+   npm run dev
+   ```
+
+5. Open http://127.0.0.1:3333 in your browser.
+
+**Important:** The EEN Identity Provider only permits `http://127.0.0.1:3333` as the OAuth redirect URI. Do not use `localhost` or other ports.
+
+**Note:** Development and testing was done on macOS. The `npm run stop` command uses `lsof`, which is not available on Windows. Windows users should manually stop any process on port 3333 or use `npx kill-port 3333` instead.
+
+## Project Structure
+
+```
+src/
+├── main.ts          # App entry, toolkit initialization
+├── App.vue          # Root component with navigation
+├── router/
+│   └── index.ts     # Vue Router with auth guards
+└── views/
+    ├── Home.vue     # Home page with login prompt
+    ├── Login.vue    # OAuth login redirect
+    ├── Callback.vue # OAuth callback handler
+    ├── Feeds.vue    # Feed list with live preview
+    └── Logout.vue   # Logout handler
+```
+
+## Key Code Examples
+
+### Listing Feeds for a Camera (Feeds.vue)
+
+```typescript
+import { listFeeds, type Feed, type FeedIncludeOption } from 'een-api-toolkit'
+
+const result = await listFeeds({
+  deviceId: selectedCameraId.value,
+  include: ['hlsUrl', 'multipartUrl', 'flvUrl', 'rtspUrl']
+})
+
+if (result.error) {
+  error.value = result.error.message
+} else {
+  feeds.value = result.data?.results || []
+}
+```
+
+### Initializing Media Session for Preview Streams
+
+```typescript
+import { initMediaSession } from 'een-api-toolkit'
+
+async function initializeMediaSession() {
+  const result = await initMediaSession()
+  if (result.error) {
+    mediaSessionError.value = result.error.message
+    return false
+  }
+  mediaSessionInitialized.value = true
+  return true
+}
+```
+
+### Using Live Video SDK for Main Streams
+
+```typescript
+import LivePlayer from '@een/live-video-web-sdk'
+
+async function initLivePlayer(feed: Feed) {
+  const livePlayer = new LivePlayer()
+  await livePlayer.start({
+    videoElement: videoRef.value,
+    cameraId: feed.deviceId,
+    baseUrl: authStore.baseUrl,
+    jwt: authStore.token
+  })
+}
+```
+
+### Displaying Multipart Preview Stream
+
+```vue
+<template>
+  <!-- Multipart Image for preview mode -->
+  <img
+    v-if="selectedFeed.multipartUrl"
+    :src="selectedFeed.multipartUrl"
+    alt="Live camera preview"
+  />
+</template>
+```