Ng-opencam NPM

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)	mediaConstraints	enum(EMediaConstraints)	switch between various media constraints (hd, vga, fhd, default)
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