WebRTC Video Chat Plugins - Need Help

Has anyone had any luck with any of these plugins? I’ve tried every which way I can think of to get a video chat working but the closest I get is seeing only myself. Thanks!


3 Likes

+1 @toby.felgenner might be able to help us!

Hey, how were you able to see yourself. I can’t even get any of it to work. Are you trying to create a livestream

No I was trying to create a video chat for consulting. I could only see myself on my own screen though, so without being able to connect to a stream I wouldn’t have been able to broadcast it to anyone else. I think in order for these plugins to really work you need a Wowza subscription, and even then I’m not sure if they are successful.

For anyone else looking for a video chat solution within Bubble, the easiest I’ve found so far is Gruveo. I had high hopes for OpenTok/TokBox as I’ve used them before on another platform, but configuring a plugin for them requires some serious javascript coding. That seems to be the biggest hurdle with video chat… the api needs to be able to communicate/control aspects of the browser and that requires some custom coding.

1 Like

What all were you able to do with Gruveo? Looking to use it myself.

Thanks!

I haven’t used it in production yet, but integrating in development mode was super easy actually. They have an embed code option you copy/paste in an html element. There’s a line of code in there that is the “session’s” unique id. All you have to do is make that line dynamic and it can be whatever you want.

For a really basic example…

  1. Create a “session” data type and include participants (users), start date/time, and end date/time. 2. Paste the embed code into an html element on a page. Put it in a group titled "Group Video Chat,"then set its parent group’s data type to “session.”
  2. Back in the html element, swap out the embed code’s default id with “parent’s session’s unique id.”
  3. To test: Add a repeating group to the page with data type = “session” and data source = do a search for “sessions” filtered; participant_ids contains current user. Draw a group in the RG’s cell and display the current cell’s session in the html element’s (embed) parent group. Add some sessions and make at least yourself a participant. When you click on one of them in the RG it should populate in the group. From there you can get fancy with it and show/hide the chat based on date/time etc. (Tip: If you put it in a popup it doesn’t turn off when you exit the popup.)

Of course, the embed method is not quite as customizable as the more integrated route, and I would do some research if you have regulations to follow like HIPAA or something, but it suits my needs just fine. They have it in a demo page on their site: https://about.gruveo.com/developers/embed-api/. (Update, it looks like someone bought someone because they’re linking that page to here now: https://videola.io/. I’m not sure how/if that affects the embed code).

3 Likes

TokBox also has embeds now that are pretty simple to use. They’re very basic though (just 1:1 calls, limited or no UI customization, etc.). Anything custom with them usually requires custom code.

We build our own video system on top of Tokbox for this reason. Needed a lot more control than any of the embeds provide.

Do their embeds work on iOS? Really the only reason I had to go with Gruveo was because Tokbox makes you use SDK to go mobile, so if their embeds can do that now that would be awesome.

No - TokBox doesn’t work on iOS without building a native app yourself (not cheap/easy).

How does Gruveo manage iOS?

Actually, really really good news. They must have added this recently… I just video chatted my iPhone from my Mac successfully via the the embed’s demo page. They now have a javascript embed option that is the only way to get it working on iOS Safari. Trying it out now.

https://tokbox.com/developer/embeds/

2 Likes

Just talked with a WebRTC specialist I know. Sounds like the word on the street is that Tokbox iOS has been enabled for a while but it’s “not ready for prime time” yet. I take this to mean that it probably works much of the time, but has connection and quality problems in a way that would prevent it from being used for a large, production grade application.

I would assume they’ll continue to work out the kinks so it’s probably good to use for most companies still getting off the ground. Just passing along this info in case it’s helpful.

1 Like

Should we sponsor standard webrtc peer to peer stuff as a plugin ? not just video but voice and shared screens, boards chat any one in?

1 Like

That makes sense. Thanks for sharing!

Sridharan might have some insight on the complexity of building a plugin. I believe he looked into it for TokBox at one point but found it more efficient to build out a custom solution (using TokBox) outside of Bubble. Not sure if that would apply to all WebRTC or just TokBox. Either way, it’s not cheap. You may want to try looking at what he’s built and see if you can work something out with him.

From my basic research, it seems like Twilio Video is WebRTC based. Has anyone attempted using Twilio for this type of service? I am keen on doing something similar, but it is over my head in terms of technical ability. @sridharan.s

We haven’t tried Twilio for video. I used them for audio/telephony in the past, but their WebRTC services are newer.

For our product, video is a core component of our product so we want the best quality video possible. The general consensus is that Zoom is great (but their 3rd party white-labeling prices are beyond excessive - costs something like $2/ per person per hour) and that TokBox is really good (and much more affordable).

There are many other services, but many of them have drawbacks if your goal is to provide the best video quality possible. For example, many services struggle with connecting people behind a firewall. That said, if video is a non-core feature of your product then it very well make sense to spend less money for a system that isn’t as robust.

Hope this helps.

1 Like

Continuing the back and forth here. It seems like Tokbox could be a good option for simple P2P Video. However, would anyone have any idea on how to generate automatically Unique Room IDs? It is possible according to them, see below…

" if you have an application that needs to dynamically connect individuals in private video chat rooms (for example a doctor and patient), your server-side application could generate unique “room” IDs for each meeting. You could then construct a video chat embed iframe or script snippet using that ID as the room parameter — the users would then load the dynamically created embed in their browser, joining the same room as any other users with the same room ID."

1 Like

Yep! “Server-side app” = Bubble. So you would replace the embed code’s “room id” with the parent group’s session’s unique id.

More Detailed Explanation:
Any “thing” that is saved in your app as a data type is automatically generated a unique id by Bubble. Create a data type for your sessions and add the fields you need (start, end, participants, etc.). Put your embed code in a group (or page) of that type. In the embed code, look for and replace the “room id” with “parent group’s session’s unique id.” Now you can do something like list sessions in a repeating group ["do a search for sessions, filtered;participants contains current user, filtered;end date > current date/time, sorted;created yes) with a button that has the workflow “display current cell’s session in Group Embed.”

2 Likes

I’m thinking of using a video chat service. Does the embed code get put into the header of the page?

@willtaylordesign
I would like to get the TokBox widget only on a specific page.
I have copy/paste it wihtin an HTML element but nothing happened.
Can you explain further how you did it ?
Cheers