MediaDevices: Methode getSupportedConstraints()

Syntax

getSupportedConstraints()

Parameter

Keine.

Rückgabewert

Ein neues Objekt mit den vom User Agent unterstützten Constraints. Da die Liste nur unterstützte Constraints enthält, hat jede dieser booleschen Eigenschaften den Wert true. Nicht unterstützte Constraints fehlen in der Liste; beim Lesen ihrer Eigenschaften wird daher undefined zurückgegeben. Die verfügbaren Eigenschaften sind:

aspectRatio

Der User Agent unterstützt das Einschränken des Seitenverhältnisses (Breite geteilt durch Höhe) von Videospuren.

autoGainControl

Der User Agent unterstützt die Angabe, ob die automatische Verstärkungsregelung für Audiospuren aktiviert ist.

channelCount

Der User Agent unterstützt das Einschränken der Anzahl der Audiokanäle, beispielsweise auf einen Kanal für Mono oder zwei für Stereo.

deviceId

Der User Agent unterstützt die Auswahl einer Medienquelle anhand ihrer Geräte-ID.

displaySurface

Der User Agent unterstützt die Angabe eines bevorzugten Typs von Anzeigefläche (Browser-Tab, Fenster oder Monitor) für die Bildschirmaufnahme.

echoCancellation

Der User Agent unterstützt die Angabe, ob die Echounterdrückung für Audiospuren aktiviert ist.

facingMode

Der User Agent unterstützt die Angabe der Ausrichtung einer Kamera, beispielsweise zum Benutzer oder zu dessen Umgebung.

frameRate

Der User Agent unterstützt das Einschränken der Bildrate von Videospuren in Bildern pro Sekunde.

groupId

Der User Agent unterstützt die Auswahl einer Medienquelle anhand ihrer Gruppen-ID, die Quellen desselben physischen Geräts kennzeichnet.

height

Der User Agent unterstützt das Einschränken der Höhe von Videospuren.

latency

Der User Agent unterstützt das Einschränken der Latenz von Audiospuren in Sekunden.

logicalSurface

Der User Agent unterstützt die Angabe, ob bei der Bildschirmaufnahme logische Anzeigeflächen verwendet werden, die auf dem Bildschirm möglicherweise nicht vollständig sichtbar sind.

noiseSuppression

Der User Agent unterstützt die Angabe, ob die Rauschunterdrückung für Audiospuren aktiviert ist.

resizeMode

Der User Agent unterstützt die Angabe, ob Zuschneiden und Herunterskalieren verwendet werden dürfen, um Auflösung und Bildrate einer Videospur zu bestimmen.

restrictOwnAudio

Der User Agent unterstützt die Angabe, ob Systemaudio, das vom aufzeichnenden Tab stammt, aus der Bildschirmaufnahme herausgefiltert wird.

sampleRate

Der User Agent unterstützt das Einschränken der Abtastrate von Audiospuren.

sampleSize

Der User Agent unterstützt das Einschränken der Abtastgröße von Audiospuren in Bit pro linearem Abtastwert.

suppressLocalAudioPlayback

Der User Agent unterstützt die Angabe, ob Audio, das in einem aufgezeichneten Tab abgespielt wird, weiterhin über die lokalen Lautsprecher des Benutzers wiedergegeben wird.

volume

Der User Agent unterstützt das Einschränken der Lautstärke von Audiospuren von 0.0 (Stille) bis 1.0 (höchste unterstützte Lautstärke).

width

Der User Agent unterstützt das Einschränken der Breite von Videospuren.

Beispiele

Unterstützung für Constraints prüfen

Dieses Beispiel erzeugt eine Tabelle, die zeigt, ob Ihr Browser die jeweils aufgeführten Constraints unterstützt.

HTML

<table>
  <caption>
    Media constraint support
  </caption>
  <thead>
    <tr>
      <th scope="col">Constraint</th>
      <th scope="col">Supported</th>
    </tr>
  </thead>
  <tbody id="constraintSupport"></tbody>
</table>

body {
  font:
    15px "Arial",
    sans-serif;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid;
  padding: 0.25em 0.5em;
  text-align: left;
}

JavaScript

const constraints = [
  "aspectRatio",
  "autoGainControl",
  "channelCount",
  "deviceId",
  "displaySurface",
  "echoCancellation",
  "facingMode",
  "frameRate",
  "groupId",
  "height",
  "latency",
  "logicalSurface",
  "noiseSuppression",
  "resizeMode",
  "restrictOwnAudio",
  "sampleRate",
  "sampleSize",
  "suppressLocalAudioPlayback",
  "volume",
  "width",
];
const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
const tableBody = document.querySelector("#constraintSupport");

for (const constraint of constraints) {
  const row = document.createElement("tr");
  const name = document.createElement("th");
  name.scope = "row";
  const code = document.createElement("code");
  code.textContent = constraint;
  name.appendChild(code);

  const support = document.createElement("td");
  support.textContent = supportedConstraints[constraint] ? "Yes" : "No";

  row.append(name, support);
  tableBody.appendChild(row);
}

Ergebnis

Constraints vor dem Anfordern einer Bildschirmaufnahme prüfen

Die folgende Funktion richtet das Optionsobjekt für den Aufruf von getDisplayMedia() ein. Sie fügt jeden der folgenden Constraints nur hinzu, wenn bekannt ist, dass der Browser ihn unterstützt:

• displaySurface, um die Freigabe eines gesamten Monitors zu bevorzugen.
• logicalSurface, um logische Anzeigeflächen anzufordern, die auf dem Bildschirm möglicherweise nicht vollständig sichtbar sind.
• suppressLocalAudioPlayback, um zu bewirken, dass aufgezeichnetes Audio nicht über die lokalen Lautsprecher des Benutzers wiedergegeben wird.

Diese Constraints schränken nicht ein, welche Anzeigeflächen der Benutzer für die Freigabe auswählen kann. Anschließend wird die Aufnahme gestartet, indem getDisplayMedia() aufgerufen und der zurückgegebene Stream dem durch videoElem repräsentierten Element unsupported templ: ( zugewiesen wird.

async function capture(videoElem) {
  const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
  const displayMediaOptions = {
    video: {},
    audio: {},
  };

  if (supportedConstraints.displaySurface) {
    displayMediaOptions.video.displaySurface = "monitor";
  }

  if (supportedConstraints.logicalSurface) {
    displayMediaOptions.video.logicalSurface = true;
  }

  if (supportedConstraints.suppressLocalAudioPlayback) {
    displayMediaOptions.audio.suppressLocalAudioPlayback = true;
  }

  try {
    videoElem.srcObject =
      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch (err) {
    /* handle the error */
  }
}

Spezifikationen

Browser-Kompatibilität