@gridal/f-gridalymeeting
v0.5.32
Published
## Usage
Downloads
416
Readme
GridalyMeeting
Usage
import { useContext, useEffect } from 'react';
import { GridalyMeeting, GridalyMeetingContextProvider, GridalyMeetingContextData } from '@gridal/gridalyMeeting';
const Example = () => {
const { ref, peers, roles, localPeer, isConnected, updatePeersList, updateIsConnected, updateLocalPeer, updateRolesList } =
useContext(GridalyMeetingContextData);
return (
<div style={{ height: '100vh' }}>
<GridalyMeeting
innerRef={ref} // ref that contains all methods for handling the room
attendee={{
name: 'Attendee name that will join the room',
avatar: 'Attendee avatar that will join the room',
hidden: false, // optional, when true will hide the attendee from showing
initialSettings: {
// optional initial settings
isAudioMuted: true,
isVideoMuted: false,
},
}}
roomCode="YOUR_ROOM_CODE" // necessary for joining the room/preview
authToken="YOUR_AUTH_TOKEN" // neccasary for joining the room/preview
withPreview // by default true, when false will skip preview and auto join to the room
withControls // by default true, when false will not show controls at the bottom
isHLS // optional, this is to decide whether given room is with streaming features
logsLevel // optional, by default hides all logs (needs to be set to 0 when joined by bot)
onPeersListUpdate={updatePeersList} // will return list of peers and refresh whenever someone joins or leave
onRolesListUpdate={updateRolesList} // will return list of roles
onLocalPeerRoomConnection={({ isConnected, localPeer }) => {
updateIsConnected(isConnected);
updateLocalPeer(localPeer);
}} // return whether attendee is connected and attendee data
/>
</div>
);
};
export const App = () => (
<GridalyMeetingContextProvider lang="en">
<Example />
</GridalyMeetingContextProvider>
);
Development
npm install
npm start # or yarn start
cd example
npm install
npm start # or yarn s tart