react-native-calling

Getting started

$ npm install react-native-calling --save

Required packages install

$ npm install native-base uuid react-native-incall-manager react-native-webrtc react-native-websocket --save

1.) In android/app/src/main/AndroidManifest.xml add these permissions

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>

<uses-permission android:name="android.permission.ACCESS_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.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Usage

App.js only use

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { InitMedia, signalingConnection, LoginCall, Online, WebSoket, Call } from "react-native-calling";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            localVideo: null,
            clientID: null,
            username: null,
        };
    }

    async componentDidMount() {
        let localVideo = await InitMedia("< webSocketURL >", false);
        this.setState({
            localVideo: localVideo
        });
        this.setState({
            loading: false
        });
        signalingConnection.addMsgListener(this.onSignalingMessage);
    }
    onSignalingMessage = async (msg) => {
        switch (msg.type) {
            case "id":
                // server connecting successful thin server id (this is unique)
                this.setState({
                    clientID: msg.id
                });
                break;
        }
    }

  render() {
      if (this.state.loading) {
            return (
                <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                    <Text>loading....</Text>
                </View>
            )
        }
    return (
        <>
        <Call
            localStream={this.state.localVideo}
            signalingConnection={signalingConnection}
            clientID={this.state.clientID}
            username={"your App user username (unique)"}
        />
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>your code only use Call component</Text>
        </View>
      </>
    );
  }
}

online userlist live

import { signalingConnection } from "react-native-calling";

signalingConnection.addMsgListener(this.onSignalingMessage);

export default class LiveUserLise extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            userList: []
        };
    }

    async componentDidMount() {
        signalingConnection.addMsgListener(this.onSignalingMessage);
    }

    onSignalingMessage = async (msg) => {
        switch (msg.type) {
            case "userlist": // Received an updated user list
                this.setState({
                    userList: msg.userfull
                });
                break;
        }
    }
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Your code</Text>
            </View>
        )
    }
}

online userlist get

import { Online } from "react-native-calling";

await Online(); // user this function 

call button

import { LoginCall } from "react-native-calling";

await LoginCall("youer user name ", "call user username");