Wondering what’s next for npm?Check out our public roadmap! »

ng-opencamTypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

Opencam

Opencam is an Angular library component developped to manipulate camera and perform various actions.

Demo

Try it out here: DEMO or clone this repo and run ng serve for a full demo of opencam.

Features

  • Stream video (audio support)
  • Record video / capture picture
  • Countdown
  • Framerate
  • CSS Filter

How to use

First install the package with the command npm i ng-opencam

Then, in your module.ts, import the library module

import { OpencamModule } from 'ng-opencam';

And add it to your imports modules. You can now use <ng-opencam></ng-opencam> it in any component.html

<ng-opencam
    [capture]='this.capture$'
    [height]='this.height'
    [width]='this.width'
    [captureType]='this.captureType'
    [streamState]='this.streamState'
    [mediaConstraints]='this.mediaConstraints'
    [videoSource]='this.videoSource'
    [audioSource]='this.audioSource'
    [filters]='this.filter'
    [framerate]='this.framerate'
    (videoSourceEvent)='this.getVideoSources($event)'
    (audioSourceEvent)='this.getAudioSources($event)'
    (captureEvent)='this.getCapture($event)'
    (errorEvent)='this.getErrors($event)'>
</ng-opencam>

Check out the repo for a full demo code here

Inputs

Property Type Note
[capture] observable(number) triggers the capture after specific timeout
[height] string height size of the capture container, if null given capture container is not displayed
[width] string width size of the capture container, if null given capture container is not displayed
[captureType] enum(ECaptureType) switch between various capture mode (video, picture)
[streamState] enum(EStreamState) switch between various stream states (play, pause, stop)
[videoSource] ISourceDevice Specify the video source for the capture, sources are emitted by (videoSourceEvent) select the one you want to use
[audioSource] ISourceDevice Specify the audio source for the capture, sources are emitted by (audioSourceEvent) select the one you want to use
[filters] string Apply css filters on the feed and capture
[framerate] number Specify the framerate of the recording & canvas rendering

Outputs

Event Type Note
(videoSourceEvent) array(interface(ISourceDevice)) Emits the available video source devices for the capture, triggered every time a new video input is detected
(audioSourceEvent) array(ISourceDevice(ISourceDevice)) Emits the available audio source devices for the capture, triggered every time a new audio input is detected
(captureEvent) string Emits the data URL for the media (video, picture) when the capture is triggered (and ended for the video)
(errorEvent) Error Emits all errors

To-do

  • Improve filter system (add models to manipulate filters instead of css string)
  • Move media camera manipulation in a service

NPM

This package is on npm https://www.npmjs.com/package/ng-opencam

License

This package is under the MIT license

Install

npm i ng-opencam

DownloadsWeekly Downloads

9

Version

0.0.7

License

MIT

Unpacked Size

324 kB

Total Files

29

Last publish

Collaborators

  • avatar