WebSDK 2.3.5 Component view unable to leave meeting

Hi,

i use Component view in my vue app and i can start a meeting and join as participant but i cannot leave the meeting. A cancel buttons appears und clicking on it makes me stay in the meeting.


Bildschirmfoto 2022-04-19 um 16.27.22
Bildschirmfoto 2022-04-19 um 16.27.17

<template>
  <div class="zoom-module">
      <div class="zoom-submit">
        <button  class="zoom-invite-button" @click="getSignature">Join Meeting</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ZoomMtgEmbedded from '@zoomus/websdk/embedded';

export default {
  name: 'ZoomModule',
  created () {
  },
  data () {
    return {
      client: ZoomMtgEmbedded.createClient(),
      // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
      sdkKey: "MYKEY",
      meetingNumber: "MYNR",
      passWord: "MYPASSCODE",
      role: 0,
      signatureEndpoint: "",
      userEmail: "",
      userName: "Vue.js",
      // 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/component-view/meetings#join-registered
      // Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered
      registrantToken: ''
    }
  },
  methods: {
    getSignature() {
      this.startMeeting("MYSIGNATURE");
    },
 
    startMeeting(signature) {
      let meetingSDKElement = document.getElementById('meetingSDKElement');
      let meetingSDKChatElement = document.getElementById('meetingSDKChatElement')

      this.client.init({
        debug: true,
        zoomAppRoot: meetingSDKElement,
        language: 'en-US',
        customize: {
          video: {
            isResizable: true,
            popper: {
              disableDraggable: false
            }
          },
          chat: {
            popper: {
              disableDraggable: false,
              anchorElement: meetingSDKChatElement,
              placement: 'right'
            }
          },
          meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
          toolbar: {
            buttons: [
              {
                text: 'Custom Button',
                className: 'CustomButton',
                onClick: () => {
                  console.log('custom button');
                }
              }
            ]
          }
        }
      });

      this.client.join({
        sdkKey: this.sdkKey,
        signature: signature,
        meetingNumber: this.meetingNumber,
        password: this.passWord,
        userName: this.userName,
        userEmail: this.userEmail,
        tk: this.registrantToken
      })
    }
  }
}
</script>

Update:

i startet the sample app. No i can see a leave button. seems to be a specific z.index issue in my component… i will try to fix this.

But i found another issue: clicking on the join button opens the zoom component. But leaving meeting and / or clicking again on join will cause several errors:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: “TypeError: Cannot assign to read only property ‘meetingInfo’ of object ‘#’”

found in

—> at src/components/HelloWorldNew.vue
at src/App.vue

Is this a known issue?
What can i do to fix this?


Hey @Milenoi ,

Thanks for sharing this, we are working on a fix. (380667) I am also going to move your post to the Web category :slight_smile:

-Tommy

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.