react-native-screcorder
v0.1.4
Published
A Video recorder component for react-native
Downloads
26
Maintainers
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.
Getting started
npm install react-native-screcorder@latest --save
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-screcorder
and addRNRecorder.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNRecorder.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Click
RNRecorder.xcodeproj
in the project navigator and go theBuild Settings
tab. Make sure 'All' is toggled on (instead of 'Basic'). Look forHeader Search Paths
and make sure it contains both$(SRCROOT)/../react-native/React
and$(SRCROOT)/../../React
- mark both asrecursive
. - Run your project (
Cmd+R
)
Example
Check 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
{
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 <Recorder>
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