Google is committed to advancing racial equity for Black communities. See how.
이 페이지는 Cloud Translation API를 통해 번역되었습니다.
Switch to English

미디어 캡처 및 제약

WebRTC의 미디어 부분은 카메라 및 마이크와 같은 비디오 및 오디오를 캡처 할 수있는 하드웨어에 액세스하는 방법과 미디어 스트림 작동 방법을 다룹니다. 또한 응용 프로그램이 화면 캡처를 수행하는 방법 인 디스플레이 미디어도 다룹니다.

미디어 장치

브라우저가 지원하는 모든 카메라와 마이크는 navigator.mediaDevices 객체를 통해 액세스하고 관리합니다. 많은 카메라와 microhpone이 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를 사용해야합니다. getDisplayMedia() 함수 getDisplayMedia() navigator.mediaDevices 일부인 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 이 있습니다.