[WebRTC 02] 화면 공유(화면 녹화) 및 미디어 제어

개요

웹캠화면이 아닌 화면 녹화(화면 공유)를 하려면 어떻게 해야할까? 그리고 일정 수준 이상의 비디오 품질로 비디오를 스트림 하고자 하는 경우 어떻게 처리해야 할까? 이번 챕터에서는 화면 공유와 비디오 제약에 대해서 다루어볼 것입니다!

 

Step1. 비디오 제약

미디어 장치에 액세스 할 때 가능한 한 자세한 제약 조건을 제공하는 것이 좋습니다. 간단한 제약으로 기본 카메라와 마이크를 열 수 있지만 응용 프로그램에 가장 적합한 미디어 스트림과는 거리가 먼 미디어 스트림을 제공 할 수 있습니다.

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

1. near

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

2. range

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

3. exact

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

 

 

Step 2. 화면 녹화(화면 공유)

async function playVideoFromCamera() {
    try {
        const constraintsVideo = {
            'video': {
                "width": 320,
                "height": 240
            }, 
            'audio': false
        }
        const constraintsShare = {
            video: {
                cursor: 'always' | 'motion' | 'never',
                displaySurface: 'application' | 'browser' | 'monitor' | 'window'
            }
        }

        const stream = await navigator.mediaDevices.getUserMedia(constraintsVideo);
        const recording = await navigator.mediaDevices.getDisplayMedia(constraintsShare);

        const shareVideoElement = document.querySelector('video#localShareVideo')
        const videoElement = document.querySelector('video#localVideo');

        videoElement.srcObject = stream;
        shareVideoElement.srcObject = recording;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}

playVideoFromCamera()

• html에 공유 화면을 위한 비디오 태그를 id를 constraintsShare로 하여 하나 더 만들어줍니다.
• 공유 화면을 위한 제약 조건을 설정하는데, 이는 웹캠 화면에서의 제약조건과는 다르니 주의해야 합니다
• 공유 화면을 받아오는 매서드는 .getDisplayMedia() 로, 공유 가능한 화면 전체를 가져옵니다. 듀얼 모니터의 경우 선택이 가능하고, 선택한 요소가videoElement가 됩니다.

 

코드

• github

 

정리

• 화면 공유가 가능한 미디어 요소를 가져오는 함수 navigator.mediaDevices.getDisplayMedia()
• 공유 화면의 constraints은 키값이 문자열이 아님!
• 나머지는 웹캠 비디오 가져오는 것과 동일

 

참고

• https://webrtc.org/getting-started/media-capture-and-constraints#near