react-native-calling/README.md

React Native webrtc Audio calling package

# react-native-calling
![npm](https://img.shields.io/npm/dt/react-native-calling?style=flat-square)   ![NPM](https://img.shields.io/npm/l/react-native-calling?style=flat-square)   ![npm](https://img.shields.io/npm/v/react-native-calling?style=flat-square)   ![npm collaborators](https://img.shields.io/npm/collaborators/react-native-calling?style=flat-square)   ![Dependents (via libraries.io)](https://img.shields.io/librariesio/dependents/npm/react-native-calling?style=flat-square)

## 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

```javascript
<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 
```javascript
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

```javascript
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

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

await Online(); // user this function 
```

### call button 

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

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


```