the-cam

the-cam

Embed camera component

Installation

$ npm install the-cam --save

Usage

'use strict'

import 'the-polyfill/apply' // Some browser needs polyfill for ImageCapture API
import React from 'react'
import { TheCam, TheCamStyle, TheCamInput } from 'the-cam'
import { TheSpinStyle } from 'the-spin'

class ExampleComponent extends React.Component {
  state = {
    disabled: false,
    photo01: null,
  }
  start = () => {
    this.setState({ disabled: false })
  }
  stop = () => {
    this.setState({ disabled: true })
  }

  handleUpdate = (v) => this.setState(v)

  render () {
    return (
      <div>
        <TheCamStyle/>
        <TheSpinStyle/>
        <TheCam onStrat={() => console.log('camera started')}
                onStop={() => console.log('camera stopped')}
                disabled={this.state.disabled}
        >
        </TheCam>

        <br/>
        <button onClick={this.start}>Start</button>
        <button onClick={this.stop}>Stop</button>

        <br/>
        <hr/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <section>
          <h1>As Input</h1>
          <TheCamInput value={this.state.photo01}
                       name={'photo01'}
                       onUpdate={this.handleUpdate}
          >
          </TheCamInput>
        </section>
      </div>

    )
  }
}

export default ExampleComponent

Components

TheCam

Embed camera component

Props

Name	Type	Description	Default
audio	union	Audio media constraint	false
disabled	bool	Camera disabled	false
height	union		150
onStream	func	Handle for stream	null
rejectedMessage	node	Message to show when camera access rejected	'Failed to access camera'
video	union	Video media constraint	true
width	union		'100%'
onReject			null
spinning			false

TheCamInput

Embed camera component

Props

Name	Type	Description	Default
audio	custom		TheCam.defaultProps.audio
convertFile	func		(file) => readFileAsDataURL(file)
height	custom		TheCam.defaultProps.height
onReject	func		null
onUpdate	func		null
video	custom		TheCam.defaultProps.video
width	custom		TheCam.defaultProps.width
value			null

TheCamStyle

Style for TheCam

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo