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