Agora Plugin -Users Can Only See Their Own Camera

[tahycoon]

Hello @zeroqode2
First, thank you for the wonderful plugin, ya’ll did an amazing job, keep it up!

I read all the documentation and the two demo pages/editors you provided along with the YouTube series and the information there is gold!

However, I am experiencing an issue that even with my knowledge of the docs and tutorials I couldn’t figure out the solution to, I was hoping if you could help me by any chance.

Basically, only the current user can see their own camera (they can still hear other users),

As in the tutorials, I placed the AgoraRTC element and a group with an HTML ID to display the audience.
Here is my elements + the AgoraRTC settings (I’ve also tried audience and host settings enabled/disabled and still have the same issue):

And here’s my group with the id:

Here are my workflows on this page:

And here is my workflow setting up the party’s agora’s name’s data field (I figured a way to automatically name my agora conference by setting it to the host unique ID, I tried other ways but this seems good for my use case.):

So in summary the process is:
User chooses a movie and clicks start → a party is created and a data field named agora_name is set up to the host ID → user is taken to the watch party page where there is a workflow (on page load) which is Join AgoraRTC and provide it with the party agora_name.

I believe I don’t have any issues on my set up according to the docs/tutorials, but here is what I get when two users are on the same page:

Note: that the other user only sees their camera, and the current user only sees their camera as well. However, the mics are working for both!

In other words, each user only sees their own camera (but they can hear other users).
I was wondering what is the issue and if there is a way to fix this? Am I missing something?

Any help would be appreciated

[tahycoon]

Hello just following up

I tried to set up a Join Call button and avoid the on page load, and set up the agora link to the party ID instead, I played with the HTML ID and tried the Host and Audience settings, and made sure there are no background.

Still same issue

[dorel]

Hello @tahycoon,

Thank you for your kind words, and we’re grateful that you reached out to us

We’ve thoroughly reviewed the screenshots and additional information you shared, and we’re committed to resolving the issue at hand.

To ensure we have a crystal-clear understanding, is the core problem that only the camera of the current user is visible on the page, while the camera of the other user is not visible? Please correct me if I’ve misunderstood any aspect of the situation.

In addition, could you please provide us with the layout settings of the second camera group? There’s a possibility that the issue might stem from a misconfiguration within the groups rather than a flaw in our plugin.

Furthermore, we recommend checking the workflows with debugging enabled in a step-by-step manner. This will help verify that the workflows are triggered correctly and receive all the necessary data for seamless operation.

Looking forward to your response and wishing you a great week ahead

[tahycoon]

Hey @dorel

Thank you so much for reaching back!
Yes the core problem is that users can only see their own cameras even though they’re in the same room.
I am sure they’re in the same room because they can hear each other, but they can’t see the other person’s camera (only their current camera).

Here is the layout of the group

I made sure that it has the ID of “mobilevideo” just like the AgoraRTC’s Remote Users

I took a screenshot of the step-by-step, but im a summary what it is really is:

A user chooses a movie on the index page → a party is created and a data field named ‘agora_name’ is set to the unique ID, and send a URL param of ‘agora_name’ just to make sure it’s not empty and users on the same page.
then → user is directed to a dedicated watchshow page where they can click ‘join call’ and that will runa workflow to → join AgoraRTC room with the name of the current party ‘agora_name’.
Now users can are in the same room and can hear each other, but no camera

I disabled on page load because I think you said in one of the forums to someone that it doesn’t always work.

And here are some screenshots of the step-by-step debugger and inspect:

user choses a show and directed to that page with the agora element

user clicks join call

this is why I am sure both users are in the same room aside from the ability to hear each other:

Uploading: Screenshot 2023-12-11 153117.png…
and here’s the id:

I played along with the workflow just to make sure I am setting everything correctly and make sure nothing is skipped or empty, but I have no idea why users can only see their camera
(I of course tested this out on several devices and made sure the cameras are on, etc and I also followed the tutorials as well!)

Would you like me to add you to the editor?

Our product is ready to be launched in a few days after we get the agora ready, we’re so excited!

[dorel]

Hello @tahycoon,

Thank you so much for the details you’ve provided, they will significantly aid us in pinpointing the issue

If you could grant us collaboration access along with the editor link, it would be immensely helpful. Additionally, a brief step-by-step guide on how to navigate to the relevant elements in your app would be much appreciated.

Thank you so much for your cooperation, and we’re looking forward to resolving this matter swiftly.

Wishing you a highly productive day

[tahycoon]

Hey @dorel ,

Thanks for reaching back. Yes I will add you, which email do I add and would you like edit mode or view mode?

Taha,

[dorel]

Hi @tahycoon,

I apologize for not specifying this in my previous response. Could you please add the email address support@zeroqode.com as a collaborator? It would be greatly appreciated if you could also grant edit rights.

