README.md

Click To Call Sample for JavaScript

The Click to Call sample app demonstrates how to integrate a video call experience into your website with the Spark SDK for JavaScript. This app allows a user to click a button on a webpage to start a secure video call with a predefined user or agent. The bbmChat widget handles the rendering of messages within the chat, and allows the user to send text, picture, and file messages.

Features

This app demonstrates how easy it is to integrate the bbmCall widget into your webpage. It initializes the Spark SDK for JavaScript, and starts a video call with a predefined user.

Getting Started

This sample requires the Spark SDK, which you can find along with related resources at the location below.

• Getting started with the Spark SDK
• Development Guide
• API Reference

Getting started video

Prerequisites

Run "yarn install" in the ClickToCall application directory to install the required packages.

Visit the Getting Started with Web section to see the minimum requirements.

To use the ClickToCall example, you must set up the following elements in js/config.js:

• Oauth2 configuration (AUTH_CONFIGURATION)
• A hard coded contact registration ID with whom anyone who views the page will talk (CONTACT_REG_ID)
• Your Spark user domain (ID_PROVIDER_DOMAIN)
• Firebase configuration (FIREBASE_CONFIG)
• User passcode (USER_SECRET)

Walkthrough

Follow this guide for a walkthrough of how to integrate a video call into your webpage.

• Import the bbmCall UI widget into your web application
• Initialize the Spark SDK for JavaScript
• Perform setup
• Start a video call with a predefined user

Import the bbmCall UI widget into your web application

Your web application needs to import the bbmCall widget in order to bring a video call experience into your webpages.

  <link rel="import" href="node_modules/bbmCall/bbmCall.html">

Initialize the Spark SDK for JavaScript

  // Instantiate BBMEnterprise.
  bbmeSdk = new BBMEnterprise({
    domain: ID_PROVIDER_DOMAIN,
    environment: ID_PROVIDER_ENVIRONMENT,
    userId: authUserInfo.userId,
    getToken: authManager.getBbmSdkToken,
    description: navigator.userAgent,
    messageStorageFactory: BBMEnterprise.StorageFactory.SpliceWatcher,
    kmsArgonWasmUrl: KMS_ARGON_WASM_URL
  });

For more information about setting up the Spark SDK for JavaScript, visit the Getting Started with Web section of the guide.

Perform setup

  // Handle changes of BBM Enterprise setup state.
  bbmeSdk.on('setupState', state => {
    console.log(`ClickToCall: BBMEnterprise setup state: ${state.value}`);
    switch (state.value) {
      case BBMEnterprise.SetupState.Success: {
        // Setup was successful. Create user manager and initiate call.
        const userRegId = bbmeSdk.getRegistrationInfo().regId;
        createUserManager(userRegId, authManager, bbmeSdk.getIdentitiesFromAppUserId, bbmeSdk.getIdentitiesFromAppUserIds)
        .then(userManager => {
            contactsManager = userManager;
            contactsManager.initialize()
            .then(() => {
              // User manage was created and initialized. Make a call to CONTACT_REG_ID.
              makeCall(CONTACT_REG_ID, true);
            });
          });
      }
      break;
      case BBMEnterprise.SetupState.SyncRequired: {
        if (isSyncStarted) {
          alert('Failed to get user keys using provided USER_SECRET.');
          window.close();
          return;
        }
        const isNew = bbmeSdk.syncPasscodeState === BBMEnterprise.SyncPasscodeState.New;
        const syncAction = isNew ? BBMEnterprise.SyncStartAction.New : BBMEnterprise.SyncStartAction.Existing;
        bbmeSdk.syncStart(USER_SECRET, syncAction);
      }
      break;
      case BBMEnterprise.SetupState.SyncStarted:
        isSyncStarted = true;
      break;
    }
  });
  
  // Handle setup error.
  bbmeSdk.on('setupError', error => {
    // Notify user about the setup error.
    alert(`BBM Enterprise registration failed: ${error.value}`);
  });

  // Start BBM Enterprise setup.
  bbmeSdk.setupStart();

Start a video call with a predefined user

To start a video call with a predefined user and show the bbmCall widget, you must invoke the public method makeCall() of the bbmCall widget and pass in the user's registration ID. After the call is finished, the bbmCall widget will fire the 'CallEnded' event.

  // Create bbm-call widget.
  const bbmCallWidget = document.createElement('bbm-call');
  // Initiate video call.
  bbmCallWidget.makeCall(regId, isVideo);
  // Handle 'CallEnded' event.
  bbmCallWidget.addEventListener('CallEnded', () => {
    document.body.removeChild(bbmCallWidget);
    bbmCallWidget = null;
    window.close();
  });

License

These samples are released as Open Source and licensed under the Apache 2.0 License.

This page includes icons from: https://material.io/icons/ used under the Apache 2.0 License.

Reporting Issues and Feature Requests

If you find a issue in one of the Samples or have a Feature Request, simply file an issue.