\n
\n );\n};\n\nexport default DocumentScanner;\n```\n\n### Angular\n\n```typescript\n// document-scanner.component.ts\nimport { Component, ElementRef, ViewChild, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { defineCustomElements } from '@jaak.ai/stamps/loader';\n\n// Define custom elements\ndefineCustomElements();\n\ninterface CapturedImages {\n front: { fullFrame: string | null; cropped: string | null };\n back: { fullFrame: string | null; cropped: string | null };\n metadata: {\n totalImages: number;\n processCompleted: boolean;\n backCaptureSkipped: boolean;\n };\n}\n\n@Component({\n selector: 'app-document-scanner',\n template: `\n Document Scanner
\n \n\n \n
\n \n {capturedImages && (\n \n
\n )}\n Captured Images
\n {capturedImages.front.cropped && (\n\n 
\n
\n )}\n {capturedImages.back.cropped && (\n Front Document
\n\n 
\n
\n )}\n Back Document
\n\n \n \n \n
\n `,\n styles: [`\n .scanner-container {\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n }\n \n .controls {\n margin: 20px 0;\n display: flex;\n gap: 10px;\n }\n \n .scan-button, .reset-button {\n padding: 10px 20px;\n font-size: 16px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n \n .scan-button {\n background-color: #007bff;\n color: white;\n }\n \n .reset-button {\n background-color: #6c757d;\n color: white;\n }\n \n .scan-button:disabled, .reset-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n \n .results {\n margin-top: 20px;\n }\n \n .image-result {\n margin: 20px 0;\n }\n \n .captured-image {\n max-width: 100%;\n height: auto;\n border: 1px solid #ddd;\n border-radius: 4px;\n }\n \n .metadata {\n background-color: #f8f9fa;\n padding: 10px;\n border-radius: 4px;\n margin-top: 20px;\n }\n `],\n schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class DocumentScannerComponent implements AfterViewInit {\n @ViewChild('scanner', { static: false }) scannerRef!: ElementRef;\n \n isReady = false;\n capturedImages: CapturedImages | null = null;\n \n ngAfterViewInit() {\n const scanner = this.scannerRef.nativeElement;\n\n // Trace ID generation handler\n scanner.addEventListener('traceIdGenerated', (event: CustomEvent) => {\n console.log('Trace ID:', event.detail.traceId);\n });\n\n // Component ready handler\n scanner.addEventListener('isReady', () => {\n this.isReady = true;\n });\n\n // Capture completion handler\n scanner.addEventListener('captureCompleted', async () => {\n this.capturedImages = await scanner.getCapturedImages();\n });\n }\n \n async startScan() {\n if (this.scannerRef?.nativeElement) {\n await this.scannerRef.nativeElement.startCapture();\n }\n }\n \n async resetScan() {\n if (this.scannerRef?.nativeElement) {\n await this.scannerRef.nativeElement.resetCapture();\n this.capturedImages = null;\n }\n }\n}\n```\n\n```typescript\n// app.module.ts\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { DocumentScannerComponent } from './document-scanner.component';\n\n@NgModule({\n declarations: [DocumentScannerComponent],\n imports: [BrowserModule],\n schemas: [CUSTOM_ELEMENTS_SCHEMA], // Required for custom elements\n exports: [DocumentScannerComponent]\n})\nexport class DocumentScannerModule { }\n```\n\n## Telemetry and Observability (OpenTelemetry)\n\nJaak Stamps includes full **OpenTelemetry** integration for distributed tracing, metrics, and performance monitoring in production environments.\n\n### Distributed Tracing\n\nThe component implements distributed tracing following the **W3C Trace Context** standard, providing:\n\n- Complete flow tracking of document capture processes\n- Request correlation between frontend and backend\n- Performance bottleneck identification\n- Context propagation via `traceparent` headers\n\n**Automatically Recorded Spans:**\n- `component.initialize` - Component initialization\n- `capture.start` - Capture process start\n- `model.preload` - AI model preloading\n- `model.detection.load` - Detection model loading\n- `model.classification.load` - Classification model loading\n\n### Performance Metrics\n\nThe component exports detailed metrics to OpenTelemetry:\n\n**Counters:**\n- `capture.counter` - Number of completed captures\n- `error.counter` - Error count by type\n- `model.load.counter` - Model load count\n- `user.interaction.counter` - User interactions\n\n**Histograms (Latencies):**\n- `capture.latency` - Total capture time\n- `model.load.latency` - Model loading time\n- `detection.latency` - Per-frame detection time\n- `image.size` - Captured image sizes\n\n**Gauges (Current State):**\n- `active.sessions` - Active sessions\n- `memory.usage` - Memory usage\n\n### Telemetry Configuration\n\n```html\nDocument Scanner
\n \n\n \n \n \n
\n \n \n
\n Captured Images
\n \n\n ![\"Front]()
\n
\n \n Front Document
\n\n ![\"Back]()
\n
\n \n \n