Search code examples
opentok

Setting width/height for subscriber div elements via properties

One can set width/height for the publisher div element via properties: http://www.tokbox.com/opentok/docs/js/reference/TB.html

However, it's not possible to do the same for the other streams. The properties don't have width/height: http://tokbox.com/opentok/webrtc/docs/js/reference/Session.html#subscribe

Even if set via CSS, they'll be overwritten.

For example, how can one make an app like facetime where subscribed video stream is much larger than the publisher stream?

Solution

  • You can set the subscriber div's height and width by passing an object with a width and height attribute to the session.subscribe function:

    session.subscribe(stream, divid, {width: 320, height: 240});

    You could also style it with CSS by using a parent container and setting the subscriber's width/height to 100%:

    session.subscribe(stream, divid, {width: "100%", height: "100%"});

    Here's an example of making a large subscriber that might help you.