Hippo Video SDK Documentation
react-native-hippo-video
A react native component that lets you integrate Hippo Video SDK into your app
Note: Package currently supports React Native 0.68 and below
Documentation
Installation
$ npm install @hippovideo/react-native-hippo-video --save
There are more additional steps needed to fulfil the dependencies of the react-native-hippo-video sdk.
$ npm install react-native-camera react-native-video react-native-background-upload react-native-device-info react-native-document-picker ffmpeg-kit-react-native react-native-fs @react-native-async-storage/async-storage react-native-svg react-native-webview react-native-keep-awake react-native-video-editor react-native-linear-gradient
iOS installation
React Native 0.60 and above
Run npx pod-install
. Linking is not required in React Native 0.60 and above.
React Native 0.59 and below
Run react-native link LIBRARY_NAME
to link the library.(For more information Follow the instructions of the respective libraries)
iOS - other required steps
Add Permissions to info.plist
<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
You might need to adjust your Podfile following the example below:
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '13.0'
target 'testapp' do
### Add this line for ffmpeg ###
pod 'ffmpeg-kit-react-native', :subspecs => ['full-lts'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'
### Add this line for ffmpeg ###
### Add this line for linear gradient ###
pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
### Add this line for linear gradient ###
### Add this line for camera ###
pod 'react-native-camera', path: '../node_modules/react-native-camera'
### Add this line for camera ###
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
target 'testappTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
Android installation
React Native 0.60 and above
Run npx pod-install
. Linking is not required in React Native 0.60 and above.
React Native 0.59 and below
Run react-native link LIBRARY_NAME
to link the library or make manual linking (For more information Follow the instructions of the respective libraries)
Android - other required steps
Add permissions to your app android/app/src/main/AndroidManifest.xml
file:
<!-- Required -->
<uses-permission android:name="android.permission.CAMERA" />
<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
android/app/build.gradle
:
Insert the following lines in android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general'// <--- insert this line
}
}
Make sure you have jitpack added in android/build.gradle
allprojects {
repositories {
maven { url "https://www.jitpack.io" }
maven { url "https://maven.google.com" }
}
}
Usage
import HippoVideoRecorder from '@hippovideo/react-native-hippo-video';
...
return (
<View>
<HippoVideoRecorder
api-key={"API_KEY"}
email={"USER_EMAIL"}
//this will open the player
showPlayer={true}/>
</View>
);
};
Props
-
email (required)
-
api-key (required)
-
showPlayer (required)
-
recordInitiated
-
recordStarted
-
recordPaused
-
recordResumed
-
recordStopped
-
recordAborted
-
recordError
-
videoCancelled
-
videoSubmitted
-
uploadedVideoDetails