Video in not getting render on canvas

Video SDK Web
1

Description
Video is not getting rendered on the canvas in fact of successfully promise returned while mediaStream.renderVideo.

Error
After connecting to the meeting, when I start my video it renders successfully on the canvas. But, after that when I disable my video and enable my video again, promise to render video returns success but my video is not displayed on canvas.

Which Web Video SDK version?
web video sdk ^1.1.0. I have tested on latest version (1.1.3) but issue still persist

To Reproduce
To reproduce the issue, try to toggle the video multiple times.

Device :

  • Device: MacBook Pro (16-inch, 2019)
  • OS: 11.2
  • Browser: Chrome
  • Browser Version 91.0.4472.114

Additional context
Have clone the same code here in react-demo directory

2

Hey @nirbhay.ram

Thanks for your feedback.

This is a known issue. We use ImageCapture in Video SDK, but it has potential problems that may cause video stuck. So we introduce WebCodecs to improve the issue. Since the API is not stable yet, you should register an origin trial to enable this feature.

Thanks
Vic

1 Like
3

Hey @vic.yang

Thanks for prompt reply.

I have tried to activate WebCodecs experimental feature and seems that it resolves the problem.

It seems that this is experimental feature for chrome which is not going to release in near future. What about other browser? (safari, firefox)

And also what is release plan for video sdk to allow more than 9 videos rendering?

1 Like
4

Hey @nirbhay.ram

Safari and Firefox are limited in rendering video. They can only support a single video rendering at the same time.

Rendering more than 9 videos at the same may lead to high CPU and memory usage, so we still limit the capacity.

Thanks
Vic

1 Like
5

Hey @vic.yang

Currently I am trying to render more than 1 videos on different canvas in safari as well as firefox and it’s seems that videos are getting render once. Then after toggling video it black out.

When can we expect full support for both the browser as well?

Thanks
Nirbhay

6

Hey @nirbhay.ram

That depends on the ability of the browser. In Video SDK, rendering multiple videos requires SharedArrayBuffer and OffscreenCanvas. And it would be better if WebAssembly SIMD is enabled.

Thanks
Vic

1 Like
7

Hey @vic.yang

Thanks for clearing things out.

There is also one more problem while positioning video on canvas in firefox and safari, it is not getting positioned as expected. It positioned perfectly in chrome. Are you guys aware of that issue?

Thanks
Nirbhay

1 Like
8

Hey @nirbhay.ram ,

Could you show a screenshot of the positioning issue and your HTLM Canvas and CSS code so we can reproduce the issue? It could just be a CSS edge case in Firefox/Safari and not an issue with the Video SDK rendering.

Thanks,
Tommy

9

Hey @tommy,

I am using the same react sample app code.

Connect two participant with video on in firefox and you will able to see the issue.

Thanks
Nirbhay

10

Hey @nirbhay.ram

That’s a known issue, and we will fix it in the future release.

Thanks
Vic

12

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