Frontend

[vue.js] 사용자의 오디오/비디오를 다루는 getUserMedia()

Dddu 2025. 2. 23. 22:44

담당하고 있는 업무에 카메라가 있고없고 어쩌고저쩌고 케이스가 추가되어 개발하고 있는데

javascript의 getUserMedia()를 통해 사용자의 카메라/마이크를 다룰 수 있다는 걸 알게되었다.

내가 문외한 getUserMedia에 대해, vue.js에서는 어떻게 사용하면 되는지 알아보자 !  

 

getUserMedia()는 웹 브라우저에서 사용자의 카메라나 마이크와 같은 미디어 장치에 접근할 수 있게 해주는 JavaScript API이다. 이 API는 사용자가 미디어 장치 사용 권한을 요청할 수 있도록 한다. 이를 통해 카메라와 마이크를 사용한 비디오 스트리밍, 음성 녹음 앱 등 다양한 미디어 작업을 처리할 수 있다.

Vue에서 사용하려면 Vue.js 안에서 js코드 사용하여 getUserMedia()를 호출하면 된다.

 
 
 
 

1. 매개변수

getUserMedia() 함수는 하나의 객체를 인자로 받는다. 이 객체는 audio와 video 속성을 가지고 있으며, 각각 오디오와 비디오 스트림에 대한 요구사항을 지정한다.

navigator.mediaDevices.getUserMedia({
    audio: true,      // 오디오 스트림을 요청
    video: {          // 비디오 스트림을 요청
        facingMode: "user"  // 전면 카메라 또는 후면 카메라 선택
    }
})
  • audio: true 또는 false 값을 설정하여 오디오 스트림을 요청할지 여부를 결정한다.
    • true: 마이크 권한을 요청한다.
    • false: 오디오를 요청하지 않는다 (비디오만 요청).
  • video: true, false, 또는 객체 형태로 설정할 수 있다.
    • true: 기본 비디오를 요청한다 (카메라 사용).
    • false: 비디오를 요청하지 않는다 (오디오만 요청).
    • 객체 형태로 설정하면 세부 설정이 가능하다.
      • facingMode: "user"는 전면 카메라를 요청하고, "environment"는 후면 카메라를 요청한다.
      • width, height: 비디오의 해상도를 설정할 수 있다.
      • frameRate: 초당 프레임 수를 지정할 수 있다.

2. 비디오와 오디오의 설정 예시

비디오 해상도와 카메라 방향을 설정하는 예시이다.

navigator.mediaDevices.getUserMedia({
    video: {
        facingMode: "environment", // 후면 카메라 사용
        width: { ideal: 1280 },     // 비디오의 이상적인 너비
        height: { ideal: 720 },    // 비디오의 이상적인 높이
        frameRate: { ideal: 30 }   // 초당 30프레임
    },
    audio: true
})
.then(function(stream) {
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;  // 비디오 스트림을 화면에 표시
})
.catch(function(error) {
    console.error("Error accessing media devices:", error);
});

3. 스트림 객체 사용

getUserMedia()는 사용자가 제공한 미디어 스트림을 반환한다. 이 스트림 객체는 MediaStream 타입으로, 비디오와 오디오 데이터를 포함한다. 반환된 스트림은 <video> 태그에 연결하여 화면에 비디오를 출력할 수 있다.

<video autoplay></video>

navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;
})
.catch(function(error) {
    console.error("Error:", error);
});

4. 스트림을 멈추기

스트림을 종료하려면 getUserMedia()로 얻은 스트림에서 각 트랙을 멈추는 방법이 필요하다. 예를 들어, 카메라와 마이크를 종료하려면 다음과 같이 할 수 있다.

function stopStream(stream) {
    const tracks = stream.getTracks();
    tracks.forEach(track => track.stop());
}

이렇게 하면 스트림에서 모든 트랙을 멈추고 장치 사용을 종료할 수 있다.

5. 권한 요청

getUserMedia()를 호출하면 브라우저는 자동으로 사용자에게 카메라나 마이크 사용 권한을 요청한다. 이 권한 요청은 브라우저의 기본 팝업을 통해 이루어지며, 사용자가 권한을 거부하면 catch 블록에서 오류가 발생한다.

6. 지원되는 브라우저

대부분의 최신 브라우저에서 getUserMedia()를 지원하지만, 이 API는 HTTPS 환경에서만 사용할 수 있다. 보안상의 이유로 HTTP에서는 사용할 수 없다.

  • 지원 브라우저: Chrome, Firefox, Edge, Safari, Opera 등

7. 보안

사용자가 미디어 장치에 접근할지 여부는 항상 사용자가 결정한다. 즉, 권한을 부여하지 않으면 스트림을 사용할 수 없다. 권한이 필요한 작업이기 때문에 사용자에게 어떻게 요청할지에 대한 UI를 제공하는 것도 중요한 부분이다.

예시: 마이크로 음성 녹음하기

다음은 getUserMedia()를 사용하여 마이크를 통해 음성을 녹음하고 그 결과를 <audio> 태그로 재생하는 예시이다.

<audio id="audioPlayer" controls></audio>
<script>
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
    const audioElement = document.getElementById('audioPlayer');
    audioElement.srcObject = stream;
})
.catch(function(error) {
    console.error("Error accessing audio:", error);
});
</script>

이처럼 getUserMedia()는 웹에서 직접적으로 사용자 미디어에 접근하고 이를 다양한 방식으로 활용할 수 있게 해주는 강력한 도구이다.