Git Product home page Git Product logo

plugin-video-chat's Introduction

A Video Chat Plugin for Flex

Table of Contents

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

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.

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.

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.

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

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

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.

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.

plugin-video-chat's People

Contributors

trogers-twilio avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.