@veyetals/react-vitals-online NPM

react-vitals-online

Made with create-react-library

Install

npm install @veyetals/react-vitals-online

Usage

username: username to authenticate user.

password: password to authenticate user.

channelName: Required* Create Channel to connect to for video and veyetals scanning. Maximum length: 128 characters. May include numbers, letters, underscores (_), and hyphens (-).

application: ie. 'veyetals'

platform: ie. 'ios'

environment: ie. 'prd' / 'stg'

userType: either 'master' or 'viewer.

mode: either 'video' or 'audio.

onCallEnd: Function to be called when user ends call.

onVitalsCompleted: Function to be called when veyetals is completed.

useWebSocket

isConnected: indicates connection to socket - true or false

connect: function to connect to socket *connection limit: 2 hrs

Arguments: userId

callUser: function to send info needed for a call

Arguments: userId, recipientId, channelName, mode

answerCall: function to notify caller of answer

Arguments: callerId, callerConnectionId, userId, answer

socketMessage: messages from socket

function	user	description	socketMessage
callUser	caller	recipient is not in db	{ status: 'callFailed', message: "recipientId not found" }
callUser	caller	recipient is offline	{ status: 'callFailed', message: "recipientId is offline" }
callUser	recipient	recipient receives caller info	{ status: 'callIncoming', callerId: 'callerId', callerConnectionId: 'callerConnectionId', channelName: 'channelName', mode: 'mode' }
answerCall	recipient	caller is offline	{ status: 'answerFailed', message: "recipientId is offline" }
answerCall	caller	caller receives answer from callee	{ status: "answerToCall", recipientId: 'recipientId', answer: true \ false }

Example

import React, { useState } from 'react'

import { VitalsOnline, useWebSocket } from '@veyetals/react-vitals-online'

import '@veyetals/react-vitals-online/dist/index.css'

export default function App() {
  const {
    isConnected,
    socketMessage,
    connect,
    disconnect,
    callUser,
    answerCall
  } = useWebSocket()

  const [active, setActive] = useState(false)

  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [channelName, setChannelName] = useState('testChannel')
  const [userType, setUserType] = useState('master')
  const [mode, setMode] = useState('video')

  const [callerId, setCallerId] = useState('')
  const [recipientId, setRecipientId] = useState('')
  const [callerConnectionId, setCallerConnectionId] = useState('')
  const [callAnswer, setCallAnswer] = useState('')

  const startMaster = () => {
    setUserType('master')
    setActive(true)
  }

  const startViewer = () => {
    setUserType('viewer')
    setActive(true)
  }

  // Callback function to receive the final reading from the component
  const handleVitalsCompleted = (vitals) => {
    console.log(vitals)
  }

  // Callback function for message from mobile call
  const handleOnMobileCall = (resp) => {
    console.log('handleOnMobileCall: ', resp)
  }

  useEffect(() => {
    console.log('socketMessage: ', socketMessage)
  }, [socketMessage])

  return (
    <div>
      <span>isConnected: {isConnected.toString()}</span>
      <button onClick={() => connect(username)}>Connect</button>
      <label>
        recipientId:
        <input
          type='text'
          value={recipientId}
          onChange={(e) => setRecipientId(e.target.value)}
        />
      </label>
      <button
        onClick={() => callUser(username, recipientId, channelName, mode)}
      >
        Call
      </button>
      <label>
        callerId:
        <input
          type='text'
          value={callerId}
          onChange={(e) => setCallerId(e.target.value)}
        />
      </label>
      <label>
        callerConnectionId:
        <input
          type='text'
          value={callerConnectionId}
          onChange={(e) => setCallerConnectionId(e.target.value)}
        />
      </label>
      <label>
        callAnswer:
        <input
          type='text'
          value={callAnswer}
          onChange={(e) => setCallAnswer(e.target.value)}
        />
      </label>
      <button
        onClick={() =>
          answerCall(callerId, callerConnectionId, username, callAnswer)
        }
      >
        answerCall
      </button>
      <button onClick={startMaster}>startMaster</button>;
      <button onClick={startViewer}>startViewer</button>;
      {active && (
        <VitalsOnline
          username={username}
          password={password}
          channelName={channelName}
          application={application}
          platform={platform}
          environment={environment}
          userType={userType}
          mode={mode}
          onCallEnd={() => setActive(false)}
          onMobileCall={handleOnMobileCall}
          onVitalsCompleted={handleVitalsCompleted}
        />
      )}
    </div>
  )
}