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

Question

我已经jitsi meet在我的反应网络应用程序中添加了视频会议，如此链接所述。我还添加了此链接 中react-jitsi给出的组件，它不会消失并且一直卡住，并且不会为会议呈现 jitsi 界面。当我单击此代码组件中给出的按钮时。这是组件loading meeting...let's startLiveMeeting.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经验。

提前感谢您的帮助。这里附有截图。