WebRTC：Safari 阻止视频画中画？

Question

我正在开发一个 WebRTC UI，它在一个小元素中显示用户的视频，该元素位于用户正在与之交谈的人的视频前面。

这是一个可用的代码笔：

CSS

#pipContainer {
    position: relative;
    top: 0;
    left: 0;
  width: 250px;
}

#otherCallerVideo  {
    position: relative;
    top: 0;
    left: 0;
  width: 100%;
}

#myVideo {
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotateY(-180deg);
    z-index: 1000;
}

HTML

  <p id="status">Loading room information...</p>

  <div id="start">
    <button  onclick="start(event)">Start</button><br/>
  </div>

  <div id="pipContainer">
    <video id="otherCallerVideo" playsInline="true" autoPlay></video>
    <video id="myVideo" playsInline="true" autoPlay muted></video>
  </div>

这在 Chrome 和 Firefox 中工作正常，但 Safari OS X 和 IOS 似乎不允许这样做。用户的视频消失。我已经尝试了很多不同的方法，使用 z-index 和不同类型的定位，但我还没有找到一种方法让它在 Safari 中工作。

是否可以在 Safari 中执行此操作？

Answer 1

我成功了。这是一个更新的 CodePen。

https://codepen.io/VikR/pen/Wgwwoa

关键是将此 overflow 代码放入视频容器中：

#pipContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 5px solid black;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

很难追踪到。谷歌搜索 "safari z-index video elements" 显示许多人对此有困难，2011 年至 2018 年的帖子出现在结果的第一页。许多在其他情况下有效的修复在这种情况下似乎不起作用，可能是因为我将一个视频元素叠加在另一个视频元素之上。已找到有效的修复 here.

注意 1：overflow: 'hidden' 也有效，并且具有隐藏滚动条的额外好处。

注意 2：我的印象是可能无法通过 javascript 更改视频尺寸。在我的应用程序中，我目前通过参考 screen.height.

在 HTML 渲染上设置它们

WebRTC：Safari 阻止视频画中画？

WebRTC: Safari Blocks Video Picture-in-Picture?

css

safari

video-streaming

ios

webrtc