Twilio 视频：如何将本地摄像机视频覆盖在远程视频源上？

Question

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

我正在尝试获得类似这样的布局：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 结构时，它几乎可以工作（我认为）- 本地摄像机轨道似乎布置 "underneath"，远程。
当我检查并将鼠标悬停在源中的本地元素上时，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 属性之外，这里的所有内容几乎都是显而易见的代码 - 但无论出于何种原因，这都是使它起作用的原因。如果没有 height 属性，本地媒体视频将只是 Twilio 默认提供的任何大小。

Twilio 视频：如何将本地摄像机视频覆盖在远程视频源上？

Twilio video: How can I overlay the local camera video over the remote video feed?

html

css

video

twilio