Const// Basic video grid with screen share
<FlexibleVideo
customWidth={320}
customHeight={180}
rows={2}
columns={2}
componentsToRender={[
<VideoCard key="1" participant={participant1} />,
<VideoCard key="2" participant={participant2} />,
<VideoCard key="3" participant={participant3} />,
<VideoCard key="4" participant={participant4} />,
]}
Screenboard={<ScreenAnnotationOverlay />}
backgroundColor="#000"
/>
// Annotation mode with local screen stream
<FlexibleVideo
customWidth={640}
customHeight={360}
rows={1}
columns={1}
componentsToRender={[<ScreenShareView stream={screenStream} />]}
annotateScreenStream
localStreamScreen={localScreenStream}
Screenboard={<DrawingToolbar />}
renderContent={({ defaultContent, dimensions }) => (
<View style={{ position: 'relative' }}>
{defaultContent}
<AnnotationCanvas width={dimensions.width} height={dimensions.height} />
</View>
)}
/>
FlexibleVideo renders a matrix of media tiles with optional screenboard overlays and local annotation sizing. It mirrors the flexible layout used during screen-share sessions and supports override hooks for both content and container customization.
Key Features
showAspectAccessibility