Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maxs15/react-native-screcorder

A <Recorder /> element for react-native
https://github.com/maxs15/react-native-screcorder

Last synced: about 1 month ago
JSON representation

A <Recorder /> element for react-native

Awesome Lists containing this project

README 

        
# react-native-screcorder



A react native component to capture pictures and record Video with Vine-like tap to record, animatable filters, slow motion, segments editing.  

Based on this awesome library [SCRecorder](https://github.com/rFlex/SCRecorder).



## Getting started



1. `npm install react-native-screcorder@latest --save`

2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`

3. Go to `node_modules` ➜ `react-native-screcorder` and add `RNRecorder.xcodeproj`

4. In XCode, in the project navigator, select your project. Add `libRNRecorder.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`

5. Click `RNRecorder.xcodeproj` in the project navigator and go the `Build Settings` tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for `Header Search Paths` and make sure it contains both `$(SRCROOT)/../react-native/React` and `$(SRCROOT)/../../React` - mark both as `recursive`.

5. Run your project (`Cmd+R`)



## Example

Check [index.ios.js](https://github.com/maxs15/react-native-screcorder/blob/master/Example/index.ios.js) in the Example folder.



## Properties



#### `config`



Configure the recorder

See below the full options available:

The filters are applied on the saved video



```javascript

{

  autoSetVideoOrientation: false,



  video: {

    enabled: true,

    bitrate: 2000000, // 2Mbit/s

    timescale: 1, // Higher than 1 makes a slow motion, between 0 and 1 makes a timelapse effect

    format: "MPEG4",

    quality: "HighestQuality", // HighestQuality || MediumQuality || LowQuality

    filters: [

      {

        "CIfilter": "CIColorControls",

        "animations": [{

          "name": "inputSaturation",

          "startValue": 100,

          "endValue": 0,

          "startTime": 0,

          "duration": 0.5

        }]

      },

      {"file": "b_filter"},

      {"CIfilter":"CIColorControls", "inputSaturation": 0},

      {"CIfilter":"CIExposureAdjust", "inputEV": 0.7}

    ]

  },

  audio: {

    enabled: true,

    bitrate: 128000, // 128kbit/s

    channelsCount: 1, // Mono output

    format: "MPEG4AAC",

    quality: "HighestQuality" // HighestQuality || MediumQuality || LowQuality

  }

};

```



#### `device`



Values: "front" or "back"

Specify wihich camera to use



#### `flashMode`

Values: "SCFlashModeOff", "SCFlashModeOn", "SCFlashModeAuto", "SCFlashModeLight"

(Access constants as Recorder.constants.SCFlashModeOn, etc...)

SCFlashModeLight is "TorchMode", all others are self explanatory



#### `onNewSegment`



Will call the specified method when a new segment has been recorded



## Component methods



You can access component methods by adding a `ref` (ie. `ref="recorder"`) prop to your `` element, then you can use `this.refs.recorder.record()`, etc. inside your component.



#### `capture(callback)`

Capture a picture



#### `record()`

Start the recording of a new segment



#### `pause()`

Stop the recording of the segment



#### `save(callback)`

Generate a video with the recorded segments, if filters have been specified in the configuration they will be applied



#### `removeLastSegment()`

Remove the last segment



#### `removeAllSegments()`

Remove all the segments



#### `removeSegmentAtIndex(index)`

Remove segment at the specified index