Telehealth JS Library

JS library that is used for video calls with additional streaming capabilities.

Demo

Installation

To load Telehealth library in your web page, add the following script tag:

<script type="module" src="https://api.telehealth.genie.health/telehealth.js"></script>

Now Telehealth class is available on window global object.

Initialization

To start using library, you need to create instance of Telehealth with parameters:

const lib = new Telehealth({ 
    root: '#app',
    groupId: 'unique-meeting-identifier', 
    displayName: 'John Doe', 
    tenantInfo: {
        name: 'TENANT_NAME',
        authKey: 'TENANT_AUTH_KEY'
    }    
}, { // Feature flags
    isPinOn: true,
    isHealthPlanOn: true,
    isShareExerciseOn: true,
    isHangUpOn: false,
    spinnerMessage: ''
}, { // Custom callback handlers
    customEndCallHandler: () => { /* some actions */ }
});

TENANT_NAME and TENANT_AUTH_KEY is given during registration

Features

Library events and methods

Telehealth exposes events and methods, that can be used to interact with library

const lib = new Telehealth({ ... });

// Events

lib.on('onCallStarted', () => {
  // triggered after use connected to call
});

lib.on('onCallEnded', () => {
  // triggered after user ended call
});

lib.on('onError', errorDetails => {
  // When error while connecting to calling services occurs:
  // errorDetails: { reason: string; message: string; exception: any; }
});

lib.on('onCallTimerTick', callDuration => {
  // triggered every second during the call with the duration info:
  // callDuration: { hours: number; minutes: number; seconds: number; }
});

// Unsubscribing from event
lib.off('onCallStarted', callStartedHandler);

// Methods

lib.emit('endCall'); // start graceful end call process

Admin view

By default, library starts with participant role view if no role defined. Admin role has more features that Participant role.

To specify admin role, add parameter in Telehealth initialization:

const lib = new Telehealth({ 
    root: '#app',
    groupId: 'unique-meeting-identifier', 
    // Specify role
    role: 'admin', // default is 'participant'
    displayName: 'John Doe', 
    tenantInfo: { name: 'TENANT_NAME', authKey: 'TENANT_AUTH_KEY' }
});

Features control

Some features of library can be turned on or off. Library has these feature flags:

To turn them on or off, add respective flag to Telehealth initialization:

const lib = new Telehealth({ 
    root: '#app',
    groupId: 'unique-meeting-identifier', 
    // Specify role
    role: 'admin', // default is 'participant'
    displayName: 'John Doe', 
    tenantInfo: { name: 'TENANT_NAME', authKey: 'TENANT_AUTH_KEY' }
}, {
    isPinOn: true,
    isShareExerciseOn: true
});

Open/close health plan

const lib = new Telehealth({ 
    role: 'admin',
    ...
});
lib.on('onOpenHealthPlan', () => {
    // Start showing users health plan popup
    alert("Show health plan for user.")

    // This should be called after stop showing health plan
    lib.emit('closeHealthPlan');
});

Toggle fullscreen handler

const lib = new Telehealth({ 
    role: 'admin',
    ...
});

lib.on('onToggleFullscreen', (isFullscreen) => {
    // Check if in fullscreen mode
    console.info("Is fullscreen ", isFullscreen);
});

Toggle pin handler

const lib = new Telehealth({ 
    role: 'admin',
    ...
}, {
    isPinOn: true
});

lib.on('onTogglePin', (inPinned) => {
    // Check if in pinned mode
    console.info("Is pinned ", inPinned);
});

Share exercise feature

Share custom video as a stream to other participants in the call.

const lib = new Telehealth({ 
    role: 'admin',
    ...
});

lib.on('onOpenExerciseSelection', () => {
    // Start selecting video for streaming:
    const defaultVideo = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
    const video = prompt('Start share video under url', defaultVideo);
    if (video) {
        // Start sharing video. 
        // Required parameters { url: string, name: string; }
        lib.emit('startShareVideo', { url: video, name: 'Exercise video' });
    } else {
        // Cancel selecting video process / Stop video sharing
        lib.emit('stopShareVideo');
    }
});

Best practices for serving videos:

• Add Cross-Origin Resource Sharing (CORS) support if videos are serving on different domain that your site is.
• Add Accept-Ranges: bytes response header on video server.
• If using Content-Security-Policy (CSP) - add media-src policy for domain of video server.

Library destroy

Library could be disposed in graceful way using one of the following methods:

• Call .destroy() on Telehealth instance.

Content security policy (CSP) settings

The minimal policy required for using Telehealth is:

default-src 'self'; script-src 'self' https://api.telehealth.genie.health; style-src 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self' https://api.telehealth.genie.health *.signalr.net *.skype.com *.microsoft.com *.azure.net *.azure.com *.office.com wss://*.microsoft.com wss://*.signalr.net

Example

For more features, follow demo page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://api.telehealth.genie.health/telehealth.js"></script>
    <style>
      #app {
        width: 1072px;
        height: 476px;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>

    <script>
        const lib = new Telehealth({ 
            root: '#app',
            groupId: 'unique-meeting-identifier', 
            role: '', 
            displayName: 'John Doe', 
            tenantInfo: {
                name: 'TENANT_NAME',
                authKey: 'TENANT_AUTH_KEY'
            }
        });
    </script>
  </body>
</html>