미디어 캡처 및 제약 조건

WebRTC의 미디어 부분에서는 카메라와 마이크 등 동영상 및 오디오를 캡처할 수 있는 하드웨어에 액세스하는 방법과 미디어 스트림의 작동 방식을 설명합니다. 또한 애플리케이션이 화면 캡처를 실행할 수 있는 디스플레이 미디어에 관해서도 설명합니다.

미디어 기기

브라우저에서 지원하는 모든 카메라와 마이크는 navigator.mediaDevices 객체를 통해 액세스되고 관리됩니다. 많은 카메라와 마이크로폰이 USB를 통해 연결되고 애플리케이션의 수명 주기 동안 연결 및 연결 해제될 수 있으므로 애플리케이션은 연결된 기기의 현재 목록을 검색하고 변경사항을 수신 대기할 수 있습니다. 미디어 기기의 상태는 언제든지 변경될 수 있으므로 변경사항을 올바르게 처리하려면 애플리케이션에서 기기 변경사항을 등록하는 것이 좋습니다.

제약 조건

미디어 기기에 액세스할 때는 최대한 세부적인 제약 조건을 제공하는 것이 좋습니다. 간단한 제약 조건으로 기본 카메라와 마이크를 열 수 있지만 애플리케이션에 가장 최적화된 미디어 스트림을 제공할 수 있습니다.

특정 제약 조건은 MediaTrackConstraint 객체(오디오 및 동영상용)에 정의되어 있습니다. 이 객체의 속성은 ConstraintLong, ConstraintBoolean, ConstraintDouble 또는 ConstraintDOMString 유형입니다. 특정 값 (예: 숫자, 부울 또는 문자열), 범위(최솟값 또는 최댓값이 있는 LongRange 또는 DoubleRange), ideal 또는 exact 정의가 포함된 객체일 수 있습니다. 특정 값의 경우 브라우저에서는 최대한 가까운 항목을 선택하려고 시도합니다. 범위의 경우 해당 범위의 가장 좋은 값이 사용됩니다. exact가 지정되면 이 제약조건과 정확히 일치하는 미디어 스트림만 반환됩니다.

근거리

// Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}

범위

// Camera with a resolution in the range 640x480 to 1024x768
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}

Exact

// Camera with the exact resolution of 1024x768
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}

미디어 스트림의 특정 트랙에 있는 실제 구성을 확인하려면 MediaStreamTrack.getSettings()를 호출하면 됩니다. 이 메서드는 현재 적용된 MediaTrackSettings를 반환합니다.

트랙에서 applyConstraints()를 호출하여 연 미디어 기기에서 트랙의 제약 조건을 업데이트할 수도 있습니다. 이렇게 하면 먼저 기존 스트림을 닫지 않고도 미디어 기기를 다시 구성할 수 있습니다.

디스플레이 미디어

화면 캡처 및 녹화를 수행하고자 하는 애플리케이션은 Display Media API를 사용해야 합니다. getDisplayMedia() 함수 (navigator.mediaDevices의 일부)는 getUserMedia()와 유사하며 디스플레이 (또는 창과 같은 부분)의 콘텐츠를 여는 용도로 사용됩니다. 반환된 MediaStream는 getUserMedia()을 사용할 때와 동일하게 작동합니다.

getDisplayMedia()의 제약 조건은 일반 동영상 또는 오디오 입력에 사용되는 제약 조건과 다릅니다.

{
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}

위의 코드 스니펫은 화면 녹화의 특수한 제약 조건이 어떻게 작동하는지 보여줍니다. 단, 디스플레이 미디어를 지원하는 일부 브라우저에서는 이 기능이 지원되지 않을 수도 있습니다.

스트림 및 트랙

MediaStream는 오디오 및 동영상의 트랙(MediaStreamTrack)으로 구성된 미디어 콘텐츠의 스트림을 나타냅니다. MediaStreamTrack 객체의 배열을 반환하는 MediaStream.getTracks()를 호출하여 MediaStream에서 모든 트랙을 검색할 수 있습니다.

MediaStreamTrack

MediaStreamTrack에는 audio 또는 video인 kind 속성이 있습니다. 이 속성은 나타내는 미디어 종류를 나타냅니다. enabled 속성을 전환하여 각 트랙을 음소거할 수 있습니다. 트랙에는 remote에서 RTCPeerConnection 소스를 통해 또는 원격 피어에서 가져오는 것을 나타내는 부울 속성이 있습니다.