如何基于Jitsi React-SDK自定义工具栏按钮（如音视频控制按钮）？

实现思路 #

Jitsi React-SDK支持通过toolbarButtons配置自定义工具栏按钮，核心是结合SDK提供的会议API（如会议实例方法、命令执行器）实现按钮功能，同时通过Hook获取会议状态同步按钮UI。

1. 创建自定义按钮组件 #

使用useJitsiMeeting Hook获取会议实例，基于实例方法实现功能逻辑，同步状态更新按钮UI：

import { useJitsiMeeting } from '@jitsi/react-sdk';

// 自定义音频静音/取消静音按钮
const CustomAudioToggleButton = () => {
  const { meeting } = useJitsiMeeting();

  const handleToggleAudio = () => {
    if (!meeting) return;
    meeting.isAudioMuted() ? meeting.unmuteAudio() : meeting.muteAudio();
  };

  const isAudioMuted = meeting?.isAudioMuted() || false;

  return (
    <button 
      onClick={handleToggleAudio}
      className="jitsi-toolbar-button"
      aria-label={isAudioMuted ? "取消音频静音" : "静音音频"}
    >
      {isAudioMuted ? '🔊' : '🔇'}
    </button>
  );
};

// 自定义视频开启/关闭按钮
const CustomVideoToggleButton = () => {
  const { meeting } = useJitsiMeeting();

  const handleToggleVideo = () => {
    if (!meeting) return;
    meeting.isVideoMuted() ? meeting.unmuteVideo() : meeting.muteVideo();
  };

  const isVideoMuted = meeting?.isVideoMuted() || false;

  return (
    <button 
      onClick={handleToggleVideo}
      className="jitsi-toolbar-button"
      aria-label={isVideoMuted ? "开启视频" : "关闭视频"}
    >
      {isVideoMuted ? '📹' : '❌📹'}
    </button>
  );
};

2. 配置工具栏加载自定义按钮 #

在<JitsiMeeting>组件中，通过customToolbarButtons注册自定义按钮，再通过toolbarButtons指定要显示的按钮（可混合内置按钮与自定义按钮）：

import { JitsiMeeting } from '@jitsi/react-sdk';

const App = () => {
  // 映射自定义按钮标识与组件
  const customButtonMap = {
    'custom-audio-toggle': CustomAudioToggleButton,
    'custom-video-toggle': CustomVideoToggleButton
  };

  return (
    <JitsiMeeting
      roomName="your-meeting-room"
      // 定义工具栏按钮列表：自定义按钮 + 内置按钮
      toolbarButtons={['custom-audio-toggle', 'custom-video-toggle', 'hangup']}
      // 传入自定义按钮映射
      customToolbarButtons={customButtonMap}
    />
  );
};

export default App;

3. 基于内置命令的简化实现 #

如果想复用SDK内置的命令逻辑，可使用executeCommand和getCommandState方法，无需直接调用会议实例方法：

import { useJitsiMeeting } from '@jitsi/react-sdk';

const SimplifiedAudioButton = () => {
  const { executeCommand, getCommandState } = useJitsiMeeting();
  const { muted } = getCommandState('toggleAudio') || { muted: false };

  return (
    <button 
      onClick={() => executeCommand('toggleAudio')}
      className={`jitsi-toolbar-button ${muted ? 'active' : ''}`}
    >
      {muted ? '🔊' : '🔇'}
    </button>
  );
};

注意事项 #

• 确保使用的@jitsi/react-sdk版本支持自定义工具栏功能（参考官方文档对应版本说明）
• 自定义按钮的样式可通过覆盖.jitsi-toolbar-button类名匹配SDK默认风格
• 所有操作必须依赖SDK提供的API，避免直接修改内部DOM或状态

内容的提问来源于stack exchange，提问作者Artem