미디어 캡처 및 제약 조건

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

완전일치검색

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

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

트랙에서 applyConstraints()를 호출하여 열린 미디어 기기에서 트랙의 제약 조건을 업데이트할 수도 있습니다. 이를 통해 애플리케이션은 기존 스트림을 먼저 닫지 않고도 미디어 기기를 재구성할 수 있습니다.

미디어 표시

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

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

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

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

스트림 및 트랙

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

MediaStreamTrack

MediaStreamTrack에는 나타내는 미디어의 종류를 나타내는 audio 또는 video인 kind 속성이 있습니다. 각 트랙은 enabled 속성을 전환하여 음소거할 수 있습니다. 트랙에는 RTCPeerConnection에서 제공되고 원격 피어에서 제공되는지 여부를 나타내는 불리언 속성 remote가 있습니다.