Templates Plugins Courses

Need Help with Agora Setup in Bubble App

I went to your website recently and downloaded the Agora Web RTC plug-in. I have a Bubble app and tried to replicate the same workflow in the live demo Bubble app. When I follow the same workflow steps and put my Agora ID (not using any certificate), the plugin doesn’t show video and I can’t get it to work.

Can you help point me to step-by-step instructions for how to configure the Agora plug-in in Bubble so I am able to re-create the live demo version?

Hello @unscripted.app

Thx for reaching out!

Please do follow out instructions setup: https://docs.zeroqode.com/plugins/agora-api-connector-plugin
See the demo setup as well.
Would recommend you, to create a new application in Agora dashboard to get new key and uninstall and install the plugin from the app, place the new keys in the settings, follow the Bubble setup installation steps from documentation and give it a try.
Thanks. :pray:

Alternatively, share with us more details regarding your application, like setup workflow, errors you’re receiving, console.logs , steps to reproduce the issue etc which could help us better.


See the attached image. Thanks for responding so quickly Dumitru! Great service.

I am struggling to find where to edit the field so I can “Assign in the ID attribute field for the above elements (Step 2)” . I don’t see a field when I add two shapes or even two containers, that I can then edit the ID. And I don’t see any IDs that say local and remote. Do you know the micro steps needed to complete this step?

Hi @unscripted.app,

Let me jump in here and help you. After placing the Agora Connector element on page, you can place 2 Shape elements for instance, and assign to each of them the respective ID for Local and Remote connections. Here is a screenshot to showcase an example:

To find the ID attribute of the element, just scroll down till the end of the window. For Local shape you assign the agora-local ID, and for the second Remote one you assign agora-remote ID, respectively.


Thanks I was able to work it. Just to confirm the “agora-local” and “agora-remote” IDs are hard coded right? They are not dynamically pulled into the ID Attribute field?

Also, how can I set it up for 5-10 potential users to be in the same room and see all the video feeds? I tried making new shapes with “agora-remote” but all it did was direct all the 5 user’s video feeds to one shape and cut that shape into smaller video feeds.

Hi @unscripted.app, yes, these IDs are hard-coded and it is mandatory to keep this way. They are not automatically assigned, it is required to do it manually. However, they can be dynamically inserted into ID Attribute if you will, but just make sure they are transferred strictly as agora-local and agora-remote.

Unfortunately, it is not possible for users to join in separate remote shapes.

Hope it helps.

Have you seen an error like this before? Dowloaded plugin and followed setup…keep getting this error on preview of page The plugin 1566995240236x776771559460700200_current could not be loaded. Please check it exists.

Hi, @jrmayhew!

Thanks for reaching out!

Could you please reinstall the plugin, refresh your app and give it a try? Also, please make sure that you have set up the plugin properly according to the docs. Here is the doc for Agora API Connector Plugin : https://docs.zeroqode.com/plugins/agora-api-connector-plugin. And for Agora Streaming Component: https://docs.zeroqode.com/plugins/agora-api-connector-plugin/agora-streaming-component.

Hope this helps!
Best, Julia.

Thanks… I didn’t realize there were really two setups in one :slight_smile: Also however I used the demo app elements for entering a room and selecting signup that caused the error maybe I missed some items but doing just the two elements (with ID’s) worked

Hi, @jrmayhew!

Glad to hear that you have managed to make it work. :slightly_smiling_face: Indeed, on the Live Demo are presented two Agora components, first for the conference room and the second for streaming. If you have any further questions, please feel free to contact us!

If you like our plugin you can rate it by going to Plugins tab in Bubble editor. :slightly_smiling_face:Find the plugin by name and it give it as many stars as it deserves. :slightly_smiling_face:

The more feedback we get, the more motivated we are to make things better in Bubble. :slightly_smiling_face:

Best, Julia.

Ok, so, I finished setting this up for streamiung use, including the abilty to record the stream. No errors, and it looks like everything is working… now how do i find the recordings on S3, nothing shows in my bucket? Is there a way to verify the recordings get put into my bucket from agora?

Also, is there a way to record as a single file so I don’t need to put the two files back together?

ok i configured the stop recording and it throws a 404 error when triggered so something is wrong.

DO THERE NEED TO BE VIEWERS TO INTIATE RECORDING? I see in the demo recording is not available without viewers… I want live streams recorded even if there are no viewers… possible?

the response just has the resourceID and sID in it… i have no idea what the problem is. I added support as a collaborator. please help, im stuck at this point.

Hi, @robert3!

Thanks for reaching out!

Yes, there is a way to check if recordings get put into your bucket. First of all, please recheck your settings with the Live Demo page if everything is configured properly.

Secondly, you are able to verify if everything is set correctly through the plugin states- Status. Please see screenshot as a reference.

Agora returns status 5 when the file is uploaded and recording is running.

Yes, that’s correct, whenever there are no viewers the recordings are not available. It is informed on the Live page. I’m afraid there is no way to change that because it is related to Agora requirements not to the plugin.

Could you please give it another try according to the newly provided information? :pray:

Looking forward to hearing from you!

Best, Julia.

@julia.minacova I figured out that the token used to initiate ‘start cloud recording’ had to be one hardcoded - however your documentation has us getting a temp token from agora console - which says will expire in a day or so. How do I set it up so I don’t have to hardcode this every day or so. I tried generating another token through the workflows but it didn’t work.

If I use a dynamically generated token I get this error - the same one as before.

Any idea if there is a way to have this set for each session?

And how do I get the filename of the recorded file to store in bubble to associate it with that session?

Also, on a side note - there is a bad echo when streaming - both from the laptop and a cell phone.

And - on agora it shows usage as many more minutes of audio vs video - any idea why?

I am wanting all streams automatically recorded even before anyone joins them, so I will need to find a way to have a fake viewer join automatically (maybe a system viewer?) and then initiate recording automatically as well - to get around the limitation of agora… thoughts on this method?

Hi, @robert3!

So, the Token which is used for “Strat cloud recording” should be taken from Agora console and it’s available about 1 day, and unfortunately, it is impossible to generate dynamically through the workflow. This token you indicate in the “Agora Start cloud recording” action- > field “body token

The filename is inserted in the field “(body)fileName_1” manually or dynamically is populating, for instance, from the input.

So, yes, if you try to test it at the same time from the phone and desktop that are next to each other, an echo may appear. But if the two devices are not close to each other, then the echo will not appear.

Unfortunately, I didn’t get it. Could you please clarify what exactly did you mean here?

Actually, Agora itself doesn’t allow to implement this kind of feature. So, I’m afraid it is not possible. Apologies for the inconvenience. :pray:

Best, Julia.

thanks for your plugin. Works fine.
Actually I have an issue with ios audio. I see the video but i cant hear. Any Idea?
Thanks FLo

Hi, @mrkabelbruch!

Could you please provide a bit more details like which Agora component do you use: Conference or streaming, version of iOS/browser and device, steps to reproduce them to help you better?

Best, Julia

THX @julia.minacova
It is working fine now.
But, the plugin always wants to have access to camera and microphone. Even for the viewer. I cant use the plugin in a app with that. I am using the streaming component. I want to stream to crowd with the app. one guy streaming. a lot people watching.
Do you have a idea for that?

digital hug, FLo

Hi, @mrkabelbruch!

Glad to hear that it works fine for you :slightly_smiling_face:

So, we added an option - a pop-up that asks the user to turn on the microphone, because there were problems with iOS namely the video was on, but there was no sound. This issue was related to the iOS browser policy update. Currently, all users allow microphone access for sound to work.

Best, Julia.