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>
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
Installation: https://docs.livekit.io/reference/components/react/
React Components: https://docs.livekit.io/reference/components/react/
For faster local development, you can use yalc
package to
link this library with another local project.
SDK can be used in two ways:
- use hooks to create 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>
);
}
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 tofalse
, the hook will not subscribe to call-related events. -
authParams
(Object): Authorization parameters.
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 itsid
,title
, and a list ofusers
. -
chatsList
(array): An array of user chats. -
chat
(array): Сhat received fromgetChat
. -
createdChat
(object): Сhat received fromcreateChat
. -
modifiedChat
(object): Сhat received frommodifyChat
. -
messages
(array): An array of messages in the current chat. Each message includes details likechatId
,text
, andattachments
. -
currentUserId
(string): The ID of the current user. -
room
(object): Information about the call room, including itschatId
anduserId
. -
calling
(boolean): Indicates whether a call is currently in progress. -
activeCall
(object): Details about the active call, including itschatId
anduserId
. -
incomingCall
(object): Details about an incoming call, including itschatId
anduserId
. -
chatVisible
(boolean): Indicates whether the chat interface is currently visible. -
error
(object): An error message with atitle
andmessage
. 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 specifiedchatId
and an optionalvideo
flag to indicate video calling. -
acceptCall
(function): It acceptschatId
, Accepts an incoming call. -
declineCall
(function): It acceptschatId
, Declines an incoming call. -
sendNotification
(function): Sends a notification to a specific user. -
sendMessage
(function): Sends a message to the chat. It acceptstext
and an optionalfile
for attachments and an optionaltype
. -
loadMessages
(function): Loads messages in the chat, with an optionalbeforeId
and amessageСontain
for message retrieval. -
getMessages
async (function): Loads messages by thechatId
, with an optionalbeforeId
,limit
and amessageС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 optionaltitle
,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 specifiedid
andname
. 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 bychatId
.