@jiomeet/jm-web-core-template v1.0.0-alpha.2

🚀 JM Web Core Template Documentation

The JM Web Core template is a powerful sdk for integrating meetings into your Angular and React applications seamlessly. This SDK provides a simple method, renderMeeting, to render a meeting UI inside a specified HTML div element.

Setup

Register on JioMeet Platform:

You need to first register on Jiomeet platform. Click here to sign up

Get your application keys:

Create a new app. Please follow the steps provided in the Documentation guide to create apps before you proceed.

Get your Jiomeet meeting id and pin

Use the create meeting api to get your room id and password

Installation

You can install the SDK using npm :

npm install @jiomeet/jm-web-core-template

renderMeeting

The renderMeeting function is the core of the Core-template and is used to embed a meeting UI within your web application. It is the only function exposed from the sdk. It takes two important arguments:

Parameters:

• element : HTML div element The first argument is an HTML element where the meeting UI will be rendered.
• meetingConfigurations :IJMMeetingConfiguration | Optional
  • meetingDetails:IJMMeetingDetails Pass meeting details to auto-fill on the preview screen, or omit it to enter details manually.
    • meetingId : string
      Meeting ID of the meeting user is going to
    • meetingPin : string
      Meeting PIN of the meeting user is going to
    • userDisplayName : string
      Display Name with which user is going to join the meeting.
    • config :
      • userRole : "host" | "audience" | "speaker"
        Role of the user in the meeting. Possible values are .host, .speaker, .audience. If you are assigning .host value, please pass the token in its argument
      • token? Optional : string
        Token is optional property only required when you pass userRole as a host

Angular

In your Angular component file:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { renderMeeting } from '@jiomeet/jm-web-core-template';

@Component({
  selector: 'app-meeting',
  template: '<div #meetingElement></div>',
})
export class MeetingComponent implements AfterViewInit {
  @ViewChild('meetingElement', { static: true })
  meetingContainerRef: ElementRef;

  ngAfterViewInit() {
    // Pass meeting details to auto-fill on the preview screen, or omit it to enter details manually.
    const meetingConfigurations = {
      meetingDetails{
      meetingId: 'yourMeetingId',
      meetingPin: 'yourMeetingPin',
      userDisplayName: 'Your Name',
      config: {
        userRole: 'host', // 'host', 'audience', or 'speaker'
        token: 'yourToken',
      },
      }
    };
    renderMeeting(this.meetingContainerRef.nativeElement,meetingConfigurations);
  }
}

In your Angular component's HTML template, include the app-meeting selector where you want to render the meeting:

<app-meeting></app-meeting>

React

In your React component file:

import React, { useEffect, useRef } from 'react';
import { renderMeeting } from '@jiomeet/jm-web-core-template';

function MeetingComponent() {
  const meetingComponentRef = useRef(null);

  useEffect(() => {
    // Pass meeting details to auto-fill on the preview screen, or omit it to enter details manually.
    const meetingConfigurations = {
      meetingDetails{
      meetingId: 'yourMeetingId',
      meetingPin: 'yourMeetingPin',
      userDisplayName: 'Your Name',
      config: {
        userRole: 'host', // 'host', 'audience', or 'speaker'
        token: 'yourToken',
      },
      }
    };
    renderMeeting(meetingComponentRef.current,meetingConfigurations);
  }, []);

  return <div ref={meetingComponentRef}></div>;
}

export default MeetingComponent;

Render the MeetingComponent inside your main app component or wherever you need the meeting:

import React from 'react';
import MeetingComponent from './MeetingComponent';

function App() {
  return (
    <div className='App'>
      <MeetingComponent />
    </div>
  );
}

export default App;

Interfaces

IJMMeetingConfiguration

export interface IJMMeetingConfiguration {
  meetingDetails?: IJMMeetingDetails;
}

IJMMeetingDetails

export interface IJMMeetingDetails {
  meetingId: string;
  meetingPin: string;
  userDisplayName?: string;
  config?: {
    userRole?: 'host' | 'audience' | 'speaker';
    token?: string;
  };
}