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.