Twilio Video Calls Plugin

Introduction

Create real-time video apps that scale as you grow chats with WebRTC Go to larger group rooms with many participants.

Prerequisites

In order to interact with the plugin, you'll need to get the API credentials Account SID and API Keys. Create your development account at: https://www.twilio.com/try-twilio

How to setup

I. Setting up the Twilio application part

  1. Install the Twilio plugin
  1. Access Twilio developer account and create a project.
  1. Open the Twilio dashboard tab and get Account SID
Image without caption
4. Go to the programmable video tab and choose tools , -> access API key and create an KeySid and KeySecret.
Image without caption
5. Copy the Account SID and API Keys from the Twilio developer account.

II. Setup the Twilio Plugin on Bubble Side

6. Use Access Tokens action to authenticate the plugin by providing Account SID and KeySid/KeySecret taken from Twilio Developer Account in Plugin Settings.
Image without caption
7. Now you are ready to access Video Calls.

Plugin Element Proprieties

The plugin contains TwilioVideo visual element which should be used on page. This element displays participants in a conversation.
Image without caption

Plugin Element Events

  • Connection to room - Event which represents that user(s) has (have) established a connection in a Room
  • Disconnect from room - Event which represents that user(s) has (have) disconnected from a Room

Plugin Element Actions

  • Connect to room - Action which is used to connect to a room (Provide a value, text type)
  • Disconnect to room - Action that is used to disconnect from the room.
  • Video Disconnect /Connect - Action used to connect or disconnect video source.
  • Mute/Unmute - Action used to mute and unmute audio stream.
  • Full screen - Action used to make conversation element in Full Screen.

Plugin Element States

  • Disconnect Microphone
  • Connect Microphone
  • Disconnect Camera
  • Connect Camera
  • Number of Participants
  • Participants name

Plugin Actions

  1. Access Tokens - return token for connection room. It is necessary to set the next parameters Account Sid, API SID KEY, API SECRET KEY, which we have previously obtained.
Room name - Enter room name. Identity - Enter the participant's name.
Image without caption

Workflow example

In this workflow, we will show you how to connect to a Room and start a conversation:
  1. In this demo, we create a workflow on Click Event using a Button element and use Access Token action for connection to a room
Image without caption
2. Next step is to connect to a room by providing a name value and a token room which we obtain from the previous action step.
Image without caption
3. The result will be - connected user(s) in the conversation room
Image without caption

Things to Note

To troubleshoot common problems with Twilio Service we recommend you follow the official Twilio Documentation steps - https://support.twilio.com/hc/en-us/articles/223180908-How-do-I-troubleshoot-common-problems-with-Twilio-Client-

Changelogs

Update: 03/03/21 -
  • Fixed problem with the join room
Update 23/10/22 - Version: 1.5.0
  • Fixed problem with CSS

Demo to preview the settings