Expected to accept HTMLCanvasElement, but actual it is HTMLCanvasElement

Video SDK
1

I get the obscure error:

Expected to accept HTMLCanvasElement, but actual it is HTMLCanvasElement

when calling stream.stopRenderVideo(..)

the renderVideo & adjustRenderedVideoPosition work fine with the same canvas element. Is this due to polyfills or sth like that?

2

Hi @fides-it ,

Could you share the code snippet where you’re calling stream.stopRenderVideo() & the other two listed functions?

Thanks,
Rehema

3

Hi Rehema,

sure:

async renderParticipant({participant, canvas, width, height, x, y, quality} : RenderParticipant): AsyncSessionResult {
    logZoom(`renderParticipant ${participant.name}`)
    return mapResultOrError(this.stream.renderVideo(canvas, participant.userId, width, height, x, y, this.convertQuality(quality)));
  }

  async adjustRenderedVideoPosition({participant, canvas, width, height, x, y} : RenderParticipant): AsyncSessionResult {
    logZoom('adjustRenderedVideoPosition')
    const result = await mapResult(this.stream.adjustRenderedVideoPosition(canvas, participant.userId, width, height, x, y));
    if (result.failure) {
      result.log()
    }
    return result
  }

  async stopRenderParticipant(payload : StopRenderParticipant): AsyncSessionResult {
    logZoom(`stopRenderParticipant ${payload.participant.name}`)
    const result = await mapResult(this.stream.stopRenderVideo(payload.canvas, payload.participant.userId))
    if (result.failure) {
      result.log()
    }
    return result
  }
4

Hey @fides-it

Yes, we will check in the Video SDK if the canvas is indeed the original HTMLCanvasElement to ensure that the API works correctly.

In your code snippet, is there any difference between payload.canvas and the canvas used in renderVideo or adjustRenderedVideoPosition?

Thanks
Vic

5

What I did is the following:

  • keep a list of HtmlCanvasElement per user
  • if a user needs to be rendered, get the canvas element from the list, or create a new one using document.createElement(‘canvas’), which is stored in the canvas-per-user list
  • subsequent operations on the canvas (adjust/stop), always use the stored HtmlCanvasElement