Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기
이 페이지는 Cloud Translation API를 통해 번역되었습니다.
Switch to English

미디어 캡처 및 제약

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() 를 호출하여 우리가 연 미디어 장치에서 트랙의 제약 조건을 업데이트 할 수도 있습니다. 이를 통해 응용 프로그램은 기존 스트림을 먼저 닫지 않고도 미디어 장치를 재구성 할 수 있습니다.

디스플레이 미디어

화면 캡처 및 녹화를 수행하려는 애플리케이션은 Display Media API를 사용해야합니다. navigator.mediaDevices 일부인 getDisplayMedia() 함수는 getUserMedia() 와 유사하며 디스플레이의 내용 (또는 창과 같은 일부)을 여는 데 사용됩니다. 반환 된 MediaStreamgetUserMedia() 사용할 때와 동일합니다.

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

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

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

스트림 및 트랙

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

MediaStreamTrack

MediaStreamTrack 에는 그것이 나타내는 미디어의 종류를 나타내는 audio 또는 videokind 속성이 있습니다. enabled 속성을 전환하여 각 트랙을 음소거 할 수 있습니다. 트랙에는 RTCPeerConnection 의해 소싱되고 원격 피어에서 RTCPeerConnection 여부를 나타내는 부울 속성 remote 가 있습니다.