css - 单屏 Tokbox 本地和远程视频

Question

我使用 tokbox 与不同 div 中的发布者和订阅者视频创建了视频聊天，并且工作正常。 tokbox 教程提供的示例在不同的 div 中具有视频元素。我希望本地和远程视频并排显示，较大尺寸的远程视频和较小尺寸的本地视频，在单个视频屏幕中而不是分开显示。 https://tokbox.com/developer/guides/customize-ui/js/#video_dimensions

我当前的代码如下:

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

和

<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);

我想要类似于此图片的视频:

我希望本地视频最初以全屏打开，一旦远程视频加入，远程视频将被放大，本地视频将以小尺寸显示，如图像所示。

请问，这怎么可能？？ Tokbox API 的新功能。希望他们能提供更详细的文档。

Answer 1

您可以使用 CSS 来完成您所描述的大部分内容，但首先您需要在发布者容器上设置一个类，以指示 session 中是否有任何订阅者。您可能希望通过在触发 session 的 streamCreated 事件时递增计数器并在触发 streamDestroyed 时递减计数器来跟踪 session 中的订阅者数量。当计数器为 1 或更多时，您应该设置一个 CSS 类(例如类 A)，当计数器为零时设置不同的 CSS 类(例如类 B)。

当类 A 处于事件状态时，您应该使发布者容器全屏显示，并在类 B 处于事件状态时使用绝对定位使发布者悬停在屏幕 Angular 落的订阅者上方。

至于订阅者，布局由您决定，您可以将它们平铺成相同大小或根据一些自定义逻辑动态调整订阅者的大小。您可以考虑使用 https://www.npmjs.com/package/opentok-layout-js帮助订阅者的动态布局。

由于 opentok.js 只是将发布者和订阅者视频插入到您提供的容器中，您可以使用 native HTML/CSS/JS 来根据需要定位和调整容器大小，没有一种方法可以满足您的要求.