Plugin Announcement: Video Chat

Announcements New features
1

We are excited to announce the beta launch of the Bubble video chat plugin, powered by Twilio! Now, more than ever, it’s important to stay connected to each other. Our hope is that this plugin will help with this effort. The video chat plugin enables you to add highly-customizable video chat windows to your app, and it’s white-label, so you can make it completely your own with ease. In the time of social distancing, we hope this latest plugin will help you build virtual communities, communicate with customers, and provide a way to stay connected through the web.

Getting Started

To get started, install the video chat plugin in your Plugins tab. Then, navigate to https://www.twilio.com/ 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.

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.

To create a room, you must provide a unique room name and select a room size. 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.

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.

We hope you enjoy using this plugin to add video chat to your Bubble apps. No matter where you are in the world, stay safe, stay creative, and stay connected to each other!

43 Likes
2

Thank you for all the work @sam8

We will defiantly test and report back if we find anything

1 Like
3

So cool! @sam8 - Can we all/revoke other people’s mics/cams?

4

Hey @sam8

Few suggestions/clarification if you don’t mind

  • How can we identify if the current user joins a room? Can we get an exposed state for a list of current participants?
  • Can we have the record this chat as a dynamic value?
  • Can we expose other stats to the element like current room name, being recorded, video on/off, mic on/off, shared screen yes/no, host name (so we know who is the host), list of participants, who is sharing a screen
  • Also mute does not seem to work

I think adding these states will help us a lot on creating better apps

Thanks

5 Likes
5

Serious improvements to people that use Jitsi but it’s paid… :expressionless:
There’s no way to compete with other free platforms such as Google Hangouts and Zoom (even with the recent scandal).

1 Like
6

I was expecting a bubble only solution for webrtc. Twilio is expensive.

6 Likes
7

Guys I think it is about time to support webrtc or websocket natively within bubble. this does not require an external API. I am hiring someone to do this.

7 Likes
8

I think the room idea is great

1 Like
9

@sam8 Great setup instructions. I was up and running in minutes!

I’d like to set up an app similar to appear.in (if you recall) where I create a “page” where everyone that goes into the URL automatically joins the room.

Is there a way to automatically “Create the room” when I create the new page? Meaning, once I hop into the URL, the video call room is already created and all I do is join it?

Hope this is clear.

EDIT: I could setup a workflow where the room is created when page is loaded, but this would mean everyone that loads the page would create the room. Would this create a bunch of rooms, or would they just join the room if the room is already created?

10

Add a condition on that workflow that searches for a room with a unique ID, and if it has been created you can join if it hasn’t create.

11

Ah! I see what you did there…
Page load —> Create a thing “rooms” —> Start a room with ID of step 2

Condition: only when room with ID isn’t yet been created

At first I thought you could maybe pull a list of rooms that have been created under your Twillio user, and find if it had been created.
——

Interestingly enough, I tested using two computers just “Create room” on page load. It did indeed join the room instead of create another one.

:pray:

12

Is there a reference for how to use the plugin? It’s not very intuitive. Or do you have a working editor example that we can look at?

Also, is there really only 50 participants allowed? Can we somehow increase this to over 100?

Thanks! :slight_smile:

13

Also, the video is off to one side (not centered), not sure why. Is that how everyone else is seeing it too?

14

Interesting idea and great video quality.

Thanks for taking the first step and putting something out there. As a business that does a lot of video streaming and actually built our own private Agora plugin for 1-to-many broadcasting and recording, here are a few thoughts:

  1. This is only width responsive. If you made it width and height responsive and lock the aspect ratio (similar to the option in Shapes) this would look better across multiple screen sizes. As is, if we wanted to build just one of these into a page that works from phone to desktop, we’d be forced to offer our viewers one of two options: (i) a tiny square in a huge page at the correct aspect ratio or (ii) a wide, short band of video across their page.

  2. Which brings me to my second point: controls. Nearly every market leading video chat and webconferencing interface has standard controls (join/leave, mute mic, block video) embedded in the video chat itself. The Zeroqode Agora app allows users to switch those off and build their own if they’d like, which could be an idea here. The reason this is important is that when developers do make this height and width responsive (so we don’t have to build multiple for multiple screen sizes), any controls we try to make float over the chat wouldn’t be anchored unless we default to 100vh and anchor the controls to the bottom of the page. I get wanting to give people flexibility to customize these, but you can give them the chance to hide the standard UI as an option and for the people who are okay with the standard design you’d save people a lot of time building the exact same six standard workflows (join room, leave room, mute mic, unmute mic, show video, hide video) just to test the plugin.

Obviously if I’ve missed something and you’ve built these in already feel free to point out how we enable them.

4 Likes
15

What, specifically, is better than Jitsi? I’m genuinely curious.

1 Like
16

You have fully control of the video conference using Bubble elements

17

So, up and running with this thing pretty quick.

Problem is, how do you get it to fit the various video windows within the VideoChat element? It seems to just force a chat window size and then clips whatever doesn’t fit within the VideoChat element.

Confused, please help!

18

As a follow-on, when preview mode is checked the preview resizes the camera video just fine.

When joining a meeting, the windows never resize. They just clip.

19

Hey @ALB, could you send me a link to the app or a video where you’re seeing an example of this in a bug report? I’m having a hard time getting the error to reproduce on my end and definitely want to get to the bottom of it. I would love to help you and any others get unblocked!

1 Like
20

Can anyone write a short manual how to use it?

I created all the buttons but when I enter a preview mode I can’t do much. I can create and end a room but there is no video (I know that it is created because It’s in Twilio’s log). Join, leave, mute, unmute and rest of the buttons don’t work, when I click them nothing happens.

1 Like