Javascript 使用高分辨率本地视频，但限制WebRTC连接中的视频大小

我正在为移动浏览器上的一对一webrtc视频通话开发一个网站。我还支持在本地流中捕获照片。对于照片捕获，我使用可用的

ImageCapture

api，并在其他地方绘制画布

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

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

因此，如果我想要更高分辨率的照片，我会看到两种选择，其中我已经尝试了第一种：

我尝试使用两个独立的

MediaStreamTracks

，一个分辨率为1280x720，通过WebRTC连接发送，另一个分辨率为1920x1080，用于本地显示和拍摄照片。这在大多数手机上都很有效，但也有一些手机，其中一个曲目有视频，但第二个曲目根本不起作用（它没有显示任何视频）（特别是iPhone 6s）

如果可能，我将只使用一个分辨率为1920x1080的

MediaStreamTrack

，并且我将限制连接本身的视频大小，以便它通过WebRTC连接发送较低的分辨率

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

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

是，使用，RTCRtpSender的一个参数，它只执行此操作（iOS中除外）

该参数最初用于多层（同步广播）传输，在单个编码上也可以正常工作。这是一个比率，你可以用。还有一个可以直接控制的功能：

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);
}

请参阅，以获取可用的演示

浏览器错误和注意事项 不幸的是，浏览器围绕此功能存在各种错误和不同的支持阶段：

Safari实现了

maxBitrate

，但没有

scaleResolutionDownBy

，它始终显示为

1

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});
  }
}

这是一个早期的演示，应该可以在所有浏览器中使用，包括macOS上的Safari

注意：一旦Safari添加了对

scaleResolutionDownBy

的本机支持，小提琴手就应该开始学习新功能了。在此之前，您将不幸地在iOS上遇到与现在相同的限制

注意：Safari 14

scaleResolutionDownBy

本机（但不确定iOS）