We are developing a web application using Zoom web SDK. Everything works fine but when we join the meeting:
The footer options that appear on the meeting page don’t have a good UI. My question is, is that how they are expected to look by default, or something’s wrong in the implementation?
After joining the meeting, the Camera is on, the video is on, but we can’t see our video on the screen. It just shows a black screen. However, we can see others’ videos. Is that how it works or something’s wrong?
Thank you for posting on the Zoom Developer Forum. No, the UI does not of white overlays as shown in the screenshot. Here’s a screen of what the UI should look like for reference:
Generally, camera issues with the Web SDK tend to be related to SharedArrayBuffers and cross-origin isolation. Are you able to share if your web page is either cross-origin isolated or has Origin Trials applied? (One or the other is sufficient ) Below I’ve linked our help documentation along with additional troubleshooting steps for reference :
If cross-origin is applied to your webpage, verify that you do not have an expired origin trials token/certification. If so, you can regenerate the origin trails token, here is Google’s troubleshooting guide for reference: Troubleshooting Chrome's origin trials - Chrome Developers
Further, when testing be sure to sever your site over HTTPS and ensure you’ve allowed your browser access to the microphone and camera. You can enable a locally running server with a tool like ngrok as it allows you to tunnel traffic to your server running on localhost through an HTTPS domain.
Let us know how your testing goes and we can go from there. I am looking forward to hearing back from you.
Re. UI issues - Can you please tell me possible reasons for those UI issues?
Camera Issues - The issue is related to SharedArratBuffers and cross-origin isolation. I followed the reference you provided and tried with “Chrome’s Origin Trials” and it worked. As they say that’s a temporary solution, so, I am trying to implement “Cross-origin isolation” in the React application. I did the following steps:
The instructions above are for Nginx server configuration. You have to add HTTP headers to your server responses. Can you share if you are using an Nginx server?
