@integraciones_doc24/meeting-react-native v0.32.0
@integraciones_doc24/meeting-react-native
React Native library for meeting with Doc24 professionals on Android and iOS
Installation
npm i @integraciones_doc24/meeting-react-native
Then, follow the installation intructions of the opentok-react-native library, skipping the installation of the opentok-react-native
npm module.
Usage
This library exposes a component Doc24MeetingCall
and a hook useDoc24NativeMeeting
useDoc24NativeMeeting
takes one parameter of type BaseDoc24MeetingProps
and returns an object of type MeetingStatus
type BaseDoc24MeetingProps = {
// The vcToken you should have gotten through the sdk
vcToken: string;
// The url of the public api of doc24
serverUrl: string;
// Callbacks
onEndCall?: () => void;
onAnsweredCall?: (parameters: TokBoxParameters) => void;
onHoldCall?: () => void;
onResumeCall?: (parameters: TokBoxParameters) => void;
onError?: (error: unknown) => void;
}
type MeetingStatus =
| {type: 'ended'}
| {type: 'canceled'}
| {type: 'waiting'}
| {type: 'onHold'}
| {type: 'error'}
| {
type: 'active';
helpers: MeetingHelpers;
session: OTSession;
parameters?: TokBoxParameters
};
type MeetingHelpers = {
endCall: () => Promise<void>;
}
When the professional answers the call, useDoc24NativeMeeting
returns an object with the property type === 'active'
and two other properties.
One of those properties, session
, should be passed as props to Doc24MeetingCall
. The other one, helpers
has one method that can be used to end the call.
Example
export const CallComponent = (props: CallComponentProps) => {
const status = useDoc24NativeMeeting({
serverUrl: "https://tapiaws.doc24.com.ar/ws",
vcToken: props.vcToken,
onEndCall: () => {
// Go to post-call page
props.onEndCall()
},
});
if (status.type === "waiting")
return <Text>Waiting for the professional to answer the call</Text>;
if (status.type === "onHold")
return <Text>The professional has put you on hold</Text>;
if (status.type === "canceled")
return <Text>The professional canceled your meeting</Text>;
if (status.type === "ended" || status.type === 'error') return null;
const buttons = (
<View
style={{
width: '100%',
height: '100%',
padding: 16,
justifyContent: 'flex-end',
}}>
<View style={{width: '100%', height: 50, justifyContent: 'space-around'}}>
<Button
title="End call"
onPress={() => status.helpers.endCall()}
/>
</View>
</View>
);
return (
<Doc24MeetingCall
session={status.session}
overlay={buttons}
/>
);
};
Doc24MeetingCall props
// The session, you should get this from `useDoc24NativeMeeting`
session: OTSession
// A component that takes the full space of the component on top of it, usefull for showing buttons or information
overlay: JSX.Element;
// Component to show while loading
loading?: JSX.Element
// Which camera to use
cameraPosition?: 'front' | 'back';
// Disable publishers mic
disableMic?: boolean;
// Disable publishers camera
disableCamera?: boolean;
// Stylize the publisher (patient) video component. It will clear default style, so you'll need to set zIndex, position, etc.
publisherStyle?: StyleProp<ViewStyle>;
// Stylize the subscriber (doctor) video component. It will clear default style, so you'll need to set zIndex, position, etc.
subscriberStyle?: StyleProp<ViewStyle>;
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago