Web SDK for meetings. Chat is not working in Chrome and Chromium

Meeting SDK Type and Version: (type) Client View and (version) 2.6.0

Description
In the meeting client view, when clicking on Chat. Its opening a side bar with nothing in it.
I want to chat to other people in the meeting. I am not able to do that.

Error?
No error message

How To Reproduce
Steps to reproduce the behavior including:
*1. Open Chrome or Chromium
*2. Join the meeting using meeting sdk from React
*3. Click on Chat button below on the bottom bar
*4. See that side bar is opening with nothing in it

Please dont close this post. Kindly go through it and reply.

@feby,

Welcome to the Developer Forum! Can you share a screenshot of what you are seeing when clicking on chat? This will help to diagnose what may be happening.

I have shared a screenshot of what happens when I click on chat. It shows an empty side bar.

Here is my code:

import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
import { lessons, payment } from ‘…/…/…/actions’;

import { ZoomMtg } from ‘@zoomus/websdk’;
import KJUR from ‘jsrsasign’;

import ‘@zoomus/websdk/dist/css/bootstrap.css’;
import ‘@zoomus/websdk/dist/css/react-select.css’;

import ‘./index.css’;

import $ from ‘jquery’;

class Meeting extends Component {
constructor(props) {
super(props);

this.generateSignature = this.generateSignature.bind(this);
this.showZoomDiv = this.showZoomDiv.bind(this);
this.startMeeting = this.startMeeting.bind(this);
this.handleUnload = this.handleUnload.bind(this);

}

showZoomDiv = () => {
document.getElementById(‘zmmtg-root’).style.display = ‘block’;
}

handleUnload = () =>{
console.log(“unload”);
}

componentDidUpdate = () => {
console.log(“comp update”);
}

componentDidMount = () => {
this.showZoomDiv();

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.6.0/lib', '/av');

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.reload('en-US');

//this.props.getMeetingId().then(result => {
  //  var id = result.id;
    //console.log("meeting id: " + id);

    //var password = result.password;
    //console.log("meeting password: " + password);

    var id = 88367540064; //parseInt(localStorage.getItem("meetingId"));
  var sign = 0;
  var password = 0;

  console.log(id);

    var sign = this.generateSignature(id);
    this.startMeeting(sign, id, password);

//passcode not required for meeting type 3 recurrent
//});
}

generateSignature = (/sdkKey, sdkSecret,/ meetingNumber/, role/) => {

const iat = Math.round((new Date().getTime() - 30000) / 1000)
const exp = iat + 60 * 60 * 2
const oHeader = { alg: 'HS256', typ: 'JWT' }

const oPayload = {
  sdkKey: 'xxxxxx',
  mn: meetingNumber,//meetingNumber,
  role: 1,
  iat: iat,
  exp: exp,
  appKey: 'xxxxxx',
  tokenExp: iat + 60 * 60 * 2
}

const sHeader = JSON.stringify(oHeader)
const sPayload = JSON.stringify(oPayload)
const sdkJWT = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, 'xxxxxx')
return sdkJWT

}

startMeeting = (signature,id , passcode) => {
console.log(“here 2”);

//document.getElementById('zmmtg-root').style.display = 'block';

// setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
var signatureEndpoint = 'http://localhost:4000'
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
var sdkKey = 'xxxxxx'
var meetingNumber = id//id
var role = 1
var leaveUrl = 'https://console.skillkidz.com'
var userName = 'Skillkidz_Feby'//localStorage.getItem("userFullName")//'Skillkidz_Feby'
var userEmail = ''
var passWord = passcode
// pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
var registrantToken = ''

console.log("here 2 again");

ZoomMtg.init({
  leaveUrl: leaveUrl,
  success: (success) => {
    console.log("here 3");
    console.log(success)

    ZoomMtg.join({
      signature: signature,
      meetingNumber: meetingNumber,
      userName: userName,
      sdkKey: sdkKey,
      //userEmail: userEmail,
      //passWord: passWord,
      tk: registrantToken,
      success: (success) => {
        console.log("here 4");
        console.log(success);
        var leaveMeetingButton = document.getElementsByClassName('footer__leave-btn');

        leaveMeetingButton[0].onclick =  function() {
          console.log("leave button clicked");
          $('document').ready(function(){
            var endMeetingButtons = null
            console.log("here window event");
            endMeetingButtons = document.getElementsByClassName('leave-meeting-options__btn leave-meeting-options__btn--default');
            console.log(endMeetingButtons);
            console.log(endMeetingButtons.length);
            for (let i = 0; i < endMeetingButtons.length; i++) {
              console.log("here: " + i);
              endMeetingButtons[i].onclick = function() {
                console.log("leave confirm clicked");
                window.open('', '_self', ''); window.close();
              }
            }
      });
            console.log("left meeting");
            
        }
      },
      error: (error) => {
        console.log("error");
        console.log(error)
      }
    })

  },
  error: (error) => {
    console.log(error)
  }
})

}

