• Stars
    star
    121
  • Rank 284,849 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Usage of WebRTC for voice & video call with peer-to-peer or conference with Login and Register screen using response & Async storage with Call Dis/Connect, Failed and Idle views in react native. Youtube:

RNVideoVoiceCall

RNVideoVoiceCall is the 4th session build for showing the implementation of Signin and Signup screen to login or create user for voice call along with video call for both peer to peer or conference using Voximplant for react native.

In this main branch, we will be focusing on UserSide branch from which certain properties to be upgraded which can be referred here:

https://github.com/aryaminus/RN-voice-video-call/tree/UserView

RNVideoVoiceCall demo

The main GUI is working as expected where the user after logging in is given a text field to enter the caller user id with toogle option to Peer-to-peer and Video toogle which when true shows the Remote View and Self View. On pressing Call icon the receiver get option to accept or reject the call and then on accept the user and receiver is shown option to toogle speaker, video, mute, keypad & hang-up. On Call fail and reject, alert is shown to the user.

The Backend part can be refered here:

https://github.com/aryaminus/RN-voice-video-call/tree/HttpApiSetup

RNVideoVoiceCall demo

Todos

  • Fullscreen RemoteView for VideoCall
  • Integrating Messaging and other Delegate Protocol
  • Hiding the main account credentials in Register.js
  • Navigation to Boiler only after the SDK Login is complete from server

PRs are always welcome

Note:

  1. The response's JSON maybe required to be stringified, so make sure you use it when formatting
  2. As the react-native-voximplant package sends responses as the state of the account is changed, we use DeviceEventEmitter for listening and changing certain variables
  3. The icons are setup as createIconSet, you can change it by change the FontFamily in android/app/src/main/assets/fonts and custom.ttf
  4. Further layout can be changed within Stylesheet if your device is not rendering the view properly

Next, we store the login values or the new user create values locally using Async Storage and then use it next time the user opens the app so that s/he does not have to login each time the app is opened.

We will be using HTTPAPI of Voximplant.

Note:

  1. Arch Linux with VS-Code, thus support focused on Android App
  2. Extensions: React Native Tools , React-Native Snippets , Prettier
  3. Device run instead of SDK-build using Vysor
  4. Remove/Add Comment of the required system in Register.js : Create new Application and fetch application_id and assign user to it or assign user to all applications. Default is assign all where you may once create and fetch app_id and then put the app_id in place of all. Refer to Video Session

Installation

Clone the source locally:

$ git clone https://github.com/aryaminus/RN-voice-video-call/
$ cd RN-voice-video-call

Start the application in development mode

npm install
react-native link
react-native run-android

or for VS-Code:

npm install
react-native link

then press F1 or Fn+F1 and React Native:Run Android on Device

Else Follow Code.txt and Youtube

Packages:

  1. react-navigation
  2. react-native-voximplant
  3. react-native-loading-spinner-overlay
  4. react-native-vector-icons
  5. react-native-button
  6. react-addons-update

Additional Links:

  1. VoxImplantDelegate
  2. HTTP API
  3. Control Panel
  4. Voximplant official demo app

Installation

Follow Code.txt, Manual.md and UserViewWorking.png and ServerWorking.png(inside /app/images)

Working demo

Contributing

  1. Fork it (https://github.com/aryaminus/RN-voice-video-call/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

More Repositories

1

RN-firechat

FIrebase backend chat / messaging app (Chat Room + Personal i.e one to one ) with push notification in react native with user sign in/up for personal and anonymous for Global Chat with pusing user to Friendlist for the user to choose friend to chat with. Youtube:
JavaScript
79
star
2

memento

Organize your meme image cluster in a better format using OCR from the meme to sort them using tesseract along with editing memes by segmenting them using OpenCV within a directory
Python
72
star
3

dev-movies

Movies and Series I've loved over the years, for the people with software development background, IT Engineers or general people who love movies
69
star
4

saram

Get OCR in txt form from an image or pdf extension supporting multiple files from directory using pytesseract with auto rotation for wrong orientation. PYPI:
Python
51
star
5

RN-login-register-screen

Usage of login / sign-in screen with register / sign-up and forget password screen for authentication in react-native with navigation and Async local storage of input values
JavaScript
33
star
6

RN-intro-screen

Usage of intro / welcome screen in react-native as onboarding slider swiper
JavaScript
15
star
7

tomodachi

Basic Contacts manager with React and React Native as clients serving Node over Express Backend deployed to Heroku with Postgres as database
JavaScript
12
star
8

srijana

A C++ and Opengl based game to draw a window leading to snake which runs on neural network to reach it's food within certain iteration for AI along with Keyboard press to move the Snake quads. Youtube:
C++
9
star
9

RN-firechat-functions

Serverless functions for push notification configuration of Rn-firechat for cloud messaging with subscription to database child 'chat' and then checking for the uid in 'friend' database to forward the push notification to the device token of receiver
JavaScript
4
star
10

RN-splash-screen

Usage of splash screen / loading screen in react-native using custom size layout by Apetools
Objective-C
2
star
11

react-native-opencv-tutorial

Fully working example of the OpenCV library used together with React Native
Java
1
star