Google jest zaangażowana w pogłębianie równości rasowej dla czarnych społecznościach. Zobacz jak.
Ta strona została przetłumaczona przez Cloud Translation API.
Switch to English

Rozpoczęcie korzystania z urządzeń multimedialnych

Przy opracowywaniu dla sieci, a średnia WebRTC udostępnia API dla dostępu do kamer i mikrofonów podłączonych do komputera lub smartfonu. Urządzenia te są powszechnie określane jako urządzenia multimedialne i mogą być dostępne z JavaScript przez navigator.mediaDevices obiekt, który implementuje MediaDevices interfejs. Z tego obiektu możemy wyliczyć wszystkie podłączone urządzenia, słuchać zmian urządzenia (gdy urządzenie jest podłączone lub odłączony) i otwórz urządzenie do pobierania mediów strumień (patrz niżej).

Najczęstszym sposobem jest to używane jest poprzez funkcję getUserMedia() , która zwraca obietnicę, że będzie rozwiązać do MediaStream dla urządzeń multimedialnych dopasowywania. Ta funkcja przyjmuje pojedynczy MediaStreamConstraints obiekt, który określa wymagania, które mamy. Na przykład, po prostu otworzyć domyślny mikrofon i kamerę, chcemy wykonać następujące czynności.

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

Korzystanie asynchroniczny / Oczekujcie

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

Wezwanie do getUserMedia() wywoła żądanie uprawnienia. Jeżeli użytkownik akceptuje zgodę, obietnica zostanie rozwiązany z MediaStream zawierającego jeden film i jedną ścieżkę audio. Jeśli uprawnienie jest zabroniony, o PermissionDeniedError jest wyrzucane. W przypadku braku urządzenia pasujące podłączeniu NotFoundError zostanie wyrzucony.

Pełne odniesienia API dla MediaDevices interfejs jest dostępny w MDN Docs internetowych .

Odpytywanie urządzeń multimedialnych

W bardziej złożonych aplikacji, będziemy najprawdopodobniej chcą sprawdzić wszystkich podłączonych kamer i mikrofonów oraz zapewnienie odpowiedniej informacji zwrotnej dla użytkownika. Można to zrobić poprzez wywołanie funkcji enumerateDevices() . To zwrócić obiecujące to rozwiązanie do tablicy MediaDevicesInfo opisujące każdego znanego urządzenia odtwarzającego. Możemy to wykorzystać, aby zaprezentować interfejs dla użytkownika, który Powiedzmy im wybrać jedną oni wolą. Każdy MediaDevicesInfo zawiera właściwość o nazwie kind z wartością audioinput , audiooutput lub videoinput , wskazując, jaki rodzaj urządzenia multimedialnego jest.

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

Korzystanie asynchroniczny / Oczekujcie

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

Słuchania dla urządzeń zmian

Większość komputerów obsługuje podłączanie różnych urządzeń podczas wykonywania. Może to być kamera podłączona przez USB, zestaw słuchawkowy Bluetooth lub zestaw głośników zewnętrznych. W celu właściwego wsparcia to aplikacja internetowa powinna słuchać o zmianach urządzeń multimedialnych. Można to zrobić poprzez dodanie słuchacza navigator.mediaDevices dla devicechange imprezy.

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

ograniczenia multimedialne

Ograniczenia obiektów, które muszą wdrożyć MediaStreamConstraints interfejs, który mijamy jako parametr do getUserMedia() pozwala nam otworzyć urządzenia multimedialnego, który odpowiada pewien wymóg. Wymaganie to może być bardzo luźno określone (audio i / lub wideo) lub bardzo specyficzne (rozdzielczość kamery minimum lub dokładnego identyfikator urządzenia). Zaleca się, aby aplikacje korzystające z getUserMedia() API najpierw sprawdzić istniejące urządzenia, a następnie określa ograniczenia pasujący dokładnie urządzenie używając deviceId ograniczenie. Urządzenia będą także, jeśli to możliwe, być skonfigurowane zgodnie z ograniczeniami. Możemy włączyć echa na mikrofonów lub ustaw szczególnych lub minimalną szerokość i wysokość obrazu z kamery.

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

Pełna dokumentacja dla MediaStreamConstraints interfejsu można znaleźć na docs internetowych MDN .

Lokalne odtwarzanie

Gdy urządzenie mediów został otwarty i mamy MediaStream dostępne, możemy przypisać go do elementu wideo lub audio, aby odtworzyć strumień lokalnie.

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

HTML potrzebne do typowego elementu graficznej z getUserMedia() zazwyczaj mają atrybuty autoplay i playsinline . autoplay atrybut spowoduje nowych źródeł przypisanych do elementu do automatycznego odtwarzania. playsinline atrybut pozwala wideo, aby odtwarzać inline, a nie tylko na pełnym ekranie, na niektórych przeglądarkach mobilnych. Zaleca się również do zastosowania controls="false" na żywo strumieni, chyba że użytkownik powinien móc je wstrzymać.

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