ScreenboardModal component provides a modal interface for screen annotation. It handles the display and management of screen sharing and annotation streams.
import { ScreenboardModal } from 'mediasfu-reactjs';// Define the parameters and functionality for screen sharing and annotationconst parameters = { localStreamScreen: new MediaStream(), shared: true, hostLabel: "Host Name", annotateScreenStream: true, processedScreenStream: null, mainScreenCanvas: null, canvasScreenboard: null, transportCreated: false, screenProducer: null, updateLocalStreamScreen: (stream) => console.log("Local Stream:", stream), updateProcessedScreenStream: (stream) => console.log("Processed Stream:", stream), updateMainScreenCanvas: (canvas) => console.log("Main Screen Canvas:", canvas), sleep: ({ ms }) => new Promise((resolve) => setTimeout(resolve, ms)), createSendTransport: async (options) => console.log("Create Transport:", options), disconnectSendTransportScreen: async (options) => console.log("Disconnect Transport:", options), connectSendTransportScreen: async (options) => console.log("Connect Transport:", options), stopShareScreen: async (options) => console.log("Stop Share Screen:", options), prepopulateUserMedia: async (options) => console.log("Prepopulate Media:", options), getUpdatedAllParams: () => ({ filteredRequestList: [], }),};const isVisible = true;const handleClose = () => console.log("Modal closed");// Render the ScreenboardModal component<ScreenboardModal parameters={parameters} isVisible={isVisible} onClose={handleClose} position="topRight" backgroundColor="#83c0e9"/> Copy
import { ScreenboardModal } from 'mediasfu-reactjs';// Define the parameters and functionality for screen sharing and annotationconst parameters = { localStreamScreen: new MediaStream(), shared: true, hostLabel: "Host Name", annotateScreenStream: true, processedScreenStream: null, mainScreenCanvas: null, canvasScreenboard: null, transportCreated: false, screenProducer: null, updateLocalStreamScreen: (stream) => console.log("Local Stream:", stream), updateProcessedScreenStream: (stream) => console.log("Processed Stream:", stream), updateMainScreenCanvas: (canvas) => console.log("Main Screen Canvas:", canvas), sleep: ({ ms }) => new Promise((resolve) => setTimeout(resolve, ms)), createSendTransport: async (options) => console.log("Create Transport:", options), disconnectSendTransportScreen: async (options) => console.log("Disconnect Transport:", options), connectSendTransportScreen: async (options) => console.log("Connect Transport:", options), stopShareScreen: async (options) => console.log("Stop Share Screen:", options), prepopulateUserMedia: async (options) => console.log("Prepopulate Media:", options), getUpdatedAllParams: () => ({ filteredRequestList: [], }),};const isVisible = true;const handleClose = () => console.log("Modal closed");// Render the ScreenboardModal component<ScreenboardModal parameters={parameters} isVisible={isVisible} onClose={handleClose} position="topRight" backgroundColor="#83c0e9"/>
The properties for the ScreenboardModal component.
The ScreenboardModal 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'
ScreenboardModal component provides a modal interface for screen annotation. It handles the display and management of screen sharing and annotation streams.
Example