@integraciones_doc24/meeting-react-dom

React Web library for meeting with Doc24 professionals on the web

Installation

npm i @integraciones_doc24/meeting-react-dom

Then include opentok.js before your application

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

Usage

This library exposes a component Doc24MeetingCall and a hook useDoc24WebMeeting

useDoc24WebMeeting 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;
        streams: Stream[]
      };

  type MeetingHelpers = {
    endCall: () => Promise<void>;
  }

When the professional answers the call, useDoc24WebMeeting returns an object with the property type === 'active' and three other properties. Two of those properties, session and streams, 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 = useDoc24WebMeeting({
    serverUrl: "https://tapiaws.doc24.com.ar/ws",
    vcToken: props.vcToken,
    onEndCall: () => {
      // Go to post-call page
      props.onEndCall()
    },
  });

  if (status.type === "waiting")
    return <div>Waiting for the professional to answer the call</div>;

  if (status.type === "onHold")
    return <div>The professional has put you on hold</div>;

  if (status.type === "canceled")
    return <div>The professional canceled your meeting</div>;

  if (status.type === "ended" || status.type === 'error') return null;


  const buttons = (
    <div
      style={{
        display: 'flex',
        width: '100%',
        height: '100%',
        padding: '5%',
        justifyContent: 'flex-end',
      }}>
      <div style={{width: '100%', height: 50, justifyContent: 'space-around'}}>
        <Button onClick={() => status.helpers.endCall()}>
          End call
        </Button>
      </div>
    </div>
  );

  return (
    <Doc24MeetingCall
      session={status.session}
      streams={status.streams}
      overlay={buttons}
    />
  );
};

Doc24MeetingCall props

    // The session, you should get this from `useDoc24WebMeeting`
    session: OTSession
    // The streams, you should get this from `useDoc24WebMeeting`
    streams: Stream[]

    // Stylize the publisher (patient) video component. It will clear default style, so you'll need to set zIndex, position, etc. 
    publisherStyle?: React.CSSProperties;
    // Stylize the subscriber (doctor) video component. It will clear default style, so you'll need to set zIndex, position, etc. 
    subscriberStyle?: React.CSSProperties;
    // Set the videoSource to be sent
    videoSource?: MediaStreamTrack;
    // Set the audioSource to be sent
    audioSource?: MediaStreamTrack;
    // Component to show while loading
    loading?: JSX.Element
    // Disable publishers mic
    disableMic?: boolean;
    // Disable publishers camera
    disableCamera?: boolean;
    // A component that takes the full space of the component on top of it, usefull for showing buttons or information
    overlay: JSX.Element;