javascript - 在 WebRTC 连接中使用高分辨率本地视频但限制视频大小

Question

我正在为移动浏览器上的一对一 webrtc 视频通话开发一个网站。我还支持在本地流上捕获照片。对于照片捕获，我使用可用的 ImageCapture api，并在其他地方绘制到 Canvas 。

问题是我希望视频的高清分辨率为 1280x720(以减少通话所需的带宽)，而我需要拍摄 1920x1080 的照片。

我现在所做的是，在拍摄照片之前，我应用约束并将分辨率设置为全高清，拍摄后我将分辨率设置回高清。有时会发生的情况是由于分辨率的变化，照片没有对焦，因为相机必须重新对焦。

因此，如果我想要更高分辨率的照片，我会看到 2 个选项，其中我已经尝试过第一个:

1. 我尝试使用 2 个单独的 MediaStreamTracks，一个分辨率为 1280x720，我通过 WebRTC 连接发送，另一个分辨率为 1920x1080，我用来在本地显示它并捕获照片。这在大多数手机上运行良好，但有些手机的一个轨道有视频，但第二个轨道根本不起作用(它不显示任何视频)(特别是 iPhone 6s)
2. 如果可能，我将只使用一个分辨率为 1920x1080 的 MediaStreamTrack，并且我会限制连接本身内的视频大小，以便它通过 WebRTC 连接发送较低的分辨率。

所以我的问题是，是否可以在本地使用更高分辨率的视频，然后限制通过 WebRTC 连接发送的视频大小以减少带宽使用量？

Answer 1

is it possible to locally use higher resolution video and then limit the video size sent through WebRTC connection to reduce bandwith usage?

是的，使用 scaleResolutionDownBy ，一个 RTCRtpSender 的参数，它就是这样做的(iOS 除外)

此参数最初针对多层(联播)传输，在单一编码上也能正常工作。这是一个比率，你用 setParameters 设置它.还有一个 maxBitrate你可以直接控制:

const sender = pc.addTrack(cameraTrack);

async function setParams(height, bitrate) {
  const ratio = sender.track.getSettings().height / height;

  const params = sender.getParameters();
  params.encodings[0].scaleResolutionDownBy = Math.max(ratio, 1);
  params.encodings[0].maxBitrate = bitrate;
  await sender.setParameters(params);
}

参见 my blog用于工作演示。

浏览器错误和注意事项

不幸的是，浏览器有各种错误和围绕此功能的不同支持阶段:

1. Safari 实现 maxBitrate 但不实现 scaleResolutionDownBy，后者始终显示为 1。
2. Firefox 两者都支持，但仍在使用需要进行一些调整的早期版本的 setParameters。

我们通过为 Firefox 添加一个小调整来解决这个问题，并回退到使用 track.clone 和 applyConstraints 来缩小 Safari 中的规模:

// With workarounds for Firefox and Safari

const sender = pc.addTrack(cameraTrack.clone()); // Note we clone the track

async function setParams(height, bitrate) {
  const ratio = sender.track.getSettings().height / height;

  const params = sender.getParameters();
  if (!params.encodings) {
    params.encodings = [{}]; // Firefox workaround
  }
  params.encodings[0].scaleResolutionDownBy = Math.max(ratio, 1);
  params.encodings[0].maxBitrate = bitrate;
  await sender.setParameters(params);

  // Safari fallback
  if (sender.getParameters().encodings[0].scaleResolutionDownBy == 1) {
    await sender.track.applyConstraints({height});
  }
}

这是一个 tweaked version应该适用于所有浏览器的早期演示，包括 macOS 上的 Safari。

注意:一旦 Safari 添加了对 scaleResolutionDownBy 的 native 支持，fiddle 应该会采用新功能。不幸的是，在那之前，您会遇到与现在相同的 iOS 限制。

注意:Safari 14 supports scaleResolutionDownBy native (但不确定 iOS)。