Add audio and video to your Bubble apps with Daily

[lola]

Hi all!

We just released a video tutorial on using the Daily video conferencing and chat plugin accompanying the existing blog post.

If you’re looking to add audio and video to your Bubble apps, it’s worth a watch. If anyone has any questions or needs any support using the plugin feel free to post a message in this thread, check out some of the conversations we’ve had in the original announcement forum post, or send me a PM! Happy to help or answer any questions.

[bonabanasuuna]

Hey am a new user of bubble can. U help me out with some stuff

[lola]

Hey @bonabanasuuna! What do you need help with?

[guy.blueoceans]

I’m about to do a deep dive of video call options / Daily.co’s specifically. My use case is focused on 2 main features:

A) primarily video based one-to-one video chats (also audio chats in app) ranging from 15mins to 75mins

and

B) pre-recorded 1 way video/audio messages. I want to note Feature B is not meant to be a instant video messaging feature with many replies. Rather I envision a scenario where a User Student can pre-record a 30sec-120sec video/audio question for their Teacher. And the Teacher can view/listen that question later that day/next day & then respond with a reply audio/video message that would likely range from 2min-5mins.

Few questions with above in mind:

1. Daily can clearly provide on Feature A. Do you see any limitations/pitfalls based on what I described for Feature A? Please confirm I can modify the expiration time limit for video chat (your youtube tutorial suggests I can)?

2. Would I be able to leverage Daily functionalities for Feature B as I’ve described it? If I understand your pricing doc correctly then recording is Scale plan only? That may be a non-starter to me at launch ($200/mth!!!)…

3. The 10min ‘quick huddle’ chat confuses me. Is the 10mins an arbitrary # that Daily chose or is something that I can preset to any # of my choosing?

4. What is the difference between Video chat & Webinar?

5. Can a video chat/webinar’s link be generated 1 week in advance (such as upon initial scheduling) & emailed to participants before?

6. see pic when I reviewed the webinar editor demo app…I think daily needs to adjust admin settings with Bubble
   

   

Hopefully my questions are clear. Let me know if I can clarify anything! I’m really hoping your plugin/offerings will be exactly what I need.

[lola]

Thanks for reaching out @guy.blueoceans ! Here are some answers

1. Yep you can use daily.co video chats for any time length (with the free plan you can also have up to 200 concurrent users). There’s not a restriction for the length of the call, it can be 15 min or 75 min or no predefined expiration at all!

2. Users on the scale plan can record video calls, which is more suited if you want to save a live conversation. If all you need is to record a message, you might want to check out ziggeo for feature B.

3. Yep, it’s arbitrary you can choose whichever expiration you’d like or not set one at all!

4. In a video chat all users who join a call will be able to share audio and video. In a webinar, only users with an owner meeting token will be able share audio and video (anyone else in the call will be able to contribute to the text chat but won’t be allowed to share audio and visual).

5. Absolutely! Video links can be generated in advance and emailed. You don’t have to create the links right before the call.

6. Looks like that is a much older demo app. This is the most recent one. I cleared the DB for the old one too if you’d also still like to try that one out.

[guy.blueoceans]

whoa bravo @lola for such a fast response! Thank you for providing clarity on my questions. Very helpful. I will now have to absorb all my available options & go deeper on my research/testing.

[lola]

Not a problem! Feel free to PM me if you have any questions about setup. Happy to help

[lola]

@hahz5d I’m not familiar with huddle but if you drop the link to the service and ask your question, I can do my best!

[adam25]

I have made some great progress using the daily plugin. I have a question how do you initialise/make the Daily Custom Video Call element work? Is there any benefit to using it, especially during MVP phase?

The second question the Daily Events element is just a listener element right? So we could run workflows as its state changes?

Many thanks

[lola]

Hi @adam25 !

Thanks for reaching out, glad you’re making progress with the plugin. The Daily Custom Video element is a bit deprecated and isn’t compatible with the new engine. You’re better of using the join call element with the custom position if you need it to be in a particular place.

Here’s a demo editor of how to use that. You’ll set an id of the group where you want the call element to display and then it will display there.

The Daily events element is a listener, once you use it you’ll have access to a few events like left-meeting, joined-meeting etc to run different workflows when those things occur. To start accessing events you just need to do two things 1)Add the events element somewhere on the page, I usually put those in a popup that doesn’t trigger and 2) add the Daily begin event listening action after a user joins a room

Hope this helps!

Lola

[Daniel808]

