import { CallClientState , CameraButton , LocalVideoStreamState , useCallClient , usePropsFor } from '@azure/communication-react' ; import { CallState as CallStatus , LocalVideoStream } from '@azure/communication-calling' ; import { useSelector } from '@azure/communication-react' ; import { StreamMedia } from '@azure/communication-react' ; import { VideoTile } from '@azure/communication-react' ; import { useCall } from '@azure/communication-react' ; import React , { useCallback , useEffect } from 'react' ; const videoTileContainerStyle = { height : '8rem' , width : '12rem' , border : 'solid 2px' } ; const localStreamSelector = ( state , { callId } ) : LocalVideoStreamState | undefined => { const localStreamState = state . calls [ callId ] . localVideoStreams . find ( ( item ) => item . mediaStreamType === 'Video' ) ; return localStreamState ; } ; const callStatusSelector = ( state , { callId } ) : CallStatus => { return state . calls [ callId ] . state ; } ; export const RenderVideoTileExample = ( ) : JSX . Element => { const cameraButtonProps = usePropsFor ( CameraButton ) ; const callClient = useCallClient ( ) ; const call = useCall ( ) ; const onStartLocalVideo = useCallback ( async ( ) => { const deviceManager = await callClient . getDeviceManager ( ) ; const cameras = await deviceManager ?. getCameras ( ) ; const videoDeviceInfo = cameras && cameras . length > 0 ? cameras [ 0 ] : undefined ; if ( ! videoDeviceInfo ) { return ; } const stream = new LocalVideoStream ( videoDeviceInfo ) ; call && ( await call . startVideo ( stream ) ) ; } , [ call , callClient ] ) ; const localStreamState = useSelector ( localStreamSelector , { callId : call ?. id ?? '' } ) ; const callStatus = useSelector ( callStatusSelector ) ; useEffect ( ( ) => { localStreamState && callClient . createView ( call ?. id , undefined , localStreamState ) ; } ) ; const mediaStreamComponent = localStreamState ?. view && localStreamState . view ?. target && ( < StreamMedia videoStreamElement = { localStreamState . view . target } />); return ( < > < h3 > Render single video stream in your own component < /h3> < div data - ui - id = { callStatus === 'Connected' ? 'call-connected' : 'call-not-connected' } > { ' ' } CallStatus : { callStatus } { ' ' } < /div> < span > Click camera button to see what happens : < /span> < CameraButton { ... cameraButtonProps } id = "camera-button" / > < div style = { videoTileContainerStyle } > < VideoTile renderElement = { mediaStreamComponent } /> < /div> < span > Or you can try custom logic to start local video : < /span> < button data - ui - id = "custom-start-button" onClick = { onStartLocalVideo } > start local video < /button> < />); } ;