\n);\n\nexport default App;\n```\n\n**`useCallEvents()`**\n\n**Returns**\n\n - `events` - An object having event information\n\t - `event` - The event that was fired from Agora. (For eg. `user-joined`, `user-left`, etc.)\n\t - `data` - This consist of event specific data object . For eg. If the `user-joined` event is received, `data` will contain a `remoteUser` key which will have the user object connected to the call.\n\n**These events should be used to control the UI for showing all the users in the call, volume levels, control video feed for each user, etc. Check the example mentioned above.**\n\n---\n**3. Join the channel to start the call**\n\n```jsx\nimport React, {useEffect, useState} from 'react';\nimport {useCallEvents, useJoinCall} from '@agnostech/react-agora-ng';\n\nconst App = () => {\n\t\n\t//register event listeners\n\tconst {events} = useCallEvents();\n\t\n\t//array of users in this call\n\tconst [users, setUsers] = useState([]);\n\t\n\t// join the call\n\tconst {loading, error, localUserId} = useJoinCall({\n\t\tchannel: 'lmpvc', \n\t\tuserId: null, \n\t\ttoken: null, \n\t\tlocalVideoDiv: 'test'\n\t});\n\t\n\tuseEffect(() => { \n\t switch (events.event) { \n\t\t case \"user-joined\": \n\t\t\t console.log(\"user joined\");\n\t\t\t setUsers(users => [...users, events.data.remoteUser]);\n\t\t\t break; \n\t\t case \"user-published\":\n\t\t\t console.log(\"user published\");\n\t\t\t break; \n\t\t case \"user-unpublished\": \n\t\t\t console.log(\"user unpublished\"); \n\t\t\t break; \n\t\t case \"user-left\": \n\t\t\t console.log('user left'); \n\t\t\t setUsers(users => { \n\t\t\t\t const user = events.data.remoteUser; \n\t\t\t\t return users.filter(oldUser => oldUser.uid !== user.uid); \n\t\t\t });\n\t\t\t break;\n\t\t // check Agora docs for all the supported evebts.\n\t\t} \n }, [events, setUsers])\n}\n\nreturn ( \n
\n\t // this div will be used by Agora to appent the local user video\n\t \n\t\t
\n);\n\nexport default App;\n```\nCalling `useJoinCall()` will \n\n - connect the local user to the mentioned channel\n - ask the user for video and audio permissions\n - publish audio and video tracks on the channel\n - On successful connection, it returns the `uid` of the connected local user as `localUserId`, sets `loading` as `false` or returns an `error` if there was an issue in the process.\n \n **`useJoinCall({channel, token, userId, localVideoDiv})`**\n \n **Parameters:**\n \n - `channel (required)` - channel name of the call\n - `token` - required if authentication is enabled.\n - `userId` - A unique id for the current user. If sent as `null`, Agora will generate a unique `uid` for this user.\n - `localVideoDiv (required)` - The `id` string of the local div to show the local user's video feed in the UI.\n\n**Returns**\n\n - `loading` - This represents the connection status. It is `true` by default. Once the connection is established, it becomes `false`. You can use this parameter to show a different UI before the connection is established.\n - `localUserId` - The `uid` of the local user connected on the call.\n - `error` - If there is any error during the call joining process, it can be checked here.\n---\n\n**4. You can call `useCallControls` to toggle audio/video, leaving a meeting or start sharing your screen**\n\n```jsx\nimport React, {useEffect} from 'react';\nimport {useCallEvents, useJoinCall, useCallControls} from '@agnostech/react-agora-ng';\n\nconst App = () => {\n\t\n\t//register event listeners\n\tconst {events} = useCallEvents();\n\t\n\t// join the call\n\tconst {loading, error, localUserId} = useJoinCall({\n\t\tchannel: 'lmpvc', \n\t\tuserId: null, \n\t\ttoken: null, \n\t\tlocalVideoDiv: 'test'\n\t});\n\t\n\t//get the call controlls\n\tconst { toggleVideo, \n\t\t\ttoggleAudio, \n\t\t\tleave, \n\t\t\tstartScreenShare, \n\t\t\tstopScreenShare\n\t\t } = useCallControls();\n\t\n\tuseEffect(() => { \n\t switch (events.event) { \n\t\t case \"user-joined\": \n\t\t\t console.log(\"user joined\");\n\t\t\t break; \n\t\t case \"user-published\":\n\t\t\t console.log(\"user published\");\n\t\t\t break; \n\t\t case \"user-unpublished\": \n\t\t\t console.log(\"user unpublished\"); \n\t\t\t break; \n\t\t case \"user-left\": \n\t\t\t console.log('user left'); \n\t\t\t break;\n\t\t // check Agora docs for all the supported evebts.\n\t\t} \n }, [events])\n}\n\nreturn ( \n
\n);\n\nexport default App;\n```\n**`useCallControls()`**\n\n**Returns**\n\n - `toggleVideo(localVideoDivId)` - To start/stop your video stream. You need to pass the `id` of the div to play the local user's video stream.\n - `toggleAudio()` - To start/stop your microphone audio stream.\n - `leave()` - To leave the call.\n - `startScreenShare({channel, token})` - To start screen sharing.\n\t - `channel (required)` - channel name of the call\n\t - `token` - required if authentication is enabled.\n - `stopScreeShare()` - To stop screen sharing.\n---\n\n**(Optional) You can access the `AgoraRTC` client using the `useAgoraClient()` hook.**\n\n## TODO\n\n - [ ] Add example project\n - [ ] Write tests\n - [ ] CI/CD\n - [ ] Efficient error handling\n - [x] Don't publish stream in live mode if the user role is not `host`\n - [x] Implement RTM for sending messages during the calls\n - [ ] Implement call invitations\n - [x] Add option to send a message to peers\n","readmeFilename":"README.md"}