Welche Einschränkungen sollte ich an getUserMedia() übergeben, um zwei Video-mediaStreamTracks zu erhalten?
P粉818317410
P粉818317410 2023-10-23 17:03:58
0
1
619

Ich kann mediaDevices vom Typ „videoinput“ über navigator.mediaDevices.enumerateDevices() Promise erhalten.

Ich kann mediaStream per navigator.mediaDevices.getUserMedia(constraints) Versprechen erhalten.

Wie sollte constraints aussehen, um zwei Videospuren in userMedia zu haben?

P粉818317410
P粉818317410

Antworte allen(1)
P粉060528326

每次调用getUserMedia()时最多可以获得一个视频轨道和一个音频轨道,但可以多次调用。不过,这可能会多次询问用户,具体取决于 https、浏览器以及用户的操作。

遵循标准(目前需要在 Chrome 中使用 adapter.js ),以获得特定的“videoinput " 设备,使用 deviceId 约束将其 deviceId 传递到 getUserMedia 中:

navigator.mediaDevices.enumerateDevices()
.then(devices => {
  var camera = devices.find(device => device.kind == "videoinput");
  if (camera) {
    var constraints = { deviceId: { exact: camera.deviceId } };
    return navigator.mediaDevices.getUserMedia({ video: constraints });
  }
})
.then(stream => video.srcObject = stream)
.catch(e => console.error(e));

exact 关键字使约束成为必需,保证它只返回正确的约束,否则就会失败。

如果您想要两个摄像头,则必须使用不同的 deviceId 再次调用 getUserMedia,并希望您所在的操作系统支持它(例如,手机通常不要)。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage