@brownbutton/react-native-hippo-video v1.0.1

Hippo Video SDK Documentation

react-native-hippo-video

A react native component that lets you integrate Hippo Video SDK into your app

Documentation

Installation

$ npm install 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 react-native-ffmpeg react-native-fs @react-native-async-storage/async-storage

**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)

react-native-video

**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:

target 'yourTargetName' do
# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',# Include this for RN >= 0.47'DevSupport',# Include this to enable In-App Devmenu if RN >= 0.43'RCTText',
    'RCTNetwork',
    'RCTWebSocket',# Needed for debugging'RCTAnimation',# Needed for FlatList and animations running on native UI thread# Add any other subspecs you want to use in your project
  ]

# Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

# Third party deps podspec link
  pod 'react-native-camera', path: '../node_modules/react-native-camera'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  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)

react-native-video

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"/>

Insert the following lines in android/app/build.gradle:

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 'react-native-hippo-video';

...

return (
    <View>
      <HippoVideoRecorder 
        api-key={"API_KEY"} 
        email={"USER_EMAIL"} />
      }
    </View>
  );
};

Props

• email (required)
• api-key (required)

Events

• recordInitiated
• recordStarted
• recordPaused
• recordResumed
• recordStopped
• recordAborted
• recordError
• videoCancelled
• videoSubmitted
• uploadedVideoDetails