stream.renderVideo() error on connected user

[treedis]

For me this is still not working
I’m doing the following:

this.client.on("connection-change", async (payload) => {
   if (payload.state !== "Connected") return;
   this.stream = this.client.getMediaStream();
   await this.stream.startVideo();
   const session = this.client.getSessionInfo();
   const canvas = document.querySelector("#user-video");
   await this.stream.renderVideo(canvas,session.userId,160,80,0,0,1);
})

The camera is being turned on but nothing is being rendered to the canvas. Canvas has no CSS at the moment.

Also my canvas is as following:

<canvas id="user-video"></canvas>

What am I doing wrong? There is no error. It just won’t render. I tried Firefox, Chrome and Safari

Also it is not clear from the documentation what are the arguments to startVideo:
What is video?

try{
  const canvas = ['capture-canvas-1', 'capture-canvas-2'];
  const video = 'capture-video';
  await stream.startVideo(canvas, video);
} catch (error) {
  console.log(error);
}

[ktae13 (KB)]

Hi @treedis

1. I am not 100% sure, but I think startVideo() needs to be called on main thread.
   Try call it outside of connection-change.
2. I think the example needs to be updated. If you see the actual function,
   startVideo(option?: CaptureVideoOption): ExecutedResult.
   As you see, it doesn’t take canvas or video. it takes cameraId, captureHeight and captureWidth as option.
   Actual rendering is happening on renderVideo() call, which as already mention above, you would try to call it on main thread.

[treedis]

On the main thread you mean like this?

const signature = generateInstantToken(topic);
await this.client.join(topic, signature, name);
this.stream = this.client.getMediaStream();
await this.stream.startVideo();
const session = this.client.getSessionInfo();
const canvas = document.querySelector("#user-canvas");
await this.stream.renderVideo(canvas,session.userId,160,80,0,0,1);

I tried, it still shows nothing.

After debugging a bit, I see that nothing happens after this.stream.renderVideo, even if I try to do console.log. It seems that it blocks the executions and not throwing any error.

[ktae13 (KB)]

I think you still needs to wait for connection-change to call getMediaStream(). What I can suggest is to create a button to enable/disable camera, and try to call startVideo() and renderVideo() using the button.

this.client.on("connection-change", async (payload) => {
   if (payload.state !== "Connected") return;
   this.stream = this.client.getMediaStream();
})

startVideo = async () => {
    try {
      if (!this.stream.isCapturingVideo()) {
        await this.stream.startVideo();
        // below could move to 'video-active-change' listener/
        const session = this.client.getSessionInfo();
        const canvas = document.querySelector("#user-video");
        await this.stream.renderVideo(canvas,session.userId,160,80,0,0,1);
      }
    } catch (error) {
      console.error('startVideo ERROR: ', error);
    }
  }

And call startVideo, from a button.

[treedis]

This works! thank you so much.
By the way, you can’t await on the renderVideo function. It won’t resolve and block rest of the execution

[treedis]

I had to do this:

startVideo = async () => {
    try {
      if (!this.stream.isCapturingVideo()) {
        await this.stream.startVideo();
        const session = this.client.getSessionInfo();
        const canvas = document.querySelector("#user-canvas");
        //we don't await on renderVideo because it never resolves
        this.stream.renderVideo(canvas, session.userId, 160, 80, 0, 0, 1);
      }
    } catch (err) {
      throw err;
    }
  };

otherwise if I await there, await startVideo() blocks the thread as it never resolves.

[tommy (Tommy Gaessler)]

Hey @treedis ,

Happy to hear you got it sorted out! Thanks for sharing your solution @ktae13 !

Let us know if we can help with anything else.

-Tommy