ConfigureWhiteboard provides a modal interface for configuring whiteboard settings, including assigning participants, validating settings, and starting or stopping a whiteboard session.
import { ConfigureWhiteboard } from 'mediasfu-reactjs';import { io } from 'socket.io-client';const parameters = { participants: [{ id: "1", name: "John Doe", islevel: "1", useBoard: false }], socket: io("http://localhost:3000"), itemPageLimit: 10, islevel: "2", roomName: "Room 1", eventType: "meeting", shareScreenStarted: false, shared: false, breakOutRoomStarted: false, breakOutRoomEnded: true, recordStarted: false, recordResumed: false, recordPaused: false, recordStopped: false, recordingMediaOptions: "video", canStartWhiteboard: true, whiteboardStarted: false, whiteboardEnded: true, hostLabel: "Host", updateWhiteboardStarted: (started) => console.log("Whiteboard started:", started), updateWhiteboardEnded: (ended) => console.log("Whiteboard ended:", ended), updateWhiteboardUsers: (users) => console.log("Whiteboard users updated:", users), updateCanStartWhiteboard: (canStart) => console.log("Can start whiteboard:", canStart), updateIsConfigureWhiteboardModalVisible: (isVisible) => console.log("Whiteboard modal visibility:", isVisible), onScreenChanges: ({ changed }) => console.log("Screen changed:", changed), captureCanvasStream: () => console.log("Canvas stream captured"), prepopulateUserMedia: ({ name }) => console.log("Prepopulating user media for:", name), rePort: ({ restart }) => console.log("Report with restart:", restart), showAlert: ({ message, type }) => console.log(`${type}: ${message}`),};<ConfigureWhiteboard isVisible={true} onConfigureWhiteboardClose={() => console.log("Whiteboard modal closed")} parameters={parameters}/> Copy
import { ConfigureWhiteboard } from 'mediasfu-reactjs';import { io } from 'socket.io-client';const parameters = { participants: [{ id: "1", name: "John Doe", islevel: "1", useBoard: false }], socket: io("http://localhost:3000"), itemPageLimit: 10, islevel: "2", roomName: "Room 1", eventType: "meeting", shareScreenStarted: false, shared: false, breakOutRoomStarted: false, breakOutRoomEnded: true, recordStarted: false, recordResumed: false, recordPaused: false, recordStopped: false, recordingMediaOptions: "video", canStartWhiteboard: true, whiteboardStarted: false, whiteboardEnded: true, hostLabel: "Host", updateWhiteboardStarted: (started) => console.log("Whiteboard started:", started), updateWhiteboardEnded: (ended) => console.log("Whiteboard ended:", ended), updateWhiteboardUsers: (users) => console.log("Whiteboard users updated:", users), updateCanStartWhiteboard: (canStart) => console.log("Can start whiteboard:", canStart), updateIsConfigureWhiteboardModalVisible: (isVisible) => console.log("Whiteboard modal visibility:", isVisible), onScreenChanges: ({ changed }) => console.log("Screen changed:", changed), captureCanvasStream: () => console.log("Canvas stream captured"), prepopulateUserMedia: ({ name }) => console.log("Prepopulating user media for:", name), rePort: ({ restart }) => console.log("Report with restart:", restart), showAlert: ({ message, type }) => console.log(`${type}: ${message}`),};<ConfigureWhiteboard isVisible={true} onConfigureWhiteboardClose={() => console.log("Whiteboard modal closed")} parameters={parameters}/>
Component properties.
The rendered ConfigureWhiteboard component.
Optional
Ignored by React.
Only kept in types for backwards compatibility. Will be removed in a future major release.
Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
Legacy React Docs
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent' Copy
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent'
ConfigureWhiteboard provides a modal interface for configuring whiteboard settings, including assigning participants, validating settings, and starting or stopping a whiteboard session.
Component
Example