DEV Community

Abdul Muqeet
Abdul Muqeet

Posted on

Video SDK for Web - Generic Javascript | Meet Hour

[MeetHour - Generic Javascript SDK]

  1. SDK Example Link - https://github.com/v-empower/MeetHour-Web-MobileSDKs
  2. API Documentation Link - https://docs.v-empower.com/docs/MeetHour-API/

Steps to Integrate:

  1. Signup for Meet Hour (https://meethour.io) and signup for Developer or Higher plan. Currently we offer 28 days free trial.
  2. Once you signup for developer plan, and go to our Dashboard - (https://portal.meethour.io) and tap on "Developers" menu.
  3. Now copy and Client ID & Client Secret and keep it handy with you.
  4. Go to our API documentation and hit Login API to get oAuth Access Token - (https://bit.ly/3E2hKU7)
  5. Once you get an access token, you can access any our API. Now you first thing you have to do is create a contact in our system as soon as user signup in your platform using this API (https://bit.ly/3flms7q). This will give you unique contact_id of that user. You require this id when you schedule a meeting below.
  6. Later go to Schedule Meeting API -> Pass all the parameters needed to generate a new meetings - (https://bit.ly/3h0qpis)
  7. Once the meeting is genereate, in order to join a meeting you require to Generate JWT Token using this API (https://bit.ly/3sJaojD) and pass it to the conference URL via MT Parameter - https://meethour.io?mt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImFjY2Vzc190b2tlbiI6ImV5SjBlWEFpT2lKS1YxUWlMQ0poYkdjaU9pSlNVekkxTmlKOS5leUpoZFdRaU9pSTVNemxrWmpVeE5pMDJNekEzTFRRNVkyUXRPVGMxTXkwek1XRTNNemRrT1RGaE1HWWlMQ0pxZEdraU9pSmtNMlUyT

MeetHour Embed Meeting

All the Conference UI is managed from this page - https://portal.meethour.io/customer/ui_settings

You can also try Embed Meeting via below code. Change the Meeting URL in below 

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    </head>
<body>
    <iframe allow="camera; microphone; display-capture; autoplay; clipboard-write" src="https://meethour.io/TestRoom#interfaceConfig.applyMeetingSettings=true&interfaceConfig.disablePrejoinHeader=true&interfaceConfig.ENABLE_DESKTOP_DEEPLINK=false&interfaceConfig.disablePrejoinFooter=true&interfaceConfig.SHOW_MEET_HOUR_WATERMARK=false&interfaceConfig.HIDE_DEEP_LINKING_LOGO=true&interfaceConfig.MOBILE_APP_PROMO=false&interfaceConfig.ENABLE_MOBILE_BROWSER=true&appData.localStorageContent=null" name="mhConferenceFrame0" id="mhConferenceFrame0" allowfullscreen="true" style="height: 100%; width: 600px; border: 0px;"></iframe>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Image description

Meet Hour External Javascript API - SDK (Checkout Example.html)

Installation

To add Meet Hour programmatically, please use our Javascript API library:

API Documentation - https://docs.v-empower.com/docs/MeetHour-API/

Web Javascript SDK 

        <script src="https://api.meethour.io/libs/v2.4.5/external_api.min.js?apiKey=f6282h82729080282928298"></script>
Enter fullscreen mode Exit fullscreen mode

api = new MeetHourExternalAPI(domain, options)

Config & User Interface Settings Parameters - Parameters - https://docs.v-empower.com/docs/MeetHour-API/281f2d9a6c539-generate-jwt

The next step for embedding Meet Hour is to create the Meet Hour API object.
Its constructor gets a number of options:

  • domain: domain used to build the conference URL, 'meethour.io' for example.
  • options: object with properties - the optional arguments:
    • roomName: (required) name of the room to join.
    • apiKey: (required). You will get API key from your Developer Page - https://portal.meethour.io/customer/developers. Make sure you are on our Developer or higher plan. - https://meethour.io/#pricing
    • jwt: (required - If you to start meeting or join or moderator) - https://docs.v-empower.com/docs/MeetHour-API/b3A6MzcwODk5MTQ-generate-jwt
    • pcode: (optional) Pass encrypted Meeting Password dynamically. Get this from API.
    • width: (optional) width for the iframe which will be created. If a number is specified it's treated as pixel units. If a string is specified the format is number followed by 'px', 'em', 'pt' or '%'.
    • height: (optional) height for the iframe which will be created. If a number is specified it's treated as pixel units. If a string is specified the format is number followed by 'px', 'em', 'pt' or '%'.
    • parentNode: (optional) HTML DOM Element where the iframe will be added as a child.
    • noSSL: (optional, defaults to true) Boolean indicating if the server should be contacted using HTTP or HTTPS.
    • onload: (optional) handler for the iframe onload event.
    • invitees: (optional) Array of objects containing information about new participants that will be invited in the call.
    • devices: (optional) A map containing information about the initial devices that will be used in the call.
    • userInfo: (optional) JS object containing information about the participant opening the meeting, such as email.

```Javascript Standard Example

<br> var domain = &quot;meethour.io&quot;;<br> var options = {<br> roomName: &quot;TestRoom&quot;, //Change to your Meeting ID<br> parentNode: document.querySelector(&quot;#conference&quot;),<br> jwt: &quot;&quot;,<br> apiKey: &quot;&quot;,<br> pcode: &quot;5b40602cfea7708895781a8cad71be5b&quot;,<br> configOverwrite: {<br> prejoinPageEnabled: true, // make this false to skip the prejoin page <br> disableInviteFunctions: true,<br> },<br> interfaceConfigOverwrite: {<br> applyMeetingSettings: true, // This is managed from this page - <a href="https://portal.meethour.io/customer/ui_settings">https://portal.meethour.io/customer/ui_settings</a><br> disablePrejoinHeader: true,<br> disablePrejoinFooter: true,<br><br> SHOW_MEET_HOUR_WATERMARK: false,<br> ENABLE_DESKTOP_DEEPLINK: false,<br> HIDE_DEEP_LINKING_LOGO: true,<br> MOBILE_APP_PROMO: false,<br> ENABLE_MOBILE_BROWSER: true<br> },</p> <div class="highlight"><pre class="highlight plaintext"><code> }; // Initialization of MeetHour External API var api = new MeetHourExternalAPI(domain, options); </code></pre></div> <p>





Example:



```javascript
const domain = 'meethour.io';
const options = {
    roomName: 'MeetHourExternalAPI',
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
};
const api = new MeetHourExternalAPI(domain, options);
Enter fullscreen mode Exit fullscreen mode

You can set the initial media devices for the call:

const domain = 'meethour.io';
const options = {
    ...
    devices: {
        audioInput: '<deviceLabel>',
        audioOutput: '<deviceLabel>',
        videoInput: '<deviceLabel>'
    },
    ...
};
const api = new MeetHourExternalAPI(domain, options);
Enter fullscreen mode Exit fullscreen mode

You can overwrite options set in [config.js] and [interface_config.js].
For example, to enable the filmstrip-only interface mode, you can use:

const options = {
    ...
    interfaceConfigOverwrite: { filmStripOnly: true },
    ...
};
const api = new MeetHourExternalAPI(domain, options);
Enter fullscreen mode Exit fullscreen mode

You can also pass a jwt token to Meet Hour:

const options = {
    ...
    jwt: '<jwt_token>',
    noSsl: false,
    ...
};
const api = new MeetHourExternalAPI(domain, options);
Enter fullscreen mode Exit fullscreen mode

You can set the userInfo(email, display name) for the call:

var domain = "meethour.io";
var options = {
    ...
    userInfo: {
        email: 'email@meethourexamplemail.com',
        displayName: 'John Doe'
    }
}
var api = new MeetHourExternalAPI(domain, options);
Enter fullscreen mode Exit fullscreen mode

Controlling the embedded Meet Hour Conference

Device management MeetHourExternalAPI methods:

  • getAvailableDevices - Retrieve a list of available devices. 
api.getAvailableDevices().then(devices => {
    devices = {
        audioInput: [{
            deviceId: 'ID'
            groupId: 'grpID'
            kind: 'audioinput'
            label: 'label'
        },....],
        audioOutput: [{
            deviceId: 'ID'
            groupId: 'grpID'
            kind: 'audioOutput'
            label: 'label'
        },....],
        videoInput: [{
            deviceId: 'ID'
            groupId: 'grpID'
            kind: 'videoInput'
            label: 'label'
        },....]
    }
    ...
});
Enter fullscreen mode Exit fullscreen mode
  • getCurrentDevices - Retrieve a list with the devices that are currently selected. 
api.getCurrentDevices().then(devices => {
    devices = {
        audioInput: {
            deviceId: 'ID'
            groupId: 'grpID'
            kind: 'videoInput'
            label: 'label'
        },
        audioOutput: {
            deviceId: 'ID'
            groupId: 'grpID'
            kind: 'videoInput'
            label: 'label'
        },
        videoInput: {
            deviceId: 'ID'
            groupId: 'grpID'
            kind: 'videoInput'
            label: 'label'
        }
    }
    ...
});
Enter fullscreen mode Exit fullscreen mode
  • isDeviceChangeAvailable - Resolves with true if the device change is available and with false if not. 
// The accepted deviceType values are - 'output', 'input' or undefined.
api.isDeviceChangeAvailable(deviceType).then(isDeviceChangeAvailable => {
    ...
});
Enter fullscreen mode Exit fullscreen mode
  • isDeviceListAvailable - Resolves with true if the device list is available and with false if not. 
api.isDeviceListAvailable().then(isDeviceListAvailable => {
    ...
});
Enter fullscreen mode Exit fullscreen mode
  • isMultipleAudioInputSupported - Resolves with true if multiple audio input is supported and with false if not. 
api.isMultipleAudioInputSupported().then(isMultipleAudioInputSupported => {
    ...
});
Enter fullscreen mode Exit fullscreen mode
  • setAudioInputDevice - Sets the audio input device to the one with the label or id that is passed. 
api.setAudioInputDevice(deviceLabel, deviceId);
Enter fullscreen mode Exit fullscreen mode
  • setAudioOutputDevice - Sets the audio output device to the one with the label or id that is passed. 
api.setAudioOutputDevice(deviceLabel, deviceId);
Enter fullscreen mode Exit fullscreen mode
  • setVideoInputDevice - Sets the video input device to the one with the label or id that is passed. 
api.setVideoInputDevice(deviceLabel, deviceId);
Enter fullscreen mode Exit fullscreen mode

You can control the embedded Meet Hour conference using the MeetHourExternalAPI object by using executeCommand:

api.executeCommand(command, ...arguments);
Enter fullscreen mode Exit fullscreen mode

The command parameter is String object with the name of the command. The following commands are currently supported:

  • displayName - Sets the display name of the local participant. This command requires one argument - the new display name to be set. 
api.executeCommand('displayName', 'New Nickname');
Enter fullscreen mode Exit fullscreen mode
  • password - Sets the password for the room. This command requires one argument - the password name to be set. 
api.executeCommand('password', 'The Password');
Enter fullscreen mode Exit fullscreen mode
  • sendTones - Play touch tones. 
api.executeCommand('sendTones', {
    tones: string, // The dial pad touch tones to play. For example, '12345#'.
    duration: number, // Optional. The number of milliseconds each tone should play. The default is 200.
    pause: number // Optional. The number of milliseconds between each tone. The default is 200.
});
Enter fullscreen mode Exit fullscreen mode
  • subject - Sets the subject of the conference. This command requires one argument - the new subject to be set. 
api.executeCommand('subject', 'New Conference Subject');
Enter fullscreen mode Exit fullscreen mode
  • toggleAudio - Mutes / unmutes the audio for the local participant. No arguments are required. 
api.executeCommand('toggleAudio');
Enter fullscreen mode Exit fullscreen mode
  • toggleVideo - Mutes / unmutes the video for the local participant. No arguments are required. 
api.executeCommand('toggleVideo');
Enter fullscreen mode Exit fullscreen mode
  • toggleFilmStrip - Hides / shows the filmstrip. No arguments are required. 
api.executeCommand('toggleFilmStrip');
Enter fullscreen mode Exit fullscreen mode
  • toggleChat - Hides / shows the chat. No arguments are required. 
api.executeCommand('toggleChat');
Enter fullscreen mode Exit fullscreen mode
  • toggleShareScreen - Starts / stops screen sharing. No arguments are required. 
api.executeCommand('toggleShareScreen');
Enter fullscreen mode Exit fullscreen mode
  • toggleTileView - Enter / exit tile view layout mode. No arguments are required. 
api.executeCommand('toggleTileView');
Enter fullscreen mode Exit fullscreen mode
  • hangup - Hangups the call. No arguments are required. 
api.executeCommand('hangup');
Enter fullscreen mode Exit fullscreen mode
  • email - Changes the local email address. This command requires one argument - the new email address to be set. 
api.executeCommand('email', 'example@example.com');
Enter fullscreen mode Exit fullscreen mode
  • avatarUrl - Changes the local avatar URL. This command requires one argument - the new avatar URL to be set. 
api.executeCommand('avatarUrl', 'https://avatars0.githubusercontent.com/u/3671647');
Enter fullscreen mode Exit fullscreen mode
  • sendEndpointTextMessage - Sends a text message to another participant through the datachannels. 
api.executeCommand('receiverParticipantId', 'text');
Enter fullscreen mode Exit fullscreen mode
  • setVideoQuality - Sets the send and receive video resolution. This command requires one argument - the resolution height to be set. 
api.executeCommand('setVideoQuality', 720);
Enter fullscreen mode Exit fullscreen mode

You can also execute multiple commands using the executeCommands method:

api.executeCommands(commands);
Enter fullscreen mode Exit fullscreen mode

The commands parameter is an object with the names of the commands as keys and the arguments for the commands as values:

api.executeCommands({
    displayName: [ 'nickname' ],
    toggleAudio: []
});
Enter fullscreen mode Exit fullscreen mode

You can add event listeners to the embedded Meet Hour using the addEventListener method.
NOTE: This method still exists but it is deprecated. MeetHourExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods (addListener or on).

api.addEventListener(event, listener);
Enter fullscreen mode Exit fullscreen mode

The event parameter is a String object with the name of the event.
The listener parameter is a Function object with one argument that will be notified when the event occurs with data related to the event.

The following events are currently supported:

  • cameraError - event notifications about meethour-Meet having failed to access the camera. The listener will receive an object with the following structure: 
{
    type: string, // A constant representing the overall type of the error.
    message: string // Additional information about the error.
}
Enter fullscreen mode Exit fullscreen mode
  • avatarChanged - event notifications about avatar changes. The listener will receive an object with the following structure: 
{
    id: string, // the id of the participant that changed his avatar.
    avatarURL: string // the new avatar URL.
}
Enter fullscreen mode Exit fullscreen mode
  • audioAvailabilityChanged - event notifications about audio availability status changes. The listener will receive an object with the following structure: 
{
    available: boolean // new available status - boolean
}
Enter fullscreen mode Exit fullscreen mode
  • audioMuteStatusChanged - event notifications about audio mute status changes. The listener will receive an object with the following structure: 
{
    muted: boolean // new muted status - boolean
}
Enter fullscreen mode Exit fullscreen mode
  • endpointTextMessageReceived - event notifications about a text message received through datachannels. The listener will receive an object with the following structure: 
{
    senderInfo: {
        jid: string, // the jid of the sender
        id: string // the participant id of the sender
    },
    eventData: {
        name: string // the name of the datachannel event: `endpoint-text-message`
        text: string // the received text from the sender
    }
}
Enter fullscreen mode Exit fullscreen mode
  • micError - event notifications about meethour-Meet having failed to access the mic. The listener will receive an object with the following structure: 
{
    type: string, // A constant representing the overall type of the error.
    message: string // Additional information about the error.
}
Enter fullscreen mode Exit fullscreen mode
  • screenSharingStatusChanged - receives event notifications about turning on/off the local user screen sharing. The listener will receive object with the following structure: 
{
    on: boolean, //whether screen sharing is on
    details: {

        // From where the screen sharing is capturing, if known. Values which are
        // passed include 'window', 'screen', 'proxy', 'device'. The value undefined
        // will be passed if the source type is unknown or screen share is off.
        sourceType: string|undefined
    }
}
Enter fullscreen mode Exit fullscreen mode
  • dominantSpeakerChanged - receives event notifications about change in the dominant speaker. The listener will receive object with the following structure: 
{
    id: string //participantId of the new dominant speaker
}
Enter fullscreen mode Exit fullscreen mode
  • tileViewChanged - event notifications about tile view layout mode being entered or exited. The listener will receive object with the following structure: 
{
    enabled: boolean, // whether tile view is not displayed or not
}
Enter fullscreen mode Exit fullscreen mode
  • incomingMessage - Event notifications about incoming messages. The listener will receive an object with the following structure: 
{
    from: string, // The id of the user that sent the message
    nick: string, // the nickname of the user that sent the message
    message: string // the text of the message
}
Enter fullscreen mode Exit fullscreen mode
  • outgoingMessage - Event notifications about outgoing messages. The listener will receive an object with the following structure: 
{
    message: string // the text of the message
}
Enter fullscreen mode Exit fullscreen mode
  • displayNameChange - event notifications about display name changes. The listener will receive an object with the following structure: 
{
    id: string, // the id of the participant that changed his display name
    displayname: string // the new display name
}
Enter fullscreen mode Exit fullscreen mode
  • deviceListChanged - event notifications about device list changes. The listener will receive an object with the following structure: 
{
    devices: Object // the new list of available devices.
}
Enter fullscreen mode Exit fullscreen mode

NOTE: The devices object has the same format as the getAvailableDevices result format.

  • emailChange - event notifications about email changes. The listener will receive an object with the following structure: 
{
    id: string, // the id of the participant that changed his email
    email: string // the new email
}
Enter fullscreen mode Exit fullscreen mode
  • feedbackSubmitted - event notifications about conference feedback submission 
{
    error: string // The error which occurred during submission, if any.
}
Enter fullscreen mode Exit fullscreen mode
  • filmstripDisplayChanged - event notifications about the visibility of the filmstrip being updated. 
{
    visible: boolean // Whether or not the filmstrip is displayed or hidden.
}
Enter fullscreen mode Exit fullscreen mode
  • participantJoined - event notifications about new participants who join the room. The listener will receive an object with the following structure: 
{
    id: string, // the id of the participant
    displayName: string // the display name of the participant
}
Enter fullscreen mode Exit fullscreen mode
  • participantKickedOut - event notifications about a participants being removed from the room. The listener will receive an object with the following structure: 
{
    kicked: {
        id: string, // the id of the participant removed from the room
        local: boolean // whether or not the participant is the local particiapnt
    },
    kicker: {
        id: string // the id of the participant who kicked out the other participant
    }
}
Enter fullscreen mode Exit fullscreen mode
  • participantLeft - event notifications about participants that leave the room. The listener will receive an object with the following structure: 
{
    id: string // the id of the participant
}
Enter fullscreen mode Exit fullscreen mode
  • participantRoleChanged - event notification fired when the role of the local user has changed (none, moderator, participant). The listener will receive an object with the following structure: 
{
    id: string // the id of the participant
    role: string // the new role of the participant
}
Enter fullscreen mode Exit fullscreen mode

  • passwordRequired - event notifications fired when failing to join a room because it has a password.

  • videoConferenceJoined - event notifications fired when the local user has joined the video conference. The listener will receive an object with the following structure:

{
    roomName: string, // the room name of the conference
    id: string, // the id of the local participant
    displayName: string, // the display name of the local participant
    avatarURL: string // the avatar URL of the local participant
}
Enter fullscreen mode Exit fullscreen mode
  • videoConferenceLeft - event notifications fired when the local user has left the video conference. The listener will receive an object with the following structure: 
{
    roomName: string // the room name of the conference
}
Enter fullscreen mode Exit fullscreen mode
  • videoAvailabilityChanged - event notifications about video availability status changes. The listener will receive an object with the following structure: 
{
    available: boolean // new available status - boolean
}
Enter fullscreen mode Exit fullscreen mode
  • videoMuteStatusChanged - event notifications about video mute status changes. The listener will receive an object with the following structure: 
{
    muted: boolean // new muted status - boolean
}
Enter fullscreen mode Exit fullscreen mode

  • readyToClose - event notification fired when Meet Hour is ready to be closed (hangup operations are completed).

  • subjectChange - event notifications about subject of conference changes.
    The listener will receive an object with the following structure:

{
    subject: string // the new subject
}
Enter fullscreen mode Exit fullscreen mode
  • suspendDetected - event notifications about detecting suspend event in host computer.

You can also add multiple event listeners by using addEventListeners.
This method requires one argument of type Object. The object argument must
have the names of the events as keys and the listeners of the events as values.
NOTE: This method still exists but it is deprecated. MeetHourExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods.

function incomingMessageListener(object)
{
// ...
}

function outgoingMessageListener(object)
{
// ...
}

api.addEventListeners({
    incomingMessage: incomingMessageListener,
    outgoingMessage: outgoingMessageListener
});
Enter fullscreen mode Exit fullscreen mode

If you want to remove a listener you can use removeEventListener method with argument the name of the event.
NOTE: This method still exists but it is deprecated. MeetHourExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods( removeListener).

api.removeEventListener('incomingMessage');
Enter fullscreen mode Exit fullscreen mode

If you want to remove more than one event you can use removeEventListeners method with an Array with the names of the events as an argument.
NOTE: This method still exists but it is deprecated. MeetHourExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods.

api.removeEventListeners([ 'incomingMessage', 'outgoingMessageListener' ]);
Enter fullscreen mode Exit fullscreen mode

You can get the number of participants in the conference with the following API function:

const numberOfParticipants = api.getNumberOfParticipants();
Enter fullscreen mode Exit fullscreen mode

You can get the avatar URL of a participant in the conference with the following API function:

const avatarURL = api.getAvatarURL(participantId);
Enter fullscreen mode Exit fullscreen mode

You can get the display name of a participant in the conference with the following API function:

const displayName = api.getDisplayName(participantId);
Enter fullscreen mode Exit fullscreen mode

You can get the email of a participant in the conference with the following API function:

const email = api.getEmail(participantId);
Enter fullscreen mode Exit fullscreen mode

You can get the iframe HTML element where Meet Hour is loaded with the following API function:

const iframe = api.getIFrame();
Enter fullscreen mode Exit fullscreen mode

You can check whether the audio is muted with the following API function:

api.isAudioMuted().then(muted => {
    ...
});
Enter fullscreen mode Exit fullscreen mode

You can check whether the video is muted with the following API function:

api.isVideoMuted().then(muted => {
    ...
});
Enter fullscreen mode Exit fullscreen mode

You can check whether the audio is available with the following API function:

api.isAudioAvailable().then(available => {
    ...
});
Enter fullscreen mode Exit fullscreen mode

You can check whether the video is available with the following API function:

api.isVideoAvailable().then(available => {
    ...
});
Enter fullscreen mode Exit fullscreen mode

You can invite new participants to the call with the following API function:

api.invite([ {...}, {...}, {...} ]).then(() => {
    // success
}).catch(() => {
    // failure
});
Enter fullscreen mode Exit fullscreen mode

NOTE: The format of the invitees in the array depends on the invite service used for the deployment.

You can remove the embedded Meet Hour Conference with the following API function:

api.dispose();
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

lakshmi_prithanadesan_32 profile image

Day 8 - Modules

Lakshmi Pritha Nadesan -

madsenmm profile image

I created a visually pleasing HTML color viewer

Tobias Mønster Madsen -

jael_larios_f11eb59970d95 profile image

💝👸

Jael Larios -

melanyss profile image

From Bartender to Developer: My Self-Taught Journey in Tech

Melanys -