Embedding the Web Application with React.js

We offer support for integrating some of our web application functionality in an external application through the following NPM packages:

• @meetora-embedded/bundled for Webpack 5+

• @meetora-embedded/webpack4 for Webpack 4

Browser requirements

To use the library you need to target browsers that have at least the following features:

• WebAssembly

• Web Crypto API

• WebWorker

Development requirements

• Webpack 4+

• react and react-dom dependencies need to be installed manually

Initializing application context

Before you can embed our React.js components into your application, you need to initialize the application context. This will create our web workers, audio context, audio worklet (or audio script processor), and more.

The application context should only be initialized once. Initializing it more than once will result in undefined behavior.

See below how to do that using TypeScript:

import meetora from '@meetora-embedded/bundled';

async function run(){
    const app = new meetora.App({
        endpoint: {
            protocol: 'wss:',
            hostname: 'test-api.sehacity.im',
            port: 80
        },
        publicKey: {
            fingerprint: '8728130447686118433',
            modulus: '22853906620914807651556974622287233109372552926255813380375561413647036264918965485117742785202391935527768166849293097584260115832488492039002509369183333328209985416311816009293321147284298587925526506836843393896162071812396295900803772178279500350431058954534258983913761379655607079541060889140057229089995916815493286568342292668483944427758163154547250990131087013467009427963075918540643500171654407575318542560992774238369519774453588269203751270347425415781648116454713800087248131932620495346772263438321268028607340150064084442728390323250597148945840034391060587926323337351273767227866678240959723994067',
            exponent: '65537'
        },
        appName: 'Embedded App'
    });
    const client = await app.start();
    if(!client){
        console.eror('Failed to start application context!');
        return false;
    }
    return client;
}

Now we need to authenticate using valid credentials. We provide many methods of authentication. Some of the major ones are:

• Sign in by email

• Authorize by OAuth

• Authorize by token

For the sake of this example, we'll go with valid email credentials using the sign in by email method:

if(!client.account()) {
    if(!await client.signInByEmail({
        email: '[email protected]',
        password: '[email protected]'
    })){
        return false;
    }
}

Now that we're authenticated, let's do one last check to make sure the account information is available:

const account = client.account();

assert.strict.ok(account?._name === 'account');

Rendering the embedded component

We're authenticated and the account object is available in the application context. Let's render the application now:

const org = client.organizationContext(organizationId);

if(!org) {
    return false;
}

render(
    <meetora.AppContextManager organizationId={org.client().organizationId} appContext={org.data().globalContext}>
        <meetora.CurrentConferenceCall
            onDropCallButtonClicked={onDropCallButtonClicked}/>
    </meetora.AppContextManager>
);

Organization id

If you're not sure how to get the organizationId, make sure to iterate over the value at account.users. Below you can see the actual type definition for the Account interface:

interface Account {
    _id: -1385352461;
    _name: "account";
    _type: "Account";
    /**
     * Account identifier
     */
    id: number;
    /**
     * Account phone. Could be empty
     */
    phone: string;
    /**
     * Account email. Could be empty
     */
    email: string;
    /**
     * Account roles
     */
    roles: ReadonlyArray<TMembership>;
    /**
     * Account profiles
     */
    users: ReadonlyArray<TUser>;
    /**
     * the list of joined organization.Organizations
     */
    joinedOrganizations: ReadonlyArray<TOrganization>;
    /**
     * the list of organization.Organizations where Account was invited
     */
    invitedOrganizations: ReadonlyArray<TOrganization>;
}

More up-to-date type definitions can be found in the packages.

Conclusion

Currently, we have limited support for React.js components that can be embedded. These are components related to the current ongoing call and are listed below:

• meetora.CurrentConferenceCall

• meetora.CurrentConferenceCallConversationRoom