Question

我正在探索使用Twilio-video功能在我们的网络应用中进行一对一视频聊天功能的可能性（我知道它是测试版）。

我正在尝试这样的布局：http://jsfiddle.net/0p8s1omp/82/

.MainContainer {position:relative;}
.remote-container{
    height: 400px;
    background-color: black; 
    position:relative;
    text-align: center;
}

.local-container{
    height: 20%;
    width:20%;
    background-color: green;    
    position:absolute;
    top:0;
}

想法是将本地视频轨道覆盖在远程摄像机的源上。

当我在我的应用程序中尝试类似的HTML / CSS结构时，它几乎可以工作（我认为） - 本地摄像机轨道似乎布置在“下方”，即遥控器。
当我检查并将鼠标悬停在源中的本地元素上时，Chrome会显示一个阴影矩形，其中应包含本地视频，但它不可见 - 我只能看到远程视频。

我尝试将遥控器的Z-index设置为-1，但这似乎不起作用。

这是Twilio-video或我的HTML / CSS的问题（也许我需要做些什么才能让视频元素以我想要的方式布局？）

Answer 1

我破解了似乎有用的东西，但不确定它是否是正确的方法。下面的代码是scala.js（请注意，我在Scala的情况比在Javascript时更糟）但是你得到了一般的想法。

def onInvitedToConversation = (conversation: TwilioConversation) => {
  log.info("invited to conversation: " + conversation)
  onParticipantConnected(conversation, (participant: TwilioParticipant) => {
    log.info("participant connected: " + participant.identity)
    kopi.showScreen(
      div(
        position.relative,
        div(id:="remote-media",
          position.relative
        ),
        div(id:="local-media",
          position.absolute,
          top:="10px",  // position the local media at top left
          left:="10px",
          height:="20%" // size the local media to 20%
        )
      )
    )

    participant.media.attach("#remote-media")
    conversation.localMedia.attach("#local-media")

    // the video element is added to the div by the "attach" call above
    val video = jQuery("#local-media video")
    video.attr("height", "100%")

  }: Unit)

}

这里的所有内容都是明显的代码，除了视频元素的高度属性 - 但无论出于何种原因，这都是它的工作原理。如果没有height属性，本地媒体视频将只是Twilio默认提供的大小。

Twilio视频：如何通过远程视频源叠加本地摄像机视频？

1 个答案: