Twilio Video Chat
This video chat plugin enables you to add highly-customizable video chat windows to your app, and it’s white-labeled. The video chat plugin allows you to draw a video chat window in the design tab and control your chat room through workflow actions. You can start, join, leave, and end rooms, as well as provide the capability to hide/show video, mute/unmute your microphone, or share/stop sharing your screen.
Note: On Safari mobile, Twilio Plugin video chats do not work properly due to some quirks of the browser that are difficult to workaround. When a call is initiated, the users on the call are only able to hear and see themselves, yet Twilio recognizes this call as a successful call.
Draw a video chat window in the Design tab from your selection of “Visual elements.”
Check this box to let the user see what their video looks like prior to joining a room.
Create a video chat for others to join.
Select the Video chat element where you want to display your users’ videos for this room.
Choose a title for your room.
A unique field for the user who is starting the room. For example, this might be a username.
You can choose from three room sizes: One-on-one, small group, or group. One-on-one calls are encrypted, allowing for heightened security; these chats cannot be recorded. Small group rooms can hold up to four participants and are less expensive to run than regular group rooms. Group rooms can hold up to 50 people, allowing you to host larger chats, conferences, or presentations.
Close a room so that no others can join or continue the chat.
Title of the room to end.
Add a user to an existing room.
Select the Video chat element where you want to display your user’s videos for this room.
Title of the room to join.
A unique field for the user who is joining the room. For example, this might be a username.
Remove a particular user from a room. Other users can still join the room or continue the conversation.
Select the Video chat element where the room you want to leave is currently displayed.
Title of the room to leave.
Turn off this user’s sound. Other users in the room will not hear them.
Select the Video chat element for the user’s current room.
Title of the user’s current room.
Turn on this user’s sound. Other users in the room will hear them.
Select the Video chat element for the user’s current room.
Title of the user’s current room.
Turn on this user’s camera, so that their video is visible to others in the room.
Select the Video chat element for the user’s current room.
Title of the user’s current room.
Turn off this user’s camera, so that their video isn’t visible to others in the room.
Select the Video chat element for the user’s current room.
Title of the user’s current room.
Show the contents of a user’s screen to members of the room.
Select the Video chat element for the user’s current room.
Title of the user’s current room.
Stop showing the content of a user’s screen to members of the room.
Select the Video chat element for the user’s current room.
Title of the user’s current room.
For small group and group rooms, you have the option to record the call. Twilio “recordings” are not viewer-friendly files. In order to turn a recording into a viewer-friendly MP4 file, you must generate what Twilio calls a “composition.” Luckily, you can do so easily with the “Retrieve Composition” action, which will generate and retrieve a link to a viewer-friendly MP4 file which you can save to a Bubble Thing or view in the Compositions tab of your Twilio console.
Title of the recorded room.
To get started, install the video chat plugin in your Plugins tab. Then, navigate to https://www.twilio.com/ 182 and sign up for a Twilio account. This is the account you will use to pay for and manage your video chat functionality.
Once you have signed up for an account, you’ll need to fill out the required information for the plugin in the Settings panel.
You can find the necessary information in your Twilio account console. Your Account SID and Auth Token can be found on the main page of your project dashboard, seen below:
You will then need to generate a new API Key to fill out the “API Key: SID” and “API Key: Secret” fields in the plugin panel. In order to generate an API Key, go to the Settings tab in the Twilio console, then to the API Keys section.
Create a new API Key, giving it whatever name suits you, and copy the SID and Secret to the plugin settings in your Bubble editor.
After that, you’re all set! You can explore the plugin functionality and add video chat to your app right away. If you want to check on your chat rooms, recordings, compositions, or usage, you can do so in the Twilio console under the “Programmable Video” section.
Because you can enter a dynamic value for the “Room name” when your users join a room, it may be possible to do a search for rooms that match fields on the User type to pair people of similar interests. For example, you might do a search for rooms where “Primary interest = Current user’s primary interest” and join the first or last item.
Last modified 2yr ago