videoIQ-react-native
Getting started
Pre-Requisites:
Install node.js
Install and update Xcode (you will need a Mac)
React Native iOS installation instructions
Install and update Android Studio
- React Native Android installation instructions
Installation:
$ npm install videoIQ-react-native --save
Mostly automatic installation
$ react-native link videoIQ-react-native
iOS Installation
Note: Please make sure to have CocoaPods on your computer.
If you've installed this package before, you may need to edit your Podfile and project structure because the installation process has changed.
In you terminal, change into the
iosdirectory of your React Native project.Create a pod file by running:
pod init.Add the following to your pod file:
target '<YourProjectName>' do
# Pods for <YourProject>
pod 'VideoIQiOS'
pod 'Socket.IO-Client-Swift', '~> 15.0.0'
endIn case if you want Autolinking then don't do step 3. Add following in podfile: ... pod 'videoIQ-react-native', :path => '../node_modules/videoIQ-react-native/ios/RNvideoIQRtc.podspec' ...
Now run,
pod installAfter installing the VideoIQiOS SDK, change into your root directory of your project.
Now run,
react-native link videoIQ-react-native.Open
<YourProjectName>.xcworkspacecontents in XCode. This file can be found in theiosfolder of your React Native project.Click
FileandNew FileAdd an empty swift file to your project:
You can name this file anything i.e:
videoIQInstall.swift. This is done to set some flags in XCode so the Swift code can be used.Click
Create Bridging Headerwhen you're prompted with the following modal:Would you like to configure an Objective-C bridging header?Ensure you have enabled both camera and microphone usage by adding the following entries to your
Info.plistfile:
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera 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>If you try to archive the app and it fails, please do the following:
- Go to Target
- Click on Build Phases
- Under the Link Binary With Libraries section, remove the libvideoIQ.a and add it again
Android Installation
- Open up
android/app/src/main/java/[...]/MainActivity.java- Add
import com.rnvideoIQ.videoIQRtcPackage;to the imports at the top of the file - Add
new videoIQRtcPackage()to the list returned by thegetPackages()method
- Add
- Append the following lines to
android/settings.gradle:include 'videoIQ-react-native' project(':videoIQ-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/videoIQ-react-native/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':videoIQ-react-native') Add following permisions in Android Manifest file:
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.BLUETOOTH" /> <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
Usage
import Enx from 'videoIQ-react-native';
// TODO: What to do with the module?
Enx;Extra Notes
Check ExtraNotes file in case of any issue.