Jitsi React-SDK自定义按钮

Question

如何为Jitsi React-SDK制作自定义按钮?可以更改工具栏中的按钮列表，但如何使我自己的，例如音频(静音/取消静音)按钮或视频(开/关)

只使用ReactSDK是很重要的- https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-react-sdk/

Answer 1

我们可以像下面这样创建一个CustomButton，

import React from 'react';
import { ToolbarButton } from '@jitsi/react-nativesdk';
const CustomButton = ({ icon, label, onClick }) => {
return (
<ToolbarButton
iconName={icon}
tooltip={label}
onClick={onClick}
/>
);
};
export default CustomButton;

我们可以像下面这样使用

class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
isAudioMuted: false,
};
this.handleCustomButtonClick = this.handleCustomButtonClick.bind(this);
}
handleCustomButtonClick() {
const isMuted = !this.state.isAudioMuted;
this.setState({ isAudioMuted: isMuted });
const command = isMuted ? 'muteAudio' : 'unmuteAudio';
this.jitsiMeetView.executeCommand(command);
}
render(){
const conferenceOptions = new 
JitsiMeetConferenceOptions.Builder()
.setRoom('[e-mail]')
.build();

return <JitsiMeetView 
onConferenceJoined={this.onConferenceJoined}
onConferenceWillJoin={this.onConferenceWillJoin}
options={conferenceOptions}
toolbarButtons={[
'camera',
...
...
'videoquality',
'custom-button', // Add your custom button here
]}
<CustomButton
icon="icon-mic"
label="Mute/Unmute Audio"
onClick={this.handleCustomButtonClick}
/>
</JitsiMeetView>
}
}