使用 external_api.js 在 React Web 应用程序中添加 jitsi-Meet 视频会议

如何解决使用 external_api.js 在 React Web 应用程序中添加 jitsi-Meet 视频会议

如 this link 所述，我已在我的 React Web 应用程序中添加了 jitsi meet 视频会议。 我还添加了 this link 中给出的 react-jitsi 组件 loading meeting... 不会消失并且一直被卡住，并且不会为会议呈现 jitsi 界面。当我点击此代码组件中给出的 let's start 按钮时。 这是 LiveMeeting.jsx 组件

import React,{ useState } from 'react'
import Jitsi from 'react-jitsi'

 
export const LiveMeeting = () => {
 
  const [displayName,setdisplayName] = useState('')
  const [roomName,setRoomName] = useState('')
  const [password,setPassword] = useState('')
  const [onCall,setonCall] = useState(false)
 
  return onCall
    ? (
      <Jitsi
        roomName={roomName}
        domain='meet.jit.si'
        displayName={displayName}
        config={{ startAudioOnly: true }}
        interfaceConfig={{ filmStripOnly: true }}
        password={password}
      
      />)
    : (
      <>
        <h1>Create a Meeting</h1>
        <input type='text' placeholder='Room name' value={roomName} onChange={e => setRoomName(e.target.value)} />
        <input type='text' placeholder='Your name' value={displayName} onChange={e => setdisplayName(e.target.value)} />
        <button onClick={() => setonCall(true)}> Let&apos;s start!</button>
      </>
    )
 
}

但是网络选项卡显示所有加载的东西都成功并且没有错误。

此外，react-jitsi 是一个打字稿库，我的整个应用程序使用 jsx 而不是 tsx。我没有 tsx 经验。

预先感谢您的帮助。 附上截图。