如何为lib-jitsi-meet-dist添加自定义UI？通话窗口渲染失败求助

你的代码存在几个关键问题导致通话窗口无法渲染，以下是具体修正方案：

核心问题梳理 #

• DOM节点获取时机错误：组件渲染前调用document.getElementById('jitsi-container')，此时容器还未挂载到DOM，parentNode为null，Jitsi无法找到渲染目标。
• 冗余/错误的API调用：JitsiMeetJS.conference?.join(roomName)是错误用法，会议需通过已建立的连接初始化，而非直接调用该方法。
• 本地轨道未关联会议：创建本地音视频轨道后，未将其添加到会议中，导致画面无法显示。
• 配置参数错误：anonymousdomain格式错误，不应包含@符号。

修正后的完整代码 #

import React, { useEffect, useRef } from 'react';
// @ts-ignore: error message
import JitsiMeetJS from 'lib-jitsi-meet-dist';

const App: React.FC = () => {
  const roomName = 'conf';
  const jitsiContainerRef = useRef<HTMLDivElement>(null);
  // 保存连接和会议实例，用于组件卸载时清理
  const connectionRef = useRef<JitsiMeetJS.JitsiConnection | null>(null);
  const conferenceRef = useRef<JitsiMeetJS.JitsiConference | null>(null);

  useEffect(() => {
    const container = jitsiContainerRef.current;
    if (!container) return;

    // 初始化Jitsi配置
    const options = {
      width: 800,
      height: 600,
      parentNode: container,
      configOverwrite: {
        disableAudioLevels: false,
        disableSimulcast: false
      },
      interfaceConfigOverwrite: {
        SHOW_JITSI_WATERMARK: false,
        SHOW_WATERMARK_FOR_GUESTS: false
      },
      hosts: {
        domain: 'jitsi.fantast.dev',
        anonymousdomain: 'jitsi.fantast.dev',
        muc: 'jitsi.fantast.dev'
      },
      bosh: 'https://jitsi.fantast.dev/http-bind',
    };

    const confOptions = {
      openBridgeChannel: true,
    };

    JitsiMeetJS.init(options);

    // 创建连接实例
    const connection = new JitsiMeetJS.JitsiConnection(null, null, options);
    connectionRef.current = connection;

    // 监听连接事件
    connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, async () => {
      // 连接建立后初始化会议
      const conference = connection.initJitsiConference(roomName, confOptions, null);
      conferenceRef.current = conference;

      // 监听远程轨道添加事件
      conference.on(JitsiMeetJS.events.conference.TRACK_ADDED, (track) => {
        if (track.isRemote()) {
          conference.addTrack(track, container);
        }
      });

      conference.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, () => {
        console.log('已加入会议');
      });

      // 创建本地音视频轨道并添加到会议
      const localTracks = await JitsiMeetJS.createLocalTracks({ devices: ['audio', 'video'] });
      localTracks.forEach(track => {
        conference.addTrack(track, container);
      });

      // 加入会议
      conference.join();
    });

    connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, (error) => {
      console.error('连接失败:', error);
    });

    connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, () => {
      console.log('连接断开');
    });

    // 发起连接
    connection.connect();

    // 组件卸载时清理资源
    return () => {
      if (conferenceRef.current) {
        conferenceRef.current.leave();
        conferenceRef.current.dispose();
      }
      if (connectionRef.current) {
        connectionRef.current.disconnect();
      }
      JitsiMeetJS.dispose();
    };
  }, []);

  return (
    <div>
      app
      <div ref={jitsiContainerRef} style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}></div>
    </div>
  );
};

export default App;

关键修改说明 #

• 用useRef获取DOM节点：通过useRef绑定容器元素，确保组件挂载后能正确获取到DOM节点，避免parentNode为空。
• 将Jitsi逻辑移到useEffect中：利用useEffect的空依赖数组，确保初始化逻辑只在组件挂载时执行一次，符合React生命周期规范。
• 修正配置参数：移除anonymousdomain中的@符号，匹配Jitsi的配置要求。
• 关联轨道到会议：创建本地轨道后，通过conference.addTrack将轨道添加到容器，实现本地画面渲染；远程轨道触发事件时同样添加到容器。
• 添加资源清理：组件卸载时离开会议、断开连接并释放Jitsi资源，避免内存泄漏。

自定义UI扩展建议 #

如果需要自定义UI，可通过以下方式实现：

• 修改interfaceConfigOverwrite参数，隐藏默认UI元素（如顶部工具栏、水印）。
• 监听Jitsi的参会者状态、设备状态等事件，自定义渲染参会者列表、控制按钮等组件。
• 直接操作音视频轨道元素，将其插入到自定义DOM结构中，完全控制布局样式。

内容的提问来源于stack exchange，提问作者Эмиль Новиков