Avc-sdk-react NPM

avc-sdk-react

Before install

Before using this library, you must publish it into your package registry, for example into gitlab or jfrog.

Then update ~/.npmrc file, to be able to install it later:

@nites:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=<token>

Build library

In order to build a library, run the following commands:

yarn build

It will produce a dist folder with all components and primitives.

To publish the library, run the command:

yarn publish

Documentation for connecting calls from livekit/components-react

Installation: https://docs.livekit.io/reference/components/react/

React Components: https://docs.livekit.io/reference/components/react/

FAQ: https://docs.livekit.io/reference/components/react/faq/

Local development

For faster local development, you can use yalc package to link this library with another local project.

API

SDK can be used in two ways:

use hooks to create custom UI

Using hooks to build custom UI:

import { useState } from 'react';
import { useVideoChat } from 'avc-sdk-react';

function CustomVideoChat() {
  const chatId = '...'; // Id of the chat to enter
  const token = '...'; // JWT token of the user
  const url = 'https://...'; // HTTPS url to video-chat app backend
  const acceptCalls = true; // Enable video/audio calls
  const authParams = { // Authorization parameters
        langCode: 'en',
        firebaseToken: 'test',
        deviceType: 2
  }

  const [ text, setText ] = useState('');
  const vc = useVideoChat({
    chatId,
    token,
    url,
    acceptCalls,
    authParams
  });

  return (
    <div>
      {vc.chat.title}

      <div>
        {vc.messages.map(message => (
          <p key={message.id}>{messate.text}</p>
        ))}
      </div>

      <input onInput={e => setText(e.target.value)}/>
      <button onClick={() => vc.sendMessage(text)}>
        Send Message
      </button>
    </div>
  );
}

Hook Parameters

The useVideoChat hook accepts the following input parameters:

url (string): The URL for the socket connection.
token (string): The authentication token for the socket connection.
chatId (string): The unique identifier for the chat or conversation you want to associate with the video chat functionality.
acceptCalls (boolean, optional, default: true): A flag to indicate whether the application should accept incoming calls. If set to false, the hook will not subscribe to call-related events.
authParams (Object): Authorization parameters.

Hook Returned Fields

The useVideoChat hook returns an object with the following fields and functions:

socket (object): Socket object
online (boolean): Indicates whether the user is currently online.
user (object): Information about the connected user.
currentChat (object): Information about the current chat, including its id, title, and a list of users.
chatsList (array): An array of user chats.
chat (array): Сhat received from getChat.
createdChat (object): Сhat received from createChat.
modifiedChat (object): Сhat received from modifyChat.
messages (array): An array of messages in the current chat. Each message includes details like chatId, text, and attachments.
currentUserId (string): The ID of the current user.
room (object): Information about the call room, including its chatId and userId.
calling (boolean): Indicates whether a call is currently in progress.
activeCall (object): Details about the active call, including its chatId and userId.
incomingCall (object): Details about an incoming call, including its chatId and userId.
chatVisible (boolean): Indicates whether the chat interface is currently visible.
error (object): An error message with a title and message. This can be used to display global errors in the UI.
filesDownloadProgress (object): A dictionary that tracks the download progress of files in the chat.
toggleChat (function): A function to toggle the chat interface's visibility.
startCall (function): Initiates a call with the specified chatId and an optional video flag to indicate video calling.
acceptCall (function): It accepts chatId, Accepts an incoming call.
declineCall (function): It accepts chatId, Declines an incoming call.
sendNotification (function): Sends a notification to a specific user.
sendMessage (function): Sends a message to the chat. It accepts text and an optional file for attachments and an optional type.
loadMessages (function): Loads messages in the chat, with an optional beforeId and a messageСontain for message retrieval.
getMessages async (function): Loads messages by the chatId, with an optional beforeId, limit and a messageСontain. Returns the requested messages

interface GetMessagesOptions {
  chatId: string;
  limit?: number;
  beforeId?: string;
  messageСontain?: string;
}

const getMessages: (options: GetMessagesOptions) => Promise<Message[]>

getChats async (function): Load all available chats for current user, with an optional title, contactPermission, usersType, connectionType, chatType, limit, skip. Returns the requested chats.

interface GetChats {
  skip?: number;
  limit?: number;
  title?: string;
  contactPermission?: boolean;
  usersType?: number;
  connectionType?: number;
  chatType?: number;
}

const getChats: (options?: GetChats) => Promise<Chat[]>

downloadFile (function): Downloads a file with the specified id and name. This function checks if the file is available and ready for download.
leaveCall (function): Leaves an ongoing call.
createChat (function): Create a new chat.
modifyChat (function): Modify a chat.
getChat (function): Load chat by chatId.