stopVideo leaving black boxes behind in safari

Video SDK
1

We are upgrading from Video SDK Web 1.12.10 to 2.1.5 and note that stopRenderVideo() and renderVideo() are now deprecated.

We were using these to render to a canvas on Safari in our previous versions.

We’ve switched to using attachVideo() and detachVideo() for all browsers which is working fine in Chrome and allowing camera to be toggled on/off. On Safari and Firefox when the camera is toggled off after starting a black box is remaining for both remote and self view.

We are attaching the video to the video-player-container.

Is something additional needed on Safari? The example is still using renderVideo and stopRenderVideo in video-single.tsx so I cannot see how to use detachVideo() in safari.

2

Hey @LJ155

Thanks for your feedback.

Could you share some code snippets related to the issue you mentioned so we can troubleshoot it?

Thanks
Vic

3

Thanks, yes here’s our code -

      const videoResult = await stream.startVideo();
      if (typeof videoResult === 'string' || videoResult === undefined) {
        const video = await stream.attachVideo(
          userId,
          VideoQuality.Video_720P
        );
        if (video instanceof HTMLElement) {
          videoPlayerContainer.appendChild(video);
        }

This is attaching the video correctly in all browsers

 await stream.stopVideo();
      const elements = await stream.detachVideo(userId);
      if (Array.isArray(elements)) {
        elements.forEach(e => e.remove());
      }
      else {
        elements.remove();
      }

This removes the video in chrome, but is leaving black boxes behind in Safari and Firefox.

Thanks!

4

Any ideas based on the above? Still leaving black boxes behind in Safari/Firefox.

We are currently rendering to a canvas using renderVideo() and stopRenderVideo().

Thanks!

5

Hey @LJ155

Thanks for sharing the information with us.

It’s a known limitation on our end.

Currently, a workaround for Safari is to set enforceMultipleVideos to true in the client.init method.

We will fix the issue in the future release.

Thanks
Vic

6

Thanks, enforceMultipleVideos is still leaving the black boxes behind on safari and firefox.
We will wait for the fix, thanks.

7

Hey @LJ155

We have released Video SDK Web 2.1.10, which includes a fix for this issue.

Could you upgrade to the latest version and try again?

Thanks
Vic

8

Hi @vic.yang, that’s sorted it on our end! Thanks!