React Native Verto Typescript

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.

npm install react-native-verto-ts

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

npm install react-native-webrtc

Another mandatory package is react-native-background-timer and you must run below command

npm install react-native-background-timer

Usage

VertoInstanceManager

Web socket connection can be created through VertoInstanceManager singleton class.

import { VertoInstanceManager } from "react-native-verto-ts";

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.

VertoInstanceManager.createInstance(
    vertoParams,
    callbacks,
    true
)

#connect

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

VertoInstanceManager.connect();

#destroy

Destroy existing vertoClient connection to web socket.

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.

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

VertoInstanceManager.makeCall(callParams);

#answerCall

Answer an incoming call.

VertoInstanceManager.answerCall(call);

#startLocalStream (beta)

Start an existing local stream and attach both microphone and camera to vertoView.

VertoInstanceManager.startLocalStream(callId);

#stopLocalStream (beta)

Stop an existing local stream and detach or relase both microphone and camera from vertoView.

VertoInstanceManager.stopLocalStream(callId);

#muteLocalAudio

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

/**
* @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.

/**
* @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.

/**
* @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.

VertoView

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.

<View style={styles.container}>
    <VertoView
        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}
    />
</View>

#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