Thank you very much, and I look forward to hearing from you soon

[tahycoon]

Hey @dorel

No worries! I added you as a collaborator and gave you full access, you’re free to clone pages to experiment with, delete workflows, or add anything (just don’t delete the app ).

A couple of things I wanted to note:

1. I tested the video calling before downloading any other plugins just to make sure the ones I have now don’t conflict.

2. There is a group I was experimenting with on the ‘watchshow’ page for desktop agora video calling, I made it invisible and disabled the workflows so it doesn’t conflict with the mobile agoras, but feel free to delete it if you like, no worries. I tested everything before I added the desktop Agora version so it’s not that the Agora elements are conflicting, but you can delete them either way if you think it might conflict even when they’re not visible and disabled workflows.

3. As stated previously when I open the debugger I can see both users’ UIDs, and you can make sure of that if you test it on two devices since you’ll be able to hear both users but only see your camera.

And here’s a guide on the app design so you’re not lost:

1. I organized every aspect of the app to the best of my abilities, so there are workflow folders and colors on each page.

2. The ‘watchshow’ page is where you’ll find everything you need to look for since it has the Agora elements.

3. Agora-related actions is used in 3 pages: Index (only setting up the party’s agora name to be used later) and watchshow (where agora elements are), and on a RE Invitation Notification (which is just taking the user to the watchshow and joining them to the respective party)
   Here is where you can find the agora_name field in the index if you still would like to check it out:

on the index page I made a folder for you named Agora Setup Temp Folder and I here I highlighted where the agora_name field is set up

on the Reusable Element Invitation Notification I made a folder for you name Agora Setup Temp Folder and

4. The Watchshow where the agora elements reside I made a folder for you named mobile Agora, and here is a screenshot of where to find the agora element and the group next to it to display the guests:
   
   
   
   
   

So I don’t get you confused, in summary:

• Watchshow is where Agora Related elements are (there are a desktop element which you can delete but I already disabled its workflows and made it invisible and tested things before adding it).

• the data type, Party, has a data field called agora_name which I set up as the Party ID in an action after creating the party, and that could be found in the Index page’s folder I created for you.

• users join after clicking accept (on the reusable element) which directs them to that watchshow page and joins their party.

• when I send users to the watchshow page I also send the agora_name as a url param just so I make sure it’s not empty.

• I verified users are in the same call in the debugger and because they can hear each other

• you can just head to the ‘watchshow’ party so you don’t get confused with all the workflows because really outside the watchshow it’s just setting up the party datafield to its id (and I also experimented with setting the field to the user id, random string, etc just to make sure it’s not about that). But I included the other info just in case.

If there is anything you need me to clarify anything let me know, I hope the folders and descriptions are organized well.

Thank you so much in advance Dorel, we hope this would be solved!

[tahycoon]

Sorry I forgot, here’s the link to the editor: Cre8te Plus Network | Bubble Editor

EDIT: I deleted the desktop elements and their workflows I felt they might make it harder for you to navigate so don’t worry about them anymore!

[dorel]

Hello @tahycoon,

Upon conducting an extensive test of your application, I discovered that when you set up the main group (second camera) to “Align to Parent,” the second camera becomes visible. I conducted thorough testing of this feature, and it appears that when the group is set to “row” or “column,” the video is not visible at all. I have already conveyed this information to our development team for further investigation. I will keep you updated with the feedback and insights provided by the developers.

For the time being, to ensure that the second camera video is visible, please make sure that the group’s layout is set to “Align to Parent.”

Thank you for your understanding and patience

Wishing you a great holiday season

[tahycoon]

Hey @dorel
It’s working perfectly on all devices! You guys have the best support team out there I’m so glad I settled with your products.
Thank you so much, Dorel for the support and the extensive examination!

I will make sure it’s aligned to parent!

have a happy holiday season you did amazing

[dorel]

Hello @tahycoon,

Your kind words are greatly appreciated, and it was truly a pleasure assisting you. Rest assured, I’ll reach out to you as soon as an update becomes available that will address the row or column layout issue.

If you happen to find a free moment, we would be immensely grateful if you could leave a review for the plugin. To do so, simply navigate to the plugins page of your Bubble editor, select the respective plugin, and scroll down to the review section. Your honest rating and feedback mean a lot to us, so please feel free to rate it as high as you deem fitting.

Wishing you a wonderful holiday season

[tahycoon]

I reviewed it with 5 stars and mentioned you for your wonderful support!

[dorel]

Hi @tahycoon,

We have received your review. Thank you so much for the kind words, they are truly appreciated

In case you will have any other questions regarding our plugins, please get in contact with us via the forum or by email at support@zeroqode.com.

Wishing you the best holiday season