Video-single.tsx display active user and myself

Video SDK Web
1

I want to display the video of another active user (only 1 user) in the big canvas
And I also want to display myself in another small canvas outside the big canvas
How can I do that?

2

Hey @thanh.huynh

Thanks for your feedback.

You can use two canvases to render the videos. Our sample app doesn’t provide these codes, I will show you my ways:

<div class="self">
  <canvas id="self-view-canvas" width="1920" height="1080"></canvas>
</div>
<div class="participant">
  <canvas id="participant-canvas" width="1920" height="1080"></canvas>
</div>

// render participant's video
zmClient.on('peer-video-state-change', (payload) => {
  if(payload.action === 'Start') {
    zmStream.renderVideo(document.querySelector('#participant-canvas'), payload.userId, 1920, 1080, 0, 0, 3)
  } else if(payload.action === 'Stop') {
    zmStream.stopRenderVideo(document.querySelector('#participant-canvas'), payload.userId);
  }
})
// render self video
// following statement should be in the event callback
zmStream.startVideo().then(() => {
  zmStream.renderVideo(document.querySelector('#self-view-canvas'), zmClient.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 3)
})

Thanks
Vic

3

OK it should work
Thank you

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.