render() {
return (



)
}
}

const mapStateToProps = state => {
let error = null;
let result = null;
let studentDetails = null;
if(state.groups.errors) {
error = state.groups.errors;
} else if(state.groups.createResult){
result = state.groups.createResult.result;
} else if(state.parent.studentFromParentTable) {
console.log(“student details in redux”);
console.log(state.parent.studentFromParentTable);
studentDetails = state.parent.studentFromParentTable;
}
return {
error,
result,
studentDetails,
};
}

const mapDispatchToProps = dispatch => {
return {
getMeetingId: () => {
return dispatch(lessons.getMeetingId());
},
updatePaymentInfo: (state) => {
return dispatch(payment.updatePaymentInfo(state));
},
loadLessonsOfStudent: (data) => {
return dispatch(lessons.loadLessonsOfStudent(data));
},
markLessonsHappened: (id, status) => {
return dispatch(lessons.markLessonsHappened(id, status));
},
writeActualStartTime: (id) => {
return dispatch(lessons.writeActualStartTime(id));
},
}
}

export default connect (mapStateToProps, mapDispatchToProps) (Meeting);

@feby ,

Thank you for sharing that information! Can you also share how you are rendering the SDK in your application? Are you leveraging an IFrame? Also, please share a screenshot of the browser console when you click the chat button.

strange - normaly the chat area is white, but on your screenshot it is black

you are on linux? which browser?

have you checked with your browser a meeting direct on zoom.us with the option “Join from Your Browser”, do you see the “white” chat area

I have shared my code for integrating SDK to my React app.
I am not leveraging an iframe.
Screen shot already shared above.

Thanks for the reply, @feby! Can you also share a screenshot of the browser console when the chat is enabled?

I am on linux on Chromium.
But the same issue is seen on Mac and Windows.
I checked on both of them.


Thanks for the screenshots, @feby ! How are you importing the Meeting SDK scripts? If you are installing the SDK via NPM, you should be including the styles on the index.html if you are using a single-page app framework. Here is our documentation on this matter for your reference:

https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/#install-from-npm

Also, you may be interested in checking out our sample react app for reference :

I have installed web meeting zoomus/websdk.

I tried running the sample react app. Here is the error I received:
I did the instructions given in README step by step for Local (I want client view for my site). When I do npm start, it gives the following error:

https false
disableCORP false

[HPM] Proxy created: /meeting.html → http://127.0.0.1:9998/
:information_source: 「wds」: Project is running at http://0.0.0.0:9999/
:information_source: 「wds」: webpack output is served from /static
:information_source: 「wds」: Content not from webpack is served from /home/user/Documents/skillkidz/code/test/meetingsdk-web-sample/Local
:information_source: 「wds」: 404s will fallback to /index.html
Listening at http://127.0.0.1:9999/index.html
:information_source: 「wds」: Project is running at http://0.0.0.0:9998/
:information_source: 「wds」: webpack output is served from /static
:information_source: 「wds」: Content not from webpack is served from /home/user/Documents/skillkidz/code/test/meetingsdk-web-sample/Local
:information_source: 「wds」: 404s will fallback to /index.html

Listening at http://127.0.0.1:9999/index.html
node:events:505
throw er; // Unhandled ‘error’ event
^

Error: spawn chrome ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:283:19)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted ‘error’ event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:289:12)
at onErrorNT (node:internal/child_process:476:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: ‘ENOENT’,
syscall: ‘spawn chrome’,
path: ‘chrome’,
spawnargs: [ ‘http://127.0.0.1:9999/index.html’ ]
}

Node.js v18.2.0

I shall including the styles in index.html

Tried including styles in index.html

Its still not working.