Resizing subscriber stream

Ask general questions or talk about OpenTok here! Questions about a specific OpenTok API Platform should be asked in its respective forum.

Resizing subscriber stream

Postby sdumosch » Thu Nov 22, 2012 3:54 pm

Hi,
Can someone help me understand why this doesn't work? I want to resize the subscriber stream using a CSS class as described in the Best Practices tutorial. I'm not using jquery though. here's my final html:

<div id="subscribers">
<object type="application/x-shockwave-flash" id="subscriber_486229130_1" style="outline:none;" data="http://static.opentok.com/v1.1.0/flash/f_subscribewidget.swf partnerId=21524152" width="320" height="240"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent">...(rest of tokbox code here)
</div>

I then want to make it smaller or bigger using these styles:
div.small {
width: 100px;
height: 75px;
}
div.medium {
width: 400px;
height: 300px;
}

I then call this function to add the new class to the 'subscriber' div:
document.getElementById("subscribers").className += "small";

The class gets successfully added to the div but nothing changes. Am I missing something? I am using Chrome.

Thanks,
-steve
Was this post helpful? (0)
sdumosch
 
Posts: 4
Joined: Fri Nov 16, 2012 4:28 am
Thumbs Up: 0

Re: Resizing subscriber stream

Postby adam » Thu Nov 22, 2012 5:55 pm

You need to change the size of the object tag not the div around it. You can do that with:

Code: Select all
...
var subscriber = session.subscribe(stream);
var subEl = document.getElementById(subscriber.id);
subEl.width = 100;
subEl.height = 75;


For some reason you actually set the width and height elements on an object tag as opposed to the style.width and style.height and you don't add the "px" on the end.
Was this post helpful? (1)
adam
 
Posts: 60
Joined: Thu May 05, 2011 8:35 pm
Thumbs Up: 3

Re: Resizing subscriber stream

Postby sdumosch » Fri Nov 23, 2012 9:42 am

Thanks for this. It helps - somewhat. The scenario i'm trying to do is allow a user to pick from a dropdown box of 3 sizes of the video frame (small, medium, large) and have the video resize accordingly. I'm not sure how to get a hold of the stream object when i'm starting a call from a dropdown select event. Any advice? Should I call session.signal()?
Was this post helpful? (0)
sdumosch
 
Posts: 4
Joined: Fri Nov 16, 2012 4:28 am
Thumbs Up: 0

Re: Resizing subscriber stream

Postby adam » Fri Nov 23, 2012 2:25 pm

You don't need to signal the other side to change the size of the stream. You can just change the size of the subscriber widget locally with the code above.
Was this post helpful? (0)
adam
 
Posts: 60
Joined: Thu May 05, 2011 8:35 pm
Thumbs Up: 3

Re: Resizing subscriber stream

Postby sdumosch » Fri Nov 23, 2012 3:18 pm

Sorry i think i'm missing something - in your code above you reference the stream object. When i raise my event from the dropdown selection, the only object i have access to is the session object. How do i get a proper stream object from the session object?
Was this post helpful? (0)
sdumosch
 
Posts: 4
Joined: Fri Nov 16, 2012 4:28 am
Thumbs Up: 0

Re: Resizing subscriber stream

Postby sdumosch » Fri Nov 23, 2012 4:19 pm

SOLVED. The problem i had was really the CSS Style syntax. You need the > * in the styles to make it work. ie.
<style type="text/css">
div.small > * {
width: 100px;
height: 75px;
}
</style>

You can then simply get a handle to the wrapper div and change the class name appropriately:
el = document.getElementById("subscribers");
el.className = 'small';
Was this post helpful? (0)
sdumosch
 
Posts: 4
Joined: Fri Nov 16, 2012 4:28 am
Thumbs Up: 0

Re: Resizing subscriber stream

Postby janine » Fri Nov 23, 2012 5:06 pm

Awesome. Thanks for sharing back with the community!
Was this post helpful? (0)
janine
 
Posts: 1681
Joined: Thu May 05, 2011 7:10 pm
Thumbs Up: 20

Re: Resizing subscriber stream

Postby adam » Sun Nov 25, 2012 4:18 pm

That works too, that way you're changing the size of all the direct children of the div so the object tag will change size as well. Probably safer to use

Code: Select all
div.small > object,div.small > embed {
...
}


in case you add any other elements into your container div.
Was this post helpful? (0)
adam
 
Posts: 60
Joined: Thu May 05, 2011 8:35 pm
Thumbs Up: 3


Return to Discussion and Questions



Who is online

Users browsing this forum: Google [Bot] and 0 guests

cron