Giter Club home page Giter Club logo

camerademo's Introduction

CameraDemo

Create your simple camera for taking photos and recording videos :D

Youtube links:

------------------CAMERA DEMO IN REACT NATIVE------------------

  1. STEP 1: Install necessary modules 'react-native-camera', 'react-native-permissions', 'react-native-vector-icons' npm i --save react-native-camera react-native-permissions react-native-vector-icons react-native link react-native-camera react-native-permissions react-native-vector-icons
    *** Fix error: Cannot choose between the following variants of project :react-native-camera:
  • generalDebugRuntimeElements
  • mlkitDebugRuntimeElements
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' <-- insert this line
  }
}
  1. STEP 2: Grant permissions 'record_audio', 'camera', 'storage'. Go to file '/app/src/main/AndroidManifest.xml'

  1. STEP 3: Configure general camera:
  • flashMode: on, off (used for take picture)
  • captureAudio: true, false (mute or unmute used for recording video)
  • front/back camera
  • maxDuration (for recording video)
  • seconds (recording time)
  1. STEP 4: Add icons for these purposes:
  • 'flash mode' (size 50, IoniconsIcon: 'ios-flash', 'ios-flash-off')
  • 'reverse camera' (size 60, IoniconsIcon: 'ios-reverse-camera')
  • 'capture' (size 40, Entypo: 'camera')
  • 'record video' (size 40, Entypo: 'video-camera')
  1. STEP 5: Turn on/off flash
  2. STEP 6: Capture
  3. STEP 7: Reverse camera
  4. STEP 8: Record video
  • Start recording video: count time

-------------Convert seconds to format 'mm:ss'

secondsToMMSS = (seconds: number) => {
        let m = Math.floor(seconds / 60);
        let s = Math.floor(seconds % 60);
    
        let mDisplay = m < 10 ? `0${m}` : `${m}`;
        let sDisplay = s < 10 ? `0${s}` : `${s}`;
        return `${mDisplay}:${sDisplay}`; 
    }
  • Stop recording video: reset time

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.