Plugins
Templates

Twilio Video Calls Plugin

Link to plugin page: https://zeroqode.com/plugin/twilio-video-conversations-1611927511080x769795732521103700

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

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

5. Copy the Account SID and API Keys from 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

7. Now you ready to access Video Calls.

Plugin Element Proprieties

The plugin contains TwilioVideo visual element which should be used on page. This element is to display participants in conversation.

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 room (Provide a value, text type)

  • Disconnect to room - Action which 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.

Workflow example

In this workflow we will show you how to connect to a Room and start conversation

  1. In this demo we create workflow on Click Event using a Button element, and use Access Token action for connection to a room

2. Next step is to connect to room by providing a name value and a token room which we obtain from previous action step

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

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