@angular-helpers/browser-web-apis

Angular services package for a structured and secure access layer over browser Web APIs.

Leer en espanol

Features

Integrated security with ReDoS prevention using Web Workers
Unified browser API access through strongly typed services
Tree-shakable architecture
Modular provider setup to enable only what you need
Reactive APIs with signals and observables
Lifecycle-safe integration with destroyRef

Available Services

Media and Device APIs

CameraService - Camera access with permission handling
MediaDevicesService - Media device listing and management
GeolocationService - Geolocation API access
NotificationService - Browser notifications API

Web APIs

WebWorkerService - Web Worker management
WebSocketService - WebSocket connection handling
WebStorageService - LocalStorage and SessionStorage helpers
WebShareService - Native Web Share API support
ClipboardService - System clipboard access

Security

RegexSecurityService - ReDoS prevention with worker-based validation
PermissionsService - Centralized browser permissions handling

Utilities

CameraPermissionHelperService - Camera permission helper utilities
BrowserApiBaseService - Shared base class for browser API services
MediaDeviceBaseService - Shared base class for media device services

Installation

npm install @angular-helpers/browser-web-apis

Quick Setup

import { provideBrowserWebApis } from '@angular-helpers/browser-web-apis';

bootstrapApplication(AppComponent, {
  providers: [
    provideBrowserWebApis({
      enableCamera: true,
      enableGeolocation: true,
      enableRegexSecurity: true,
    }),
  ],
});

Usage by Service

CameraService

import { CameraService } from '@angular-helpers/browser-web-apis';

export class PhotoComponent {
  constructor(private cameraService: CameraService) {}

  async takePhoto() {
    try {
      const stream = await this.cameraService.startCamera({
        video: true,
        audio: false,
      });

      // Use stream for video/photo capture
    } catch (error) {
      console.error('Error accessing camera:', error);
    }
  }

  async stopCamera() {
    await this.cameraService.stopCamera();
  }
}

RegexSecurityService (ReDoS Prevention)

import { RegexSecurityService } from '@angular-helpers/browser-web-apis';

export class SecurityComponent {
  constructor(private regexSecurity: RegexSecurityService) {}

  async testPattern() {
    const pattern = '(.+)+'; // Potentially unsafe regex pattern
    const text = 'some text to test';

    try {
      const result = await this.regexSecurity.testRegex(pattern, text, {
        timeout: 5000,
        safeMode: true,
      });

      console.log('Match:', result.match);
      console.log('Execution time:', result.executionTime);
    } catch (error) {
      console.error('Regex test failed:', error);
    }
  }
}

GeolocationService

import { GeolocationService } from '@angular-helpers/browser-web-apis';

export class LocationComponent {
  constructor(private geolocation: GeolocationService) {}

  async getCurrentLocation() {
    try {
      const position = await this.geolocation.getCurrentPosition({
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 60000,
      });

      console.log('Position:', position.coords);
    } catch (error) {
      console.error('Error getting location:', error);
    }
  }
}

Browser Support

The services automatically validate browser support and unsupported-path handling:

Chrome: full support
Firefox: full support
Safari: partial support
Edge: full support
Mobile browsers: depends on platform and API

Notes

Secure context (HTTPS) is required for several APIs
Some APIs require explicit user interaction
Permission behavior varies by browser
Always implement error handling and fallback logic

License

MIT