27min

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
  2. Access Twilio developer account and create a project.
  3. Open the Twilio dashboard tab and get Account SID
Document image



4. Go to the programmable video tab and choose tools , -> access API key and create an KeySid and KeySecret.

Document image

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.

Document image

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.

Document image

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.

Document image

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
Document image



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.

Document image



3. The result will be - connected user(s) in the conversation room

Document image

Things to Note

To troubleshoot common problems with Twilio Service we recommend you follow 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

Demo to preview the settings



Updated 18 Apr 2022
Did this page help?
Yes
No