Hello @ lola,
first of all, I am a Developer about to integrate the Daily Plugin in Bubble. I need a high level of customization (fully customizable UI, 3 streams per participant, etc…). So I think we need to use the call object from daily. As i have no clue about Bubble, I have some questions on the implementation steps.

1. Is it possible to run a React app inside Bubble and make use of the Daily React Hooks?
   if not:
2. Is forking the Daily Video Chat Plugin in Bubble the way to go if we need a high degree of customization? I read in a thread, it is outdated?
3. Do we set up a lot of Actions or add an Element in the Plugin which includes Actions itself
4. Do we add one Iframe on the page or using the element? How is the approach?

Currently, I have a pretty vague idea on Bubble, the workflow and the possibilities it offers. I hope you can point me in the right direction.

Thank you for your expertise!
Best
Daniel

[adam25]

Thank you Lola, yes this helps a lot. Custom position works great.

[lola]

Hi @Daniel808 !

Some answers below~

1. Is it possible to run a React app inside Bubble and make use of the Daily React Hooks? if not:

   1. I’m not sure, and i haven’t tried it myself. This forum post seems to think it’s possible but it’s not something I have tried myself

2. Is forking the Daily Video Chat Plugin in Bubble the way to go if we need a high degree of customization? I read in a thread, it is outdated?

   1. Forking the plugin won’t help much since the plugin is based on Daily prebuilt but here is a guide on creating custom interfaces with Daily’s call object mode. It has a few demo apps that can help give you an idea on implementation and then you’d need to translate all that to a Bubble plugin. Daily JS for the methods would be helpful as well especially if you don’t end up using react.

   But you definitely don’t need Bubble to work with Daily. If you’re familiar with another framework it might be better to use that instead. Here’s a list of other frameworks that you can use with Daily with tutorials.

3. Do we set up a lot of Actions or add an Element in the Plugin which includes Actions itself

   1. It’s whatever you desire in terms of implementation. Having actions not linked to an element enables you to use them even if the element isn’t present on the page (ie if you want to create a room you may not want to have your video call element on the page in order for you to use the action to create a room)

4. Do we add one Iframe on the page or using the element? How is the approach?

   1. Up to you either would work but i’d probably opt for an element. The iframe code Daily provides for quick setup is exclusively for Daily Prebuilt but if you want to create your custom element with some other framework and then wrap it into an Iframe for Bubble you could do that.

[ankur1]

@Daniel808

I recently added the Daily plugin to the Bubble app, which works smoothly. Integrated Daily mainly for video calls and recording calls.

Let me try to answer your queries-

1. I don’t think so you can run react app inside the Bubble apart from integrating via Iframe.

2. You can’t fork the plugin, but you can copy it since this is an open-source plugin (I will say don’t do it, but if you want to fork, keep it private. Don’t put it on the plugin store)

3. You don’t need to add much action to integrate the daily video call.

4. You don’t include the iframe. Instead, you add the group (that is “div” section).

Ankur@ Nocodetalks
Looking for a Bubble Coach? Check out here

[Daniel808]

Hey Lola,

thank you for clarification!

[clem]

Hey Lola,

I would like to use Daily and Bubble to create a webinar solution.
The principle: bring together a few speakers in a video meeting and stream the video in RTMP to an audience.

So far I have been able to implement this solution and it works.

I would now like to customize the aspect of the video that is broadcast, the background, the layout of the videos and screen sharing, lower third etc.

I have the impression that VCS is made for that, is it compatible with bubble? Is there another way to proceed?

Thanks a lot,
Clement

[lola]

Hi @clem !

Thanks for reaching out! For a fully custom display you’ll actually want to check out Daily’s guide for custom chat interfaces which is possible in Bubble with custom code. The Daily plugin currently only supports Daily’s prebuilt layout

Lola

[clem]

Hi @lola,

Thanks for the quick reply !

I understand that what I want to do is not possible with the plugin.

Can you tell me little bit more about the way to integrate custum chat interface with Bubble ? It’s with the API function ? Or with an HTML input ?

will these actions modify the rendering of the video broadcast in RTMP?

Many Thanks,
Clément

[lola]

Hey @clem! Thanks for reaching out!

For the interface, you could use an HTML input to put the interface, some users have done that to customize prebuilt in the past, but the option that will give you the most flexibility in Bubble is creating a custom element via a plugin. You can fork the daily plugin or explore the code to get started with a custom implementation and then use some of the demo repos from the guide to get started.

[clem]

Hey Lola,

Thank you !

Is going with a custom element via a plugin or via API offer the same possibilities or on is better over the other ?

Many thanks,
Clément