Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Erste Schritte mit Mediengeräten

Bei der Entwicklung für das Web bietet der WebRTC-Standard APIs für den Zugriff auf Kameras und Mikrofone, die an den Computer oder das Smartphone angeschlossen sind. Diese Geräte werden üblicherweise als Mediengeräte bezeichnet und können mit JavaScript über das Objekt navigator.mediaDevices MediaDevices werden, das die MediaDevices Schnittstelle implementiert. Von diesem Objekt aus können wir alle verbundenen Geräte auflisten, auf Geräteänderungen warten (wenn ein Gerät verbunden oder getrennt ist) und ein Gerät öffnen, um einen Medienstrom abzurufen (siehe unten).

Dies wird am häufigsten über die Funktion getUserMedia() , die ein Versprechen MediaStream für die passenden Mediengeräte in einen MediaStream . Diese Funktion verwendet ein einzelnes MediaStreamConstraints Objekt, das die Anforderungen angibt, die wir haben. Um beispielsweise einfach das Standardmikrofon und die Standardkamera zu öffnen, gehen wir wie folgt vor.

Versprechen verwenden

 const constraints = {
    'video': true,
    'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        console.log('Got MediaStream:', stream);
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });
 

Verwenden von async / await

 const openMediaDevices = async (constraints) => {
    return await navigator.mediaDevices.getUserMedia(constraints);
}

try {
    const stream = openMediaDevices({'video':true,'audio':true});
    console.log('Got MediaStream:', stream);
} catch(error) {
    console.error('Error accessing media devices.', error);
}
 

Der Aufruf von getUserMedia() löst eine Berechtigungsanforderung aus. Wenn der Benutzer die Berechtigung akzeptiert, wird das Versprechen mit einem MediaStream gelöst, der eine Video- und eine Audiospur enthält. Wenn die Berechtigung verweigert wird, wird ein PermissionDeniedError ausgelöst. Falls keine passenden Geräte angeschlossen sind, wird ein NotFoundError ausgelöst.

Die vollständige API-Referenz für die MediaDevices Oberfläche finden Sie in den MDN-Webdokumenten .

Mediengeräte abfragen

In einer komplexeren Anwendung möchten wir höchstwahrscheinlich alle angeschlossenen Kameras und Mikrofone überprüfen und dem Benutzer das entsprechende Feedback geben. Dies kann durch Aufrufen der Funktion enumerateDevices() . Dies gibt ein Versprechen zurück, das in ein Array von MediaDevicesInfo , das jedes bekannte Mediengerät beschreibt. Wir können dies verwenden, um dem Benutzer eine Benutzeroberfläche zu präsentieren, mit der er die von ihm bevorzugte auswählen kann. Jede MediaDevicesInfo enthält eine Eigenschaft namens kind mit dem Wert audioinput , audiooutput oder videoinput , der angibt, um welchen Medientyp es sich handelt.

Versprechen verwenden

 function getConnectedDevices(type, callback) {
    navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            const filtered = devices.filter(device => device.kind === type);
            callback(filtered);
        });
}

getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));
 

Verwenden von async / await

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

const videoCameras = getConnectedDevices('videoinput');
console.log('Cameras found:', videoCameras);
 

Abhören von Geräteänderungen

Die meisten Computer unterstützen das Anschließen verschiedener Geräte zur Laufzeit. Dies kann eine über USB angeschlossene Webcam, ein Bluetooth-Headset oder ein Satz externer Lautsprecher sein. Um dies ordnungsgemäß zu unterstützen, sollte eine Webanwendung auf die Änderungen von Mediengeräten warten. Dies kann durch Hinzufügen eines Listeners zu navigator.mediaDevices für das devicechange Ereignis erfolgen.

 // Updates the select element with the provided set of cameras
function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

// Fetch an array of devices of a certain type
async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Get the initial set of cameras connected
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);

// Listen for changes to media devices and update the list accordingly
navigator.mediaDevices.addEventListener('devicechange', event => {
    const newCameraList = getConnectedDevices('video');
    updateCameraList(newCameraList);
});
 

Medienbeschränkungen

Mit dem Constraints-Objekt, das die MediaStreamConstraints Schnittstelle implementieren muss, die wir als Parameter an getUserMedia() können wir ein Mediengerät öffnen, das einer bestimmten Anforderung entspricht. Diese Anforderung kann sehr lose definiert sein (Audio und / oder Video) oder sehr spezifisch (minimale Kameraauflösung oder eine genaue Geräte-ID). Es wird empfohlen, dass Anwendungen, die die API getUserMedia() zuerst die vorhandenen Geräte überprüfen und dann mithilfe der Einschränkung deviceId eine Einschränkung angeben, die dem genauen Gerät deviceId . Geräte werden nach Möglichkeit auch entsprechend den Einschränkungen konfiguriert. Wir können die Echokompensation auf Mikrofonen aktivieren oder eine bestimmte oder minimale Breite und Höhe des Videos von der Kamera einstellen.

 async function getConnectedDevices(type) {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.filter(device => device.kind === type)
}

// Open camera with at least minWidth and minHeight capabilities
async function openCamera(cameraId, minWidth, minHeight) {
    const constraints = {
        'audio': {'echoCancellation': true},
        'video': {
            'deviceId': cameraId,
            'width': {'min': minWidth},
            'height': {'min': minHeight}
            }
        }

    return await navigator.mediaDevices.getUserMedia(constraints);
}

const cameras = getConnectedDevices('videoinput');
if (cameras && cameras.length > 0) {
    // Open first available video camera with a resolution of 1280x720 pixels
    const stream = openCamera(cameras[0].deviceId, 1280, 720);
}
 

Die vollständige Dokumentation für die MediaStreamConstraints Oberfläche finden Sie in den MDN-Webdokumenten .

Lokale Wiedergabe

Sobald ein Mediengerät geöffnet wurde und ein MediaStream verfügbar ist, können wir ihn einem Video- oder Audioelement zuweisen, um den Stream lokal abzuspielen.

 async function playVideoFromCamera() {
    try {
        const constraints = {'video': true, 'audio': true};
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const videoElement = document.querySelector('video#localVideo');
        videoElement.srcObject = stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}
 

Der HTML- getUserMedia() , der für ein typisches Videoelement benötigt wird, das mit getUserMedia() wird, weist normalerweise die Attribute autoplay und playsinline . Das autoplay Attribut bewirkt, dass neue Streams, die dem Element zugewiesen sind, automatisch autoplay werden. Mit playsinline Attribut playsinline können Videos in bestimmten mobilen Browsern nicht nur im Vollbildmodus, sondern inline playsinline werden. Es wird auch empfohlen, controls="false" für Live-Streams zu verwenden, es sei denn, der Benutzer sollte in der Lage sein, diese anzuhalten.

 <html>
<head><title>Local video playback</video></head>
<body>
    <video id="localVideo" autoplay playsinline controls="false"/>
</body>
</html>