Angular library for handling device permissions
npm install ngx-device-permissionAngular library for managing browser permissions and accessing media devices (like microphone and camera) in a reactive and composable way using the Permissions API.
``bash`
npm install ngx-device-permission
- ✅ Check browser permission status (camera, microphone, geolocation, etc.)
- ✅ Observe permission changes via RxJS
- ✅ Request access to camera and microphone
- ✅ List connected media input/output devices
- 🔧 SSR-safe
- 📦 Tree-shakable and modular
`typescript
import { Component, inject } from '@angular/core';
import {
DevicePermissionService,
MediaDeviceService,
} from 'ngx-device-permission';
@Component({
selector: 'app-permissions',
standalone: true,
template:
Status: {{ cameraStatus$ | async }}
Status: {{ microphoneStatus$ | async }}
,
})
export class PermissionsComponent {
private permissionService = inject(DevicePermissionService);
private mediaService = inject(MediaDeviceService); cameraStatus$ = this.permissionService.observePermissionChange('camera');
microphoneStatus$ =
this.permissionService.observePermissionChange('microphone');
devices$ = this.mediaService.enumerateDevices();
stream: MediaStream | null = null;
requestMediaAccess() {
this.mediaService
.requestAccess({ video: true, audio: true })
.subscribe((stream) => {
this.stream = stream;
});
}
}
`$3
typescript
import { Component, inject } from '@angular/core';
import {
DevicePermissionService,
MediaDeviceService,
} from 'ngx-device-permission';@Component({
selector: 'app-permissions',
standalone: true,
template:
Status: {{ locationStatus$ | async }}
,
})
export class PermissionsComponent {
private permissionService = inject(DevicePermissionService);
private geolocationService = inject(GeolocationService); locationStatus$ =
this.permissionService.observePermissionChange('geolocation');
requestLocation() {
this.geolocationService.requestLocation().subscribe((position) => {
console.log(position);
});
}
}
``| Feature | Status |
| -------------------------------------------------------- | ---------- |
| Permission status query (Permissions API) | ✅ Done |
| Reactive permission change observer | ✅ Done |
| Media stream request (camera, mic) | ✅ Done |
| Device enumeration (microphones, cameras) | ✅ Done |
| Clipboard permission + interaction (navigator.clipboard) | ✅ Done |
| Geolocation permission and observer | ✅ Done |
| Notification permission API | ⏳ Planned |
PRs are welcome! Feel free to open issues or request new features.