[New Free Plugin] Daily Video Chat

Hi @lola! How can I fix the error in new engine?
Duplicate DailyIframe instances are not allowed
at new ee (https://unpkg.com/@daily-co/daily-js:1:46372)
at Function.value (https://unpkg.com/@daily-co/daily-js:1:104951)

I use 1 element DailyCustiomVideoCall on the page in the simple group

Hey @aqqura

The custom element actually predates the new engine and isn’t compatible. For a replacement for custom-sized video calls using the new responsive engine, you can use the daily-join room action with custom positioning, which is fully compatible.

Here’s how that works:

With the custom position, you need to create a group that you’d like the video to appear over. I usually just draw a group on the page of the size, position, and width and then add the element ID to the group.

Screenshot 2022-12-19 at 1.59.49 PM.png

You’ll also need to add the element id when you join a room as well.
Screenshot 2023-05-22 at 12.31.49 AM.png

Here’s a demo of an editor and what it looks like when displayed. Also here’s an example with the new responsive engine.

Then when you join a room it should render over whichever group you’d like it to overlay.

Lola

Hey @lola, any suggestions on where to start on using Color Themes with the Prebuilt Plugin, or is this only available via the SDK?


@rob.lewis you can set it right in the Daily - join room action. If you scroll you’ll see a “color theme” section and can set the color themes from there.

1 Like

Thanks. I knew about that, but was looking at the possibility of using Light/Dark themes, etc. However, looking again I realized the color values can be dynamic values. That should work great. Thanks again!!

1 Like

hey @lola ,

Great plugin. I tried it and got some errors. I’m not sure if my workflows are wrong as I followed your pathway (you showed above). My daily profile is completely new to start with integrations at my end. I added the API and set up the workflows:

I got this error for the workflow

video-error

What is wrong? How do I solve this?

@insalman360 Can you share a screenshot of your “create room” action? What settings do you have? The error typically occurs if there is a parameter that isn’t quite valid but if you share a screenshot of your settings it’ll be easy to spot!

Lola

Hi Lola let me first say you’re an absolute dear for helping everyone with their issues. I do have one I’m afraid to admit and haven’t been able to solve. When I create and join a room there’s a blank screen, this is on mobile, but when you go to settings and click from each setting over to audio visual the video works instant and perfectly but when I click off settings nothing. Any ideas?

1 Like

hey @shawnmaguire444 thanks for checking out the plugin!

Would you mind sharing your create and join room settings? You can DM me with a screenshot of that or with a link to your editor.

Blank screens are possible in a few scenarios (trying to join an expired room, a private room without an appropriate token, etc)

Depending on what your settings are I can take a look!

Lola

hey @lola I am using a combination calendar scheduling system. POV: a user creates a calendar event and can add a meeting room to that event instantly (similar to Google Calendar). sess image below:

When anyone wants to join the room, the event data is sent to the meeting room page, and searches for the room associated with this event from the page URL. See image below:

sessions

After detecting the specific event and the associated meeting room credentials.
The current meeting joining workflow goes as follows (the previous one is the one you replied to above this message):

I want to use 2 meeting views one a standard main and another a floating mini view when the page is rolled down to access other items on the page. Now in the current workflow, I get this error:

video-error

I tried to replicate your custom-position, yet the video is not showing in the empty group specified with an ID and called in the ‘Daily-join room’ call

1 Like

Hey @insalman360!

That’s quite the set up! There are a few things here, so it’s probably easier for you to DM me with your editor URL or invite me as a collaborator so I can look at your setup.

Here’s an overview of a few points from the screenshot.

  1. you’re joining a private room but your meeting token field is empty. You’ll need to add the meeting token to the room if you want the user to automatically be able to join (otherwise, someone already in the room will have to let them in). If you don’t want a meeting token you can change the type to public when creating the room.

  2. The error is with the parameters in the create room action. I only see up to the videoprocessing UI in the screenshot you shared (not the whole list) but if you log into your Daily dashboard and look at the failed create room request (the status will be in red) you’ll see exactly what’s invalid about it.

If you don’t see the failed room request at all that means there’s an issue with your authentication. Double-check your API key and ensure that you have Bearer in front. It should look like Bearer 7998q39q384342 where 7998q39q384342 is your API key.

  1. I’d also check that none of the variables are null, if the URL doesn’t exist it won’t join the room. Also for the custom position, you need to specify the ID in two places the element ID for joining the room

and the group

  1. Also a heads up - you can’t be in multiple Daily calls on the same page at the same time. Not sure if that’s what you meant with the two views on the page (one scrolling, one static). You’ll get an error when joining the second room if you are already in a video. Enable PIPUI set to true will allow the user to pop out the video while they scroll the app so that’s the recommended approach.

That’s just an overview but there are probably other implementation things so feel free to send me the editor URL and I can check it out further!

Thanks, @lola for the detailed response. A little more info as a reply:

  1. I did use a meeting token previously while everything was the same, I may have misunderstood and removed it after I saw your editor for the custom-position app. I added it now.

  2. All of my created meetings using the plugin returned a response of 200.

  3. To my check none of the variables are empty or null.

Lastly, as you read the above, I sent you a DM

1 Like

Just responded to your DM!

Lola

Hi Lola, I am having problems with the audio only function. Audio is heard when the user enters a room automatically but once i click toggle mic to mute and unmute it does not work beyond that point.

Hey @eddiem! The audio-only features currently requires a lot of setup in Bubble. The plugin actions don’t come with any UI or elements.

Check out this demo editor and live demo featuring active speaker mode and mic toggling for guidance on how to work with the audio only mode.

For mic toggling you’ll want to keep in mind a few things:

  • Users can only control their own mic.
  • The toggle action inversely affects the current audio state without altering the UI or other elements. You’ll need to incorporate any additional UI elements or states in Bubble if you’d like to show a muted or unmuted state.
  • To ensure you have the right state you can have users enter with audio muted (allowing toggling to activate it). To do so, you’ll need to set up your meeting tokens accordingly.

@lola
I want to be able to rate limit how many minutes/hours people use of daily.co in my app.
I also want to keep stats for them. As in how many hours they’ve used daily.co video monthly.
Have you seen this before?
I can’t come up with a way to accomplish this.

Thank you,

1 Like

Hey, @speedsailer1234!

The plugin doesn’t support rate limiting or meeting stats. The closest thing you could try is outside of the plugin.

You could use the API connector to fetch meeting durations from the /meetings endpoint. This would also require tracking which rooms users are joining and making an API call with the API connector to the meeting endpoints.

Here’s the API doc for reference: Daily.co API!

Hi Lola

It is possible to implement with this plugin video calls that when they start in a mobile start in full screen mode in portrait mode (“vertical”).

I appreciate your comments.

Hey @luis4! Daily prebuilt defaults to active speaker mode when on mobile, currently that orientation can’t be changed. Any layout can be made with a custom interface but that requires code.

Lola

Hey everyone,

I appreciate the ongoing support for this plugin. A common topic has been around putting video calls in a custom position. Before Bubble’s new responsive engine, there was a legacy element you could draw on the page but that is no longer compatible.

For those needing custom video call positioning, you can opt for the “Daily-join room” element as an alternative. Here’s how to set it up:

  1. Use the “Daily join room” action. For the room style, select “custom position” and specify the element ID for the group where the call should appear. This ensures the video call overlays correctly on the designated group.

  1. Double-check that the element ID matches the group intended for the call overlay.

If your settings don’t show the option for an ID attribute, navigate to Settings > General > “Expose the option to add an ID attribute to HTML elements”.

  1. That’s all! For a practical demonstration, check out the editor view and live display.