How to set the size of the Component View (Vue.js)

Meeting SDK Web
1

Description
Component View is being trained based on “GitHub - zoom/meetingsdk-sample-vuejs: Use the Zoom Meeting SDK in a Vue.js App”. The size of the Component View is small when launched as it is, and I would like to specify the size of the Component View using CSS or other means, but I don’t know how to do this.

Which Web Meeting SDK version?
“@zoomus/websdk”: “^2.4.0”

Meeting SDK Code Snippets

<template>
  <main>
    <h1>Zoom Meeting SDK Sample Vue.js 2</h1>
    
    <!-- For Component View -->
    <div id="meetingSDKElement" class="meetingSDKElement">
      <!-- Zoom Meeting SDK Component View Rendered Here -->
    </div>

    <button @click="getSignature">Join Meeting</button>
  </main>
</template>

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

export default {
  name: 'HelloWorld',
  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: "Rb6z6DOTaqMTDGIMxoXnqaeYTk5ZLUHLbD9s",
      meetingNumber: '',
      passWord: '',
      role: 0,
      signatureEndpoint: "http://localhost:4000",
      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() {
      axios.post(this.signatureEndpoint, {
        meetingNumber: this.meetingNumber,
        role: this.role
      })
      .then(res => {
        console.log(res.data.signature);
        this.startMeeting(res.data.signature);
      })
      .catch(error => {
        console.log(error);
      });
    },
    startMeeting(signature) {
      let meetingSDKElement = document.getElementById('meetingSDKElement');

      this.client.init({
        debug: true,
        zoomAppRoot: meetingSDKElement,
        language: 'en-US',
        customize: {
          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>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
main {
  width: 70%;
  margin: auto;
  text-align: center;
}

main button {
  margin-top: 20px;
  background-color: #2D8CFF;
  color: #ffffff;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  outline: none;
}

main button:hover {
  background-color: #2681F2;
}

.meetingSDKElement{
  width: 500px;
  height: 400px;
}
</style>

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Go to ‘…’
  2. Click on ‘…’
  3. Scroll down to ‘…’
  4. See error

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: [e.g. Macbook Pro]
  • OS: [e.g. macOS 11]
  • Browser: [e.g. Chrome]
  • Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]

Additional context
Add any other context about the problem here.

2

I can set default size for using this parameter!!

3

Hi Koudai. You can customize component view size by video property inside customize property in the client initialization method. check below the sample code


this.client.init({
      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        video: {
          isResizable: true,
          viewSizes: {
            default: {
              width: 500,
              height: 220
            }
          }
        },

        meetingInfo: [
          'topic',
          'host',
          'mn',
          'pwd',
          'telPwd',
          'invite',
          'participant',
          'dc',
          'enctype',
        ]
      }
    });
1 Like
4

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