Question

我正在构建一个具有一对一视频聊天功能的 React 网站。基本上是通过网站重新创建 Facetime，但不是原生应用。

一切正常，我只是想拨入用户界面。

我希望用户在左下角看到他们视频的一个小的本地副本（比如在 Facetime 上）。我希望他们在整个/大部分屏幕上都能看到他们朋友的视频。

问题是人们可能会通过移动设备或计算机聊天。视频源的纵横比或宽度/高度会根据用户使用的设备和设备所处的方向而变化。因此，我需要动态处理在正确的尺寸。

我想一种选择是使用@media 查询指定保存每个屏幕尺寸的视频流的父 div 的尺寸。然而，当新的屏幕尺寸出现时，这看起来很冗长并且容易崩溃。

有没有其他人处理过这个问题并对如何解决它有建议？

Answer 1

基本上，我猜您正在使用 p2p webrtc 技术来构建 1:1 视频聊天。由于性能有限，我们通常不使用 p2p。

正如您在此处看到的，我们确实存在 p2p 连接的性能问题。由于这个原因，我认为您需要尽可能降低p2p连接的屏幕分辨率，然后在客户端您需要将视频播放器的宽度和高度设置为大于p2p连接的屏幕分辨率。

例如

当您尝试建立 p2p 连接时，您可以像这样指定分辨率：

let mediaConstraints = {
    video: {
      width: {max: 640},
      height: {max: 480},
      frameRate: {max: 30},
    },
    audio: true
};

但在客户端，我的意思是在 HTML 中，您可以指定高于分辨率的视频播放器的宽度和高度，如下所示：

<video style="width: 1024px; height: 840px" />