camera-component

JavaScript Camera Component

A Javascript camera component, made with Stencil.js. This is a web component and as such, it does not depend on any framework.

Anyhow it works well with Angular, React, Vue, Stencil, JQuery, any other unimaginable framework or none at all.

Quick example

See example in examples folder

<script type="module" src="https://unpkg.com/camera-component/dist/camera-component/camera-component.esm.js"></script>
<script nomodule src="https://unpkg.com/camera-component/dist/camera-component/camera-component.js"></script>

<camera-component id="cam" show-preview="true"></camera-component>
<button onclick="cam.start()">Open the camera in embedded mode</button>
<button onclick="cam.start(1)">Open the camera in a modal</button>
<script>
    const cam = document.getElementById('cam');
    cam.addEventListener('picture', (e) => console.log('Picture in base 64:', e.detail));
    cam.addEventListener('backButton', () => console.log('backButton'));
    cam.addEventListener('webcamStop', () => console.log('webcamStop'));
</script>

Install

JS without any framework

Include the following scripts on the html page:

<script type="module" src="https://unpkg.com/camera-component/dist/camera-component/camera-component.esm.js"></script>
<script nomodule src="https://unpkg.com/camera-component/dist/camera-component/camera-component.js"></script>

Frameworks

Install using npm

npm install camera-component --save

or yarn

yarn add camera-component

React

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { applyPolyfills, defineCustomElements } from 'camera-component/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements(window);
});

// App.jsx
import React from 'react';
import 'camera-component';

const App = () => {
    return <camera-component />
}

export default App;

Angular

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { applyPolyfills, defineCustomElements } from 'camera-component/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
applyPolyfills().then(() => {
  defineCustomElements()
})

// app.component.ts
import {Component, ElementRef, ViewChild} from '@angular/core';

import 'camera-component';

@Component({
    selector: 'app-home',
    template: `<camera-component #cam></camera-component>`,
    styleUrls: ['./home.component.scss'],
})
export class AppComponent {

    @ViewChild('cam') camComponent: ElementRef<HTMLCamComponentElement>;

    async onAction() {
        await this.camComponent.nativeElement.camComponentMethod();
    }
}

// app.component.html
<camera-component />

Stencil

import { Component } from '@stencil/core';
import 'camera-component';

@Component({
  tag: 'camera',
  styleUrl: 'camera.scss'
})
export class Camera {

render() {
    return (
      <camera-component />
    );
  }
}

Quick start: Camera component

This is the camera component, ready to start the cam. It works in two different modes: embedded or in a modal.

<camera-component id="cam" show-preview="true"></camera-component>
<button onclick="cam.start()">Open the camera in embedded mode</button>
<button onclick="cam.start(1)">Open the camera in a modal</button>
<script>
    const cam = document.getElementById('cam');
    cam.addEventListener('picture', (e) => console.log('Picture in base 64:', e.detail));
    cam.addEventListener('backButton', () => console.log('backButton'));
    cam.addEventListener('webcamStop', () => console.log('webcamStop'));
</script>

See documentation on Github or complete example

Quick start: Camera controller

This is the low level camera controller.

<camera-controller id="cam"></camera-controller>
<button onclick="cam.flipCam()">Flip</button>
<button onclick="cam.takePicture()">Take picture</button>
<button onclick="cam.stopWebcam()">Stop cam</button>
<script>
    const cam = document.getElementById('cam');
    cam.addEventListener('picture', (e) => console.log('Picture in base 64:', e.detail.snapshot));
    cam.addEventListener('backButton', () => console.log('backButton'));
    cam.addEventListener('webcamStop', () => console.log('webcamStop'));
</script>

See documentation on Github or complete example

API

API camera-component

Overview

Camera component, this is the main component.

Properties

Property	Attribute	Description	Type	Default
allowGallery	allow-gallery	If true, allows taking picture from gallery	boolean	true
backButtonStopCam	back-button-stop-cam	If true, stops cam when back button is pushed	boolean	true
orientation	orientation	Camera selected - user: front camera - environtment: back camera	CamOrientation.environment | CamOrientation.user	CamOrientation.environment
showPreview	show-preview	If true, shows image preview when snap	boolean	true

Events

Event	Description	Type
backButton	Event emitted when back button is pushed	CustomEvent<void>
picture	Event emitted when snap	CustomEvent<any>
webcamStop	Event emitted when cam stop	CustomEvent<any>

Methods

start(camMode?: CamMode) => Promise<void>

Method to open the camera

Returns

Type: Promise<void>

void

stop() => Promise<void>

Method to stop the camera

Returns

Type: Promise<void>

void

Dependencies

Depends on

• camera-controller

Graph

graph TD;
  camera-component --> camera-controller
  camera-controller --> ion-footer
  camera-controller --> ion-button
  camera-controller --> ion-icon
  ion-button --> ion-ripple-effect
  style camera-component fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

API camera-controller

Overview

Camera controller component

Properties

Property	Attribute	Description	Type	Default
allowGallery	allow-gallery	If true, allows taking picture from gallery	boolean	true
backButtonStopCam	back-button-stop-cam	If true, stops cam when back button is pushed	boolean	true
camMode	cam-mode	Camera mode	CamMode.embedded | CamMode.modal	undefined
height	height	Video element height	number	undefined
orientation	orientation	Selected camera - user: front camera - environtment: back camera	CamOrientation.environment | CamOrientation.user	CamOrientation.environment
showPreview	show-preview	If true, shows image preview when snap	boolean	true
width	width	Video element width	number	undefined

Events

Event	Description	Type
backButton	Event emitted when back button is pushed	CustomEvent<void>
picture	Event emitted when snap	CustomEvent<any>
webcamStop	Event emitted when cam is stoped	CustomEvent<any>

Methods

flipCam() => Promise<void>

Switch between front and back cam

Returns

Type: Promise<void>

void

resize(width: number, height: number) => Promise<void>

Change the video element size

Returns

Type: Promise<void>

void

stopWebcam() => Promise<void>

Stop the webcam Emits webcamStop event

Returns

Type: Promise<void>

void

takePicture() => Promise<void>

Captures the picture Emits picture event

Returns

Type: Promise<void>

void

Dependencies

Used by

• camera-component

Depends on

• ion-footer
• ion-button
• ion-icon

Graph

graph TD;
  camera-controller --> ion-footer
  camera-controller --> ion-button
  camera-controller --> ion-icon
  ion-button --> ion-ripple-effect
  camera-component --> camera-controller
  style camera-controller fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Roadmap

• Share image: Twitter, Facebook, Instagram, Email, Linkedin
• Rotate image
• Scale image
• Button effects
• Image effects (sepia, black/white, ...)
• Video recorder
• Allow multiple image formats (png, jpeg, quality, base64, blob, ...)