React SDK for Meet Hour - (Typescript | Javascript Support)
Meet Hour - 100% free video conference solution Meet Hour is 100% free video conference solution with End to End Encrypted and many other features such as lobby mode, Donor box & Click&Pledge Connect for fundraising, Video call recording, Youtube Live Stream etc.
âś… Free Unlimited Time Group Video Conference
âś… Upto 100 Participants Group Meeting
âś… Free Video Conference Recording
âś… YouTube Live Stream
âś… Raise funds via Click&Pledge Connect & DonorBox
âś… Virtual Background
âś… Live Pad
âś… Screensharing on Desktop & Mobile and many other features.
1. Website - https://meethour.io
2. Android - https://bit.ly/2U239ll
3. iOS - https://apple.co/3k8Rpbn
- SDK Example Link - https://github.com/v-empower/MeetHour-Web-MobileSDKs
- API Documentation Link - https://docs.v-empower.com/docs/MeetHour-API/
npm install meet-hour-react-web-sdk
import ApiServices from "meet-hour-react-web-sdk";
- Hit the login API (Details mentioned below)
- Hit the schedule a Meeting API (Details mentioned below)
- Hit the Generate JWT API (Details mentioned below) - To join as Moderator.
- Use Component to show the conference page.
Important points: => Instead of '{version}', you to pass our latest version whenever you call the given functions. Currently we are using v1.2 Same version applies to the below calls. => In the token section, you need to pass the received access token which is received when login api is hit, for making further api calls. => You can make API calls by passing required properties only. But, to meet special requirements you can pass the rest properties, according to your need. For more details go to https://docs.v-empower.com/docs/MeetHour-API then click on APIS section to get all the information related to each api call.
-
To Get Access Token Endpoint : => https://docs.v-empower.com/docs/MeetHour-API/a44a7d7669f91-user-login-get-access-token
ApiServices.login({ grant_type, client_id, client_secret, username, password });=> You have to pass respective values in the argument section. Hence, to get desired response.
-
To schedule a meeting: => https://docs.v-empower.com/docs/MeetHour-API/2de4b757a6312-meeting-schedule-meeting
ApiServices. scheduleMeeting(token: string, body: ScheduleMeetingType) type ScheduleMeetingType { agenda?: string; attend?: | Array<number> | Array<UserObjectType> | Array<UserObjectType | number>; default_recording_storage?: string; duration_hr?: number; duration_min?: number; enable_pre_registration?: number; endBy?: string; end_date_time?: string; end_times?: number; groups?: Array<number | string>; hostusers?: | Array<number> | Array<UserObjectType> | Array<UserObjectType | number>; instructions?: string; is_recurring?: number; is_show_portal?: number; meeting_agenda?: string; meeting_date: string; meeting_meridiem: string; meeting_name: string; meeting_time: string; meeting_topic?: string; monthlyBy?: string; monthlyByDay?: string; monthlyByWeekday?: string; monthlyByWeekdayIndex?: string; options?: Array<string>; passcode: string; recurring_type?: string; repeat_interval?: number; send_calendar_invite?: number; timezone: string; weeklyWeekDays?: number; }; type UserObjectType { email?: string; first_name?: string; last_name?: string; } -
To Generate JWT Token Endpoint => https://docs.v-empower.com/docs/MeetHour-API/b7e3d0ab3906f-generate-jwt
ApiServices.generateJwt(token: string, body: GenerateJwtType) type GenerateJwtType { config?: { disableDeepLinking?: string; dropboxappKey?: string; dropboxredirectURI?: string; enableClosePage?: string; enableWelcomePage?: string; fileRecordingsEnabled?: boolean; liveStreamingEnabled?: boolean; p2penabled?: boolean; requireDisplayName?: string; resolution?: number; startAudioMuted?: number; videoheightideal?: number; videoheightmax?: number; videoheightmin?: number; videowidthideal?: number; videowidthmax?: number; videowidthmin?: number; }; contact_id?: number; meeting_id: string; ui_config?: { ANDROID_APP_PACKAGE?: string; APP_NAME?: string; APP_SCHEME?: string; BRAND_WATERMARK_BACKGROUND?: string; DEFAULT_LOGO_URL?: string; ENABLE_MOBILE_BROWSER?: string; HIDE_DEEP_LINKING_LOGO?: string; MEET_HOUR_WATERMARK_LINK?: string; MOBILE_APP_PROMO?: string; MOBILE_DOWNLOAD_LINK_ANDROID?: string; MOBILE_DOWNLOAD_LINK_IOS?: string; NATIVE_APP_NAME?: string; PROVIDER_NAME?: string; SHOW_MEET_HOUR_WATERMARK?: string; disablePrejoinFooter?: string; disablePrejoinHeader?: string; toolbar_buttons?: Array<string>; }; }; -
To fetch User Details: => https://docs.v-empower.com/docs/MeetHour-API/ff9d0e37d9191-user-details
ApiServices.userDetails(token: string) -
To fetch access Token using Refresh Token: => https://docs.v-empower.com/docs/MeetHour-API/d851be1af9804-get-access-token-using-refresh-token
ApiServices.getRefreshToken(token: string, body: RefreshTokenType) type RefreshTokenType { client_id: string; client_secret: string; grant_type: string; refresh_token: string; } -
To add a contact in Meet Hour database: => https://docs.v-empower.com/docs/MeetHour-API/bd1e416413e8c-add-contact
ApiServices.addContact(token: string, body: AddContactType) type AddContactType { country_code?: string; email: string; firstname: string; image?: string; is_show_portal?: boolean; lastname?: string; phone?: string; } -
To get Timezones of various countries: => https://docs.v-empower.com/docs/MeetHour-API/c688c29bce9b9-timezone-list
ApiServices.timezone(token: string) -
To get list of all the contacts in your Meet Hour account: => https://api.meethour.io/api/{version}/customer/contacts
ApiServices.contactsList(token: string, body: ContactsType) type ContactsType { exclude_hosts: number; limit: number; page: number; } -
To make changes in the existing contact details: => https://docs.v-empower.com/docs/MeetHour-API/28cae9187d215-edit-contact
``` ApiServices.editContact(token: string, body: EditContactType) type EditContactType { contact_id: number; country_code: string; email: string; firstname: string; image: string; is_show_portal: boolean; lastname: string; phone: string; } ``` -
To get Upcoming Meetings: => https://docs.v-empower.com/docs/MeetHour-API/31df88388416d-upcoming-meetings
ApiServices.upcomingMeetings(token: string, body: { limit: number; page: number; }) -
To archive a meeting: => https://docs.v-empower.com/docs/MeetHour-API/1dd64523cc6bf-archive-meeting
ApiServices.archiveMeeting( token: string, body: { id?: number; }) -
To get the details of a missed meeting: => https://docs.v-empower.com/docs/MeetHour-API/92998e2dda102-missed-meetings
ApiServices.missedMeetings( token: string, body: { limit: number; page: number; }) -
To get completed meetings: => https://docs.v-empower.com/docs/MeetHour-API/aa9ef6a678250-completed-meetings
ApiServices.completedMeetings( token: string, body: { limit: number; page: number; }) -
To edit an existing meeting: => https://docs.v-empower.com/docs/MeetHour-API/5dedde36380b4-meeting-edit-meeting
ApiServices.editMeeting(token: string, body: EditMeetingType) type EditMeeting { agenda?: string; attend?: | Array<number> | Array<UserObjectType> | Array<number & UserObjectType>; duration_hr?: number; duration_min?: number; enable_pre_registration?: number; endBy?: string; end_date_time?: string; groups?: Array<number>; hostusers?: | Array<number> | Array<UserObjectType> | Array<number & UserObjectType>; instructions?: string; is_recurring?: number; is_show_portal?: number; meeting_agenda?: string; meeting_date?: string; meeting_id: string; meeting_meridiem?: string; meeting_name?: string; meeting_time?: string; meeting_topic?: string; old_attend?: | Array<number> | Array<UserObjectType> | Array<number & UserObjectType>; options?: Array<string>; passcode?: string; recurring_type?: string; repeat_interval?: number; timezone?: string; } type UserObjectType { email?: string; first_name?: string; last_name?: string; } -
To view a meeting: => https://docs.v-empower.com/docs/MeetHour-API/7e9a0a1e0da7f-meeting-view-meeting
ApiServices.viewMeeting( token: string, body: { meeting_id: string } ) -
To get all the recordings list: => https://docs.v-empower.com/docs/MeetHour-API/ce7c4fd8cae7e-recording-list
ApiServices.recordingsList(token: string, body: RecordingsList) type RecordingsList { filter_by: string; limit: number; page: number; }
This library exposes two components with similar properties, intended for different use-cases.
To be used with custom domains as-it-is in React projects:
<MeetHourMeeting domain={YOUR_DOMAIN} roomName={YOUR_ROOM_NAME} apiKey={} apiBaseUR={} jwt={} pcode={} />Optional. Field used to retrieve the external_api.js file that initializes the IFrame. If omitted, defaults to meethour.io.
Required. String used when joining the meeting.
Required. You will get apiKey from Developers page of Meet Hour Dashboard (https://portal.meethour.io).
Optional. Pass JWT if Moderator is trying to join the call.
Optional. Encrypted passcode of Meet Hour Meeting.
Optional. api.meethour.io as your default value.
Optional. Callback to retrieve the parent node of the IFrame for more control (e.g. styling).
<MeetHourMeeting
...
getIFrameRef = { iframeRef => { iframeRef.style.height = '700px'; } }
/>Optional. Callback triggered when the external API is loaded to expose it for events and commands.
<MeetHourMeeting
...
onApiReady = { externalApi => console.log('Meet Hour External API', externalApi) }
/>Optional. Callback triggered when the meeting is ready to be closed.
<MeetHourMeeting
...
onReadyToClose = { () => console.log('Meet Hour is ready to be closed') }
/>Optional. Object used for options overrides.
Optional. Object used for more options overrides.
Optional. Details about the participant that started the meeting.
Optional. Custom loading view while the IFrame is loading.
Install and run the project from the sample SDK from here - https://github.com/v-empower/MeetHour-Web-MobileSDKs/Web/Web-ReactSDK
- Android Maven - https://repo.meethour.io/maven/releases/
- iOS Cocoapods - https://cocoapods.org/pods/MeetHourSDK
- React Native NPM - https://www.npmjs.com/package/react-native-meet-hour-sdk
- Flutter Pub Dev - https://pub.dev/packages/meet_hour