the-camera

Camera of the-components

Installation

$ npm install the-camera --save

Usage

'use strict'
 
import React from 'react'
import { TheCamera, TheCameraStyle } from 'the-camera'
import { TheVideoStyle } from 'the-video'
import { TheSpinStyle } from 'the-spin'
import { TheImageStyle } from 'the-image'
import { TheButtonStyle } from 'the-button'
 
class ExampleComponent extends React.PureComponent {
  constructor (props) {
    super(props)
    const s = this
    s.state = {
      photos: [],
      videos: []
    }
  }
 
  render () {
    const s = this
    const {photos, videos} = s.state
    return (
      <div>
        <TheVideoStyle/>
        <TheImageStyle/>
        <TheCameraStyle/>
        <TheSpinStyle/>
        <TheButtonStyle/>
        <TheCamera
          onPhoto={(photo) => s.setState({
            photos: [photo, ...s.state.photos]
          })}
          onVideo={(video) => s.setState({
            videos: [video, ...s.state.videos]
          })}
        />
        <hr/>
        <div>
          {
            photos.map((photo, i) => (
              <img src={photo}
                   key={i}
                   height={128}
              />
            ))
          }
          {
            videos.map((video, i) => (
              <video src={video}
                     key={i}
                     height={128}
                     muted
                     controls
              />
            ))
          }
        </div>
      </div>
 
    )
  }
}
 
export default ExampleComponent
 

Components

TheCamera

Camera of the-components

Props

Name	Type	Description	Default
mediaFailMessage	string	Message to show when failed to access camera	'Failed to access camera'
onPhoto	func	Handle photo taken	``
onVideo	func	Handle video taken	``

TheCameraButton

Props

Name	Type	Description	Default
hidden			false
smaller			false

TheCameraStyle

Style for TheCamera

Props

Name	Type	Description	Default
options	object	Style options	{}

TheCameraVideoTime

License

This software is released under the MIT License.

Links

• THE Labo