Google verpflichtet sich Rassen Eigenkapital für Black Gemeinden voranzutreiben. Siehe wie.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Erste Schritte mit Mediengeräten

Wenn für die Web-Entwicklung stellt die WebRTC Standard-APIs für auf dem Computer oder Smartphone angeschlossenen Kameras und Mikrofone zugreifen. Diese Geräte werden allgemein als Mediengeräte und können mit JavaScript durch das zugegriffen werden navigator.mediaDevices Objekt, welches implementiert die MediaDevices Schnittstelle. Von diesem Objekt können wir alle angeschlossenen Geräte, hören für Geräte Änderungen aufzuzählen (wenn ein Gerät angeschlossen ist oder nicht), und ein Gerät öffnen Sie ein Media Stream (siehe unten) abgerufen werden.

Der gängigste Weg , dies verwendet wird , ist durch die Funktion getUserMedia() , die ein Versprechen gibt , die zu einem beheben wird MediaStream für die passenden Medien - Geräte. Diese Funktion nimmt ein einzelnes MediaStreamConstraints Objekt , das legt die Anforderungen , dass wir haben. So einfach das Standardmikrofon zu öffnen und Kamera, würden wir folgendes tun.

Mit Promises

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

Mit 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() wird eine Berechtigungsanforderung auslösen. Wenn der Benutzer die Erlaubnis annimmt, wird das Versprechen mit einer aufgelösten MediaStream ein Video und eine Audiospur enthält. Wenn die Erlaubnis verweigert wird, ein PermissionDeniedError ausgelöst. Falls es keine passenden Geräte angeschlossen, ein NotFoundError wird geworfen werden.

Die vollständige API - Referenz für die MediaDevices Schnittstelle ist verfügbar unter MDN Web - Dokumenten .

Abfragt Mediengeräte

In einer komplexeren Anwendung, werden wir höchstwahrscheinlich wollen alle angeschlossenen Kameras und Mikrofonen überprüfen und die entsprechende Rückmeldung an den Benutzer zur Verfügung stellen. Dies kann durch den Aufruf der Funktion erfolgen enumerateDevices() . Dies wird ein Versprechen , das aufgelöst wird , eine Reihe von Rück MediaDevicesInfo , das jedes bekannten Mediengerät zu beschreiben. Wir können diese verwenden, um eine Benutzeroberfläche für den Benutzer zu präsentieren, die die ließ sie auf einen Blick sie bevorzugen. Jede MediaDevicesInfo enthält eine Eigenschaft mit dem Namen kind mit dem Wert audioinput , audiooutput oder videoinput mit Angabe , welche Art von Mediengerät ist.

Mit Promises

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

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

Hören für Geräte Änderungen

Die meisten Computer in verschiedenen Geräten im laufenden Betrieb unterstützen anschließen. Es könnte eine Webcam über USB, Bluetooth-Headset oder einen Satz externer Lautsprecher angeschlossen sein. Um dies richtig zu unterstützen, sollte eine Web-Anwendung für die Änderungen von Mediengeräten hören. Dies kann durch Zugabe eines Zuhörers zu erfolgen navigator.mediaDevices für das devicechange Ereignis.

 // 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

Die Einschränkungen Objekt, das die Umsetzung muss MediaStreamConstraints Schnittstelle, die wir als Parameter übergeben getUserMedia() erlaubt es uns , ein Mediengerät zu öffnen , die eine bestimmte Anforderung übereinstimmt. Diese Anforderung kann sehr locker definiert (Audio und / oder Video), oder sehr spezifische (Mindestkameraauflösung oder eine genaue Geräte-ID). Es wird empfohlen , dass Anwendungen, die die Verwendung getUserMedia() API zuerst die vorhandenen Geräte überprüfen und gibt dann eine Einschränkung, die die genaue Gerät mit der übereinstimmt deviceId Einschränkung. Geräte werden auch, wenn möglich, entsprechend den Randbedingungen konfiguriert werden. Wir können Echo Cancellation auf Mikrofone 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 Schnittstelle kann auf die gefunden werden MDN Web - Dokumente .

lokale Wiedergabe

Sobald ein Mediengerät geöffnet worden und wir haben einen MediaStream verfügbar ist , können wir es an einem Video- oder Audio-Element zuordnen lokal den Strom zu spielen.

 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 - Code für ein typisches Videoelement erforderlich , verwendet mit getUserMedia() wird in der Regel die Attribute autoplay und playsinline . Die autoplay - Attribut wird neue Streams zu dem Element zugeordnet führen automatisch zu spielen. Das playsinline Attribut ermöglicht Video zu spielen inline, statt nur im Vollbildmodus auf bestimmten mobilen Browsern. Es wird auch empfohlen controls="false" für Live - Streams, es sei denn , der Benutzer in der Lage sein sollte , sie zu unterbrechen.

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