Natural Performance Manager

    the-camera

    1.0.7 • Public • Published

    the-camera

    Build Status npm Version JS Standard

    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

    Install

    npm i the-camera

    DownloadsWeekly Downloads

    3

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • okunishinishi