Fully Customizable Video Calling

[tahycoon]

Hello Bubblers,

I am looking for a way to build a feature in my app where users can watch movies in a synchronized way with video and audio calling (and chat!).

Of course, there is no one way to do all this (unless if you know one!), so I thought I’d break my synchronized video and my video calling features which is today’s question

What I need:

1. A way to have the users video call within my app without referring them to a 3’rd party page.
2. A way to drop my video element at any place on my page (so no prebuilt templates)
3. Has to have video and audio calling.

I already built a chat functionally natively in my app and I would like to simply just connect an API or a plugin and drop my current party’s users’ video calls about here:

I explored Daily.co plugin by @lola and she has top-tier support, however, I don’t think it’s possible to implement this plugin in my app since it operates on prebuilt templates which even if customized would need to have my own app element in there (such as the built-in invite feature I built and other things I built in my app).

I also checked out the Agora plugin by Zeroqode but as far as I know, many of its functionalities are depreciated, it doesn’t support audio calls, and there are many bugs
I like the way they have the custom elements where you can place anywhere in your app and then connect it to Agora, if only Daily had the same!
I actually prefer to just learn the documentation and connect my app to Agora API manually rather than the Agora plugin, so if you think you can help I’d appreciate it since there are 0 tutorials about it without a plugin.

Do you guys know any simple service I can connect their API to my app, and if so are there any tutorials? What about other affordable plugins?
It seems like there are no tutorials on the internet about video calling in Bubble excluding daily and agora plugins.

Any help would be appreciated since I am completely lost… and I’m facing some deadlines

[lola]

@tahycoon Ah yes the Daily plugin uses Daily Prebuilt so the video interface isn’t fully customizable but you can disable a few of the UI elements and use any of the other elements you’re using in Bubble alongside the call and if you give the plugin an element ID it will overlay wherever you’d like on the page.

Here’s an example editor and demo with some more of the UI elements disabled (I kept the leave button but that can be disabled too)

And then with meeting events, you could have any other elements appear when the user joins the call and things like the colors and accents are also customizable from the “Daily - join room” action.

If you can code there’s always the options of a completely custom interface (not using Daily prebuilt) with Daily’s SDKs but that’s technical.

But, best of luck with your project!

[tahycoon]

Hey Lola!
I ended up using the Daily plugin
I love the functionalities of it so thank you so much for it! I really recommend people to look more into it!

For now I managed to give a group an ID and disable all additional features to get as close as possible to having just the camera frames, I couldn’t figure out how to remove the turn of camera and mic buttons and have my own ones tho.

But I wanted to ask you a question, is it possible to resize the camera frames? For example, this’s how it looks in my app:

I was wondering if it’s possible to have these frame boxes equal by any chance?
Something like this:

I love that you can scroll through the cameras and see other members, it feels like a repeating group! But if you know ANY way to resize the camera frames that would be of great help to me!

Thank you again for the plugin

[lola]

@tahycoon Glad it’s manageable!

One thing to try is grid mode, and then setting the maximum and minimum tiles to two it should then stack vertically on small screens and then side by side when there is enough space

Here are what the settings would look like on the “Daily - join room” action

active speaker mode should be “no” (enabling grid mode)
and then minimum and maximum tiles can be 2

[tahycoon]

Hey Lola thank you for the reply!

I tried what you suggested but it still shows cameras frames bigger than one another.
I noticed that when it’s two users (me and another person), the current user’s camera frame is much smaller than the other.

The same thing when a phone camera and a laptop camera are on the same page. Correct me if I’m wrong, but there isn’t a way to zoom in on the vertical camera to make it fit an equal square like its peers? Sort of like the zoom option on images in Bubble.

[lola]

@tahycoon Oh I see what you’re asking. The actual aspect ratio within the tile isn’t able to be changed with the prebuilt interface.

Lola