CODEWITHSUNDEEP
cssopentoktokbox
Pamela
Pamela

Reputation: 684

Tokbox Local & Remote Video in a single screen

I have created a video chat using tokbox with publisher and subscriber videos in different divs and it is working fine. The examples provided by tokbox tutorials has the video elements in different divs. I want the local & remote video side by side, remote video in larger size and local video in smaller size, in a single video screen rather than as separate. https://tokbox.com/developer/guides/customize-ui/js/#video_dimensions

My current code is as:

<div class="remote">
<div class="video"><!--video-->
<div id="subscribers" class="subscribersContainer"></div>
</div>
</div>

and

<div class="local">
<div class="video">
<div id="myCamera" class="publisherContainer"></div>
 </div>
 </div>

var parentDiv = document.getElementById("myCamera");
var publisherDiv = document.createElement('div'); // Create a div for the publisher to replace
publisherDiv.setAttribute('id', 'opentok_publisher');
parentDiv.appendChild(publisherDiv);
var publisherProps = {publishAudio:true, publishVideo:true, frameRate: 30, width: VIDEO_WIDTH, height: VIDEO_HEIGHT, name: name};
publisher = OT.initPublisher(apiKey, publisherDiv.id, publisherProps);  // Pass the replacement div id and properties
session.publish(publisher);
//
var subscriberDiv = document.createElement('div'); // Create a div for the subscriber to replace
subscriberDiv.setAttribute('id', stream.streamId); // Give the replacement div the id of the stream as its id.
document.getElementById("subscribers").appendChild(subscriberDiv);
var subscriberProps = {publishAudio:true, publishVideo:true, frameRate: 30,width: VIDEO_WIDTH, height: VIDEO_HEIGHT};
subscribers[stream.streamId] = session.subscribe(stream, subscriberDiv.id, subscriberProps);

I want the video similar to this image:

enter image description here

I want local video opened in full screen initially and once remote video joins, the remote video to be enlarged and local video displayed in small size as in image.

Please, how is that possible?? New to Tokbox API. Hope they would have provided a bit more detailed documentation.

Upvotes: 3

Views: 752

Answers (1)

aiham
aiham

Reputation: 3614

You can use CSS to do most of what you're describing, but first you will need to set a class on the publisher container which indicates whether there are any subscribers in the session. You probably want to keep track of the number of subscribers in the session by incrementing a counter when a session's streamCreated event is fired and decrement when streamDestroyed is fired. You should set a CSS class (eg. class A) when the counter is one or more, and set a different CSS class (eg. class B) when the counter is zero.

You should make the publisher container full screen when class A is active, and use absolute positioning to make the publisher hover over the subscribers in the corner of the screen when class B is active.

As for the subscribers, the layout is up to you, you could tile them all the same size or dynamically resize the subscribers based on some custom logic. You may consider using https://www.npmjs.com/package/opentok-layout-js to help with dynamic layout of the subscribers.

Since opentok.js just inserts the publisher and subscriber videos into your supplied containers, you can use native HTML/CSS/JS to position and resize the containers however you want, there is no one way to do what you're asking.

Upvotes: 1

Related Questions