如何在meetingSDKElement DOM中追加zmmtg-root

Question

我正在我的网站内实施缩放会议。我正在使用 Zoom 会议 SDK。一切正常，但 DOM 附加在结束

</html>

标签上方。然而，在我看来，我已经按照缩放指令定义了 DOM。

我正在使用 Codeigniter、jQuery。下面是我的代码

//This is view

<div id="meetingSDKElement"></div>

//This is footer
<script src="https://source.zoom.us/2.18.2/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.18.2/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-2.18.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/client-view.js'); ?>?v=<?php echo VERSION; ?>"></script>

//This is Javascript
$(document).ready(function(){
   getSignature();
});
function getSignature() {
  fetch(authEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role,
      password:passWord
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

function startMeeting(signature) {
$(".meeting-loader").css("visibility", "hidden");
  document.getElementById('zmmtg-root').style.display = 'block'

  ZoomMtg.init({
    leaveUrl: leaveUrl,
    success: (success) => {
      console.log(success)
      ZoomMtg.join({
        signature: signature,
        sdkKey: sdkKey,
        meetingNumber: meetingNumber,
        passWord: passWord,
        userName: userName,
        userEmail: userEmail,
        tk: registrantToken,
        zak: zakToken,
        success: (success) => {
          console.log(success)
        },
        error: (error) => {
          console.log(error)
        },
      })
    },
    error: (error) => {
      console.log(error)
    }
  })
}

我希望将

zmmtg-root

附加到

meetingSDKElement

内。

Answer 1

Zoom 开发者倡导者在这里。由于 Zoom Meeting SDK Web 客户端视图 设计为占据整个页面，因此不支持附加到给定的 HTML 元素。

但是，有两种方法可以将会议 SDK 附加到给定的 HTML 元素中：

1. 将会议 SDK Web 客户端视图嵌入 iFrame 中，保留现有代码，但托管并将其设置为 iframe src：

   <div id="meetingSDKElement">
      <iframe src="https://example.com/meetingsdk" allow="camera; microphone"></iframe>
   </div>
   

2. 使用Meeting SDK Web 组件视图，该视图旨在附加到给定的 HTML 元素中：

   <div id="meetingSDKElement">
     <!-- Meeting SDK renders here when a user starts or joins a Zoom meeting -->
   </div>
   

   const client = ZoomMtgEmbedded.createClient()
   
   let meetingSDKElement = document.getElementById('meetingSDKElement')
   
   client.init({ zoomAppRoot: meetingSDKElement, language: 'en-US' })
   
   client.join({
      sdkKey: sdkKey,
      signature: signature,
      meetingNumber: meetingNumber,
      password: password,
      userName: userName,
      zak: zakToken
   })
   

对于 Zoom 开发者平台的具体问题，请随时在 Zoom 开发论坛 上提问。