Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Scroll bars in screenshare

Avatar

Level 2

Hi,

I need some help with screensharing,

We have implemented screensharing,but the shared screen is not proportionally fitting in the viewer's window and shows up a scroll bar.

At present we have assigned values for height and width of the black screen(container) that displays the screen shared.

Need to know a solution to make the shared screen to fit in without scrolls as we have in skype.\

Thanks,

Harshini

8 Replies

Avatar

Former Community Member

When you intialize  the ScreenShareSubscriberComplex, you just need to set the percentWidth and percentHeight (like below).  If you just assign widths to your parent container, you will get scroll bars, because the subscriber component won't resize with its container. 

sss = new ScreenShareSubscriberComplex();

sss.connectSession = cSession;

sss.percentWidth = 100;

sss.percentHeight = 100;

sss.x = 0;

sss.y = 0;

sss.showMyStream = true;

displayArea.addChild(sss);

Hope that helps,

John

Avatar

Former Community Member

Hi,

I'm having the same issue, unfortunately setting percentWidth or percentHeight (and width or height) didn't work.

Avatar

Former Community Member

You need to make sure that the parent container also has widths specified in % values (ie):

<mx:HBox id="displayArea" width="100%" height="100%" label="Screen Sharing"

         backgroundColor="#FFFFFF" creationComplete="ssViewerInit()"/>

if you still have problems,  you may want to move your parent container to the root level of your layout temporarily until you get it working correctly.

Avatar

Former Community Member

Hmm, could you please take a look at my layout markup:

I create a ScreenSharingSubscriber object run-time and add it to the screenSharePublisherTab.

Thank you very much.

Avatar

Former Community Member

Here is a sample that will do what you want.  You can still get a single scroll bar occasionally when you really skew the viewport dimensions, but for the most part, this does the best job of utilizing the available space. Not sure why your code does not do it,  like I said before, you have a lot of nested layout regions in there.  It may be simpler for you to start with an example that works, and then add the rest of your bits back in.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

                width="100%" height="100%"

                xmlns:rtc="http://ns.adobe.com/rtc">

   

    <mx:Script>

        <![CDATA[

            import com.adobe.rtc.collaboration.ScreenShareSubscriberComplex;

       

            private function init():void{

                var sss:ScreenShareSubscriberComplex= new ScreenShareSubscriberComplex();

                sss.connectSession = cSession;

                sss.percentWidth = 100;

                sss.percentHeight = 100;

                sss.x = 0;

                sss.y = 0;

                displayArea.addChild(sss);

            }

        ]]>

    </mx:Script>

    <rtc:AdobeHSAuthenticator id="auth"  userName="test" />

    <rtc:ConnectSessionContainer id="cSession" authenticator="{auth}" width="100%" height="100%" roomURL="url_to_your_room"  backgroundAlpha="0" >   

        <mx:HBox width="100%" height="100%" id="displayArea" creationComplete="init()"/>

    </rtc:ConnectSessionContainer> 

   

</mx:Application>

Avatar

Former Community Member

First of all, thank you for time John.

I tried what you've suggested but I still have scroll bars. If I switch my browser to fullscreen mode, scrollbars disappear. But what I want is, auto-fit the shared screen's image to the size of the subscriber's container.

Avatar

Former Community Member

You may want to think about using a canvas with a resize event:

<mx:Canvas id="pageContainer" width="100%" height="100%" resize="resizeScreenComponents()">

     layout goes here

</mx:Canvas>

And then resizing your layout programatically, something like:

private function resizeScreenComponents():void

{

     control.width = pageContainer.width *.5;

     control.height = pageContainer.height * .5;

     ...

}