A Video Chat Plugin for Flex

Table of Contents

• Summary
• API Keys
• Twilio Functions
  • Account SID and Auth Token
  • Environment Variables
• Setup
• Development
• Deploy

Summary

This plugin allows you to accept video channel tasks in Flex. Its a demo only plugin and not yet ready for production code, but could be a starting place. To see an example implementation for the client side (allowing a customer to initiate a video chat from your website), review the repo here:

https://github.com/trogers-twilio/site-video-chat-client

API Keys

In order to generate a token capable of creating or joining a video room, it's necessary to use an API Key. If you don't already have an API Key created, or you would like to create a dedicated key for this use case, in the Twilio Console navigate to Runtime -> API Keys. Create a new key and note the SID and Secret. These will be used later when setting up our Twilio Functions.

Twilio Functions

Currently it requires several hosted functions, which are stored in src/functions. These functions have comments at the top that describe the environment variables they need. Please deploy them into your environment and set the variables before trying to use the plugin.

Once you've recieved your domain for your hosted functions, please add it to public/appConfig.js.

Account SID and Auth Token

The function for generating tokens to create/join video rooms requires use of the Account SID. Be sure the "Enable ACCOUNT_SID and AUTH_TOKEN" option is checked in Runtime -> Functions -> Configure in the Twilio console.

Environment Variables

The following environment variables are used by either the token generating function or the video task creation function. Each variable must exist and be populated with a valid value for this plugin to operate. Please create/configure as necessary in Runtime -> Functions -> Configure in the Twilio Console:

• TWILIO_API_KEY_SID
  • The SID of the API Key you want to use for generating tokens
• TWILIO_API_KEY_SECRET
  • The secret for the API Key
• TWILIO_SYNC_SERVICE_SID
  • The SID of the Sync Service to use when creating a Sync Doc
• TWILIO_WORKSPACE_SID
  • The SID of the TaskRouter workspace to use for routing video interactions
• TWILIO_VIDEO_WORKFLOW_SID
  • The SID of the TaskRouter workflow to use for routing video interactions

Setup

Make sure you have Node.js as well as npm installed.

Afterwards install the dependencies by running npm install:

cd plugin-video

# If you use npm
npm install

Development

In order to develop locally, you can use the Webpack Dev Server by running:

npm start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:8080. If you want to change that you can do this by setting the PORT environment variable:

PORT=3000 npm start

When you make changes to your code, the browser window will be automatically refreshed.

Deploy

Once you are happy with your plugin, you have to bundle it, in order to deply it to Twilio Flex.

Run the following command to start the bundling:

npm run build

Afterwards, you'll find in your project a build/ folder that contains a file with the name of your plugin project. For example plugin-example.js. Take this file and upload it into the Assets part of your Twilio Runtime.

Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex which would provide them globally.