React Native Verto Typescript

Important Update!

This package is depreceated and won't be maintained. Please, use this package react-native-webrtc-audio for further updates.

---

Description

React native package for verto with typescript support. This package is basically constructed upon react-native-verto package and extra features are added to change conference parameters dynamically. Besides this, socket connection and verto views are seperated from each other. At last, package is mostly converted to typecript from pure javascript.

---

Installation

Run below command to install and use React Native Verto Typescript package.
``sh
npm install react-native-verto-typescript
`

This package provides video conferencing over webrtc. Therefore, you must run below command to install react-native-webrtc
`sh
npm install react-native-webrtc
`

Another mandatory package is react-native-background-timer and you must run below command
`sh
npm install react-native-background-timer
`

Usage

$3

Web socket connection can be created through VertoInstanceManager singleton class.

`js
import { VertoInstanceManager } from "react-native-verto-typescript";

const vertoParams = {
webSocket: {
url: '',
login: '',
password: ''
},
deviceParams: {
useMic: 'any',
useCamera: 'any',
useSpeaker: 'any '
}
}

const callbacks = {
onPrivateEvent: (vertoClient: VertoClient, dataParams: VertoParams, userData: ConferenceLiveArray) => {
console.log('[example] onPrivateEvent');
},
onEvent: (vertoClient: VertoClient, dataParams: VertoParams, userData: ConferenceLiveArray) => {
console.log('[example] onEvent');
},
onCallStateChange: (state: any, callId: string) => {
console.log('[example] onCallStateChange state.current.name:', state.current.name, ' - callId:', callId);
},
onInfo: (params: any) => {
console.log('[example] onInfo');
},
onClientReady: (params: any) => {
console.log('[example] onClientReady');
},
onDisplay: (params: any) => {
console.log('[example] onDisplay params:', params);
},
onNewCall: (call: Call) => {
console.log('[example] onNewCall=>', call);
}
};

VertoInstanceManager.createInstance(
vertoParams,
callbacks,
true
)
`

#### \#createInstance
This method automatically create a VertoClient to provide making and answering calls.

`js
VertoInstanceManager.createInstance(
vertoParams,
callbacks,
true
)
`

#### \#connect
Automatically make a connection to websocket if vertoClient instance is created and disconnected.

`js
VertoInstanceManager.connect();
`

#### \#destroy
Destroy existing vertoClient connection to web socket.

`js
VertoInstanceManager.destroy();
`

#### \#getInstance
Get VertoClient instance to manage call operations directly. Created to listen call callbacks from vertoView.

#### \#removeInstanceCallbacks
Remove call callbacks to Created to listen call callbacks from vertoView.

#### \#makeCall
Make a call if vertoClient object is instantiated.

`js
const callParams = {
to: 'CH1SN0S1',
from: '1000',
callerName: 'John Doe',
useVideo: true
}

