@hippovideo/react-native-hippo-video NPM

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

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 from '@hippovideo/react-native-hippo-video';

...

return (
    <View>
      <HippoVideoRecorder 
        api-key={"API_KEY"} 
        email={"USER_EMAIL"} 
        //this will open the player
        showPlayer={true}/>
    </View>
  );
};