Description
In a ReactJS app, I have a component that renders the host video only:
const VideoSingle = ({ mediaStream, user, width, height }) => {
const videoRef = useRef()
const renderVideo = useCallback(
async (canvas, stream, u) => {
try {
if (!u.bVideoOn) {
stream.stopRenderVideo(canvas, u.userId)
return
}
await stream.renderVideo(
canvas,
u.userId,
width,
height,
0,
0,
VideoQuality.Video_720P
)
} catch (error) {
console.log(error)
}
},
[height, width]
)
useEffect(() => {
if (!mediaStream || !videoRef.current || !user) return
renderVideo(videoRef.current, mediaStream, user)
}, [videoRef, mediaStream, user])
return (
<canvas
width={width}
height={height}
className='video-canvas'
ref={videoRef}
style={{ width, height }}
/>
)
}
I’m rendering this component conditionally like this:
{slide === 'facilitator' && (
<VideoSingle
mediaStream={mediaStream}
user={host}
height={480}
width={640}
/>
)}
The video is visible on the first render, but after I hide and then show the component again, the video is lost. I checked all the parameters are same as in the first render and the code is passing the try block but the video is missing.
Browser Console Error
No errors in the console.
Which Web Video SDK version?
1.1.7