VertoInstanceManager.makeCall(callParams);
`

#### \#answerCall
Answer an incoming call.

`js
VertoInstanceManager.answerCall(call);
`

#### \#startLocalStream (beta)
Start an existing local stream and attach both microphone and camera to vertoView.

`js
VertoInstanceManager.startLocalStream(callId);
`

#### \#stopLocalStream (beta)
Stop an existing local stream and detach or relase both microphone and camera from vertoView.

`js
VertoInstanceManager.stopLocalStream(callId);
`

#### \#muteLocalAudio
Mute or unmute a local audio track. In other words, close or open a microphone.

`js
/**
* @param callId Id of call to mute/unmute local audio
* @param mute Auido is muted if mute value is true
* @param onMuteResult Result of the operation. True if call audio track is found, otherwise false
*/
VertoInstanceManager.muteLocalAudio(callId, mute, (result: boolean) => {
console.log('[muteLocalAudio] result:', result);
});
`

#### \#muteLocalVideo
Mute or unmute a local video track. In other words, close or open a camera.

`js
/**
* @param callId Id of call to mute/unmute local audio
* @param mute Video is muted if mute value is true
* @param onMuteResult Result of the operation. True if call video track is found, otherwise false
*/
VertoInstanceManager.muteLocalVideo(callId, mute, (result: boolean) => {
console.log('[muteLocalVideo] result:', result);
});
`

#### \#hangUpCall
Hang up any existing call. Look for this link to learn more about cause codes.

`js
/**
* @param call Call to send hangup request
* @param causeCode Reason to end call. If not set, send 'NORMAL_CLEARING' as a default code
*/
VertoInstanceManager.hangUpCall(call, causeCode);
`

#### \#onCallStateChange
Callback to listen states of a call. Callback provides 2 parameters. First one is state of a call and second one is id of a call.

Available states for a call:
* new: State for incoming new call.
* requesting: State for outgoing new call.
* trying: State for trying to establish a call.
* recovering: State for recovering interrupted call on client side.
* ringing: State for call is established and ringing.
* answering: State for call is answering.
* active: State for connection is established and call is active.
* held: State for active call is held by user.
* hangup: State for call is closed by user.
* destroy: State for call is closed and destroyed completely.
* purge: State for call is cleared completely.

#### \#onNewCall
Callback to capture incoming calls. Call is in ringing state.

#### \#onClientReady
Callback is triggered after verto client is instantiated and web socket connection is establised.

#### \#onError
Callback to listen web socket connection errors if any error is occurred.

#### \#onPlayLocalVideo
Callback to listen local media streams after call is establised and has became active. Media streams contain local audio and video tracks (if call is a video call). These tracks can be used to mute/unmute audio or video of local (device) streams.

#### \#onPlayRemoteVideo
Callback to listen remote media streams after call is establised and has became active. Media streams contain remote audio and video tracks (if call is a video call). These tracks can be used to mute/unmute audio or video of remote (incoming) streams.

$3

VertoView component is responsible to maintain both audio and video (if call is video call) streams for ongoing call. Call features can be changed through props directly. Moreover, vertoView provides some callbacks to inform changes about a call media states.

`js

call={call}
viewKey={viewKey}
showLogs={true}
viewType={viewType}
onLogoutClicked={() => {
consoloe.log('Logout clicked!');
}}
isAudioOff={micMute}
isCameraOff={videoMute}
onAudioStateChanged={(item: any) => { }}
onCallHangup={onCallHangup}
onVideoStateChanged={(item: any) => { }}
indicatorColor={'white'}
indicatorVisible={false}
isToolboxVisible={true}
isRemoteAudioOff={false}
cameraFacing={"true"}
remoteStream={remoteStream}
localStream={localStream}
/>

``

#### \#call
In normal conditions, when call is created and vertoView is rendered, call is automatically set to rendered vertoView. Ongoing call can pass to newly created vertoView through call prop.

#### \#viewKey
Differantiate each vertoView components to listen callbacks from VertoInstanceManager.

#### \#showLogs
Show logs in debug mode.

#### \#viewType
Property to render call ui for local stream, remote stream or both.

* local: shows only local camera view on vertoView
* remote: shows only remote camera view on vertoView
* both: shows remote camera view as a full screen and local camera view as a small screen

#### \#isAudioOff
Property to mute/unmute microphone.

#### \#isCameraOff
Property to close/open camera.

#### \#indicatorVisible
Property to show indicator before connecting any call.

#### \#indicatorColor
Property to change indicator color if it is visible

#### \#isToolboxVisible
Show/Hide toolbox component. Toolbox component contains Mute/Unmute Microphone, Hang up Call and Open/Close Camera buttons.

#### \#isRemoteAudioOff
Mute/Unmute audio of remote stream.

#### \#cameraFacing
Switch camera between rear (environment) and front (user). Currently, this property cannot provides selection of a camera. It only provides switching between cameras. Default camera is front if not changed to rear before.

#### \#remoteStream
Assign remote stream to vertoView from an existing call.

#### \#localStream
Assign local stream to vertoView from an existing call.

#### \#isCallScreenVisible
Property to show dial screen for demo purposes.

#### \#onLogoutClicked
Callback to logout from an existing vertoClient connection. It's added only for demo purposes.

#### \#onAudioStateChanged
Callback to provide local audio mute/unmute changes.

#### \#onRemoteAudioStateChanged
Callback to provide remote audio mute/unmute changes.

#### \#onVideoStateChanged
Callback to provide local video mute/unmute changes.

#### \#onCallHangup
Callback to provide hang up call state. This state normally provided by VertoInstanceManager with onCallStateChange callback.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT