미디어 기기 시작하기

웹용으로 개발할 때 WebRTC 표준은 컴퓨터 또는 스마트폰에 연결된 카메라 및 마이크입니다. 이 기기 일반적으로 미디어 기기라고 하며 JavaScript를 사용하여 액세스할 수 있습니다. MediaDevices를 구현하는 navigator.mediaDevices 객체를 통해 인터페이스에 추가되었습니다. 이 객체에서 연결된 모든 장치를 열거하고 기기가 변경되거나 (기기가 연결되거나 연결 해제되었을 때) 기기가 열릴 때 를 호출하여 미디어 스트림을 검색합니다 (아래 참조).

가장 일반적인 방법은 getUserMedia() 함수를 통하는 것입니다. 일치하는 미디어의 MediaStream로 확인되는 프로미스를 반환합니다. 기기에서 사용할 수 있습니다. 이 함수는 단일 MediaStreamConstraints 객체를 사용합니다. Google의 요구사항을 나타냅니다 예를 들어 간단히 기본 마이크와 카메라가 있다면 다음과 같이 합니다.

프라미스 사용

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

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

getUserMedia()를 호출하면 권한 요청이 트리거됩니다. 사용자가 권한을 허용하면 프로미스가 다음을 포함하는 MediaStream로 확인됩니다. 동영상 1개와 오디오 트랙 1개가 있어야 합니다. 권한이 거부되면 PermissionDeniedError이 발생합니다. 일치하는 기기가 없는 경우 연결되면 NotFoundError이 발생합니다.

MediaDevices 인터페이스에 대한 전체 API 참조는 MDN 웹에서 확인할 수 있습니다. 문서를 참조하세요.

미디어 기기 쿼리

좀 더 복잡한 애플리케이션의 경우 마이크와 연결된 카메라와 마이크를 통해 적절한 피드백을 있습니다. enumerateDevices() 함수를 호출하면 됩니다. 이렇게 하면 다음을 설명하는 MediaDevicesInfo의 배열로 확인되는 프로미스를 반환합니다. 각 알려진 미디어 기기가 포함됩니다 이를 사용하여 사용자에게 UI를 표시하고 원하는 것을 선택할 수 있습니다. 각 MediaDevicesInfo에는 kind를 나타내는 audioinput, audiooutput 또는 videoinput 값 지정할 수 있습니다.

프라미스 사용

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

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

기기 변경사항 수신 대기

대부분의 컴퓨터는 런타임 중에 다양한 기기 연결을 지원합니다. 그것은 USB, 블루투스 헤드셋 또는 외부 스피커 세트로 연결된 웹캠 포함 이를 적절히 지원하려면 웹 응용 프로그램이 변경 사항을 수신 대기하고 미디어 기기입니다 이렇게 하려면 devicechange 이벤트의 경우 navigator.mediaDevices

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

미디어 제약 조건

MediaStreamConstraints를 구현해야 하는 제약 조건 객체 인터페이스에 있는 경우, getUserMedia()에 매개변수로 전달하면 특정 요구사항과 일치하는 미디어 기기를 선택합니다. 이러한 요구사항은 느슨하게 정의 (오디오 또는 동영상)되거나 매우 구체적 (최소 카메라) 해상도 또는 정확한 기기 ID). kubectl 명령어를 사용하는 애플리케이션은 getUserMedia() API는 먼저 기존 기기를 확인한 다음 deviceId 제약 조건을 사용하여 정확한 기기와 일치하는 제약 조건. 또한 기기는 가능한 경우 제약 조건에 따라 구성됩니다. 마이크에서 에코 취소를 사용 설정하거나 특정 또는 최소 너비를 설정할 수 있습니다. 카메라의 동영상 및 높이입니다.

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

MediaStreamConstraints 인터페이스에 관한 전체 문서는 확인할 수 있습니다. (MDN 웹) 문서를 참조하세요.

로컬 재생

미디어 기기가 열리고 MediaStream를 사용할 수 있게 되면 동영상 또는 오디오 요소에 할당하여 로컬에서 스트림을 재생할 수 있습니다.

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

getUserMedia()와 함께 사용되는 일반적인 동영상 요소에 필요한 HTML은 보통 autoplay 및 playsinline 속성이 있습니다. autoplay 속성을 사용하면 요소에 할당된 새 스트림이 자동으로 재생됩니다. playsinline 속성을 사용하면 동영상을 전체가 아닌 인라인으로 재생할 수 있습니다. 일부 모바일 브라우저의 경우 또한 라이브 스트림의 경우 controls="false"(사용자가 일시중지할 수 있어야 하는 경우 제외) 있습니다.

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