Web Video sdk screenshare not working in mobile (instantSDk)

Video SDK Web
1

Description
I m trying to build a screen-sharing service. Everything is working fine for desktop-to-desktop sharing, but when i share my screen from desktop and receive on mobile device, I am receiving the undefined stream for mobile.

Error
Not able to get the shared canvas on mobile.

Which Web Video SDK version?
I am using zoom web video sdk version 1.9.1 (instankSDK)

Screenshots
Received Stream in case of Desktop

Screenshot 2021-05-21 at 12.45.30 PM
Screenshot 2021-05-21 at 12.45.30 PM1378×962 165 KB

In case of Mobile I am getting receivedSharingCanvas as undefined

2

Received Stream for Mobile

Screenshot 2021-05-21 at 12.50.42 PM
Screenshot 2021-05-21 at 12.50.42 PM1374×962 159 KB

3

Hey @siddhant28r ,

Thanks for reporting this issue to us. Can you please share steps to reproduce the issue and the browsers and browser versions you are using?

Thanks,
Tommy

4

Hey @tommy ,
I am trying to integrate the instantSdk with vue3,

Steps to reproduce the issue:

  1. Create a meeting,
  2. Now, I am trying to do the next mentioned steps on a single button click
    2.1 Join members in the meeting,
    2.2 And simultaneously start sharing the screen of the host (I am
    using firebase notifications to add members to the meeting (member is added in the meeting
    when a particular firebase event happens))
    2.3 I have put a watcher on ‘activeScreenChange’ so that when the host’s screen is sent via stream,
    ‘activeScreenChange’ will get triggered and render the screen on canvas, and this works fine in
    desktop.
  3. Issue:- But for mobile I receive an empty stream every time (issue happens when i try to share
    screen from desktop and receive on mobile)
  4. There is one more issue when we share screen from chrome to firefox, everything works fine for 1st time but after that we just see black screen in firefox (even after receiving the stream), but if we share from firefox to chrome then everything works fine (this issue is in desktop)

I have tested this
on Chrome - Version 90.0.4430.212, and Firefox - Version 88.0.1 (for desktop)
on Chrome - Version 83.0.4103.101 (for mobile)

5

Hey @siddhant28r ,

For mobile browsers, unfortunately they are not fully supported yet. https://marketplace.zoom.us/docs/sdk/video/web#browser-support

Can you please explain this further? Are you saying it works fine the 1st time, but when you stop screensharing and then screen share again it does not work and there is a black screen?

Thanks,
Tommy

6

Hi @tommy ,
Thanx for the update on mobile support.

And
=> Yes, if we re-share screen from firefox to chrome then there’s only black screen.

7

Thanks @siddhant28r .

Can you check to see if there are any errors in the browser console when this black screen occurs?

Thanks,
Tommy

8

Hi @tommy ,
Nope, there aren’t any errors in the console.

9

Hey @siddhant28r ,

I believe this is due to the canvas element needing the width and height set. Example:

<canvas id="canvas" width="1920" height="1080"></canvas>

In my testing, the Canvas was 0 hight and 0 width in safari / firefox unless I explicitly set the width and height.

Let me know if that helps. :slight_smile:

Thanks,
Tommy

10

Hi @tommy ,
In my case i have used canvas inside a div that has fixed width and height and then i m giving width and height as 100% to the canvas, won’t it work?

<div id="canvas-holder" width="1920" height="1080">
    <canvas id="canvas" class="dimensions"></canvas>
</div>

.dimensions {
   height: 100%;
   width: 100%;
}
11

Hey @siddhant28r ,

You can set the dimensions and aspect ratio / resolution on the canvas element as well.

<canvas id="canvas" class="dimensions" width="1920" height="1080"></canvas>

.dimensions {
   height: 100%;
   width: 100%;
}

Thanks,
Tommy

12

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