MediaStream API를 활용한 웹 사이트에서의 실시간 스크린 녹화 구현하기

13 Oct 2023

javascript

개요

MediaStream API는 웹 브라우저에서 사용자 미디어 장치(예: 카메라, 마이크)에 접근하고 재생하는 기능을 제공하는 API이다. 이 API를 활용하면 웹 사이트에서 실시간으로 사용자의 화면을 캡처하여 저장하는 스크린 녹화 기능을 구현할 수 있다. 이번 글에서는 MediaStream API를 사용하여 웹 사이트에서 실시간 스크린 녹화를 구현하는 방법에 대해 알아보겠다.

구현 단계

1. 미디어 장치에 접근 권한 요청하기

사용자의 화면을 녹화하기 위해 먼저 미디어 장치에 접근하는 권한을 요청해야 한다. 사용자에게 권한을 요청하는 코드는 다음과 같다.

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(function(stream) {
    // 권한을 획득한 경우
  })
  .catch(function(err) {
    // 권한을 획득하지 못한 경우
  });

위 코드에서 getUserMedia 함수를 호출하여 비디오와 오디오에 대한 권한을 요청하고, 권한을 획득한 경우 then 블록이 실행되고, 권한을 획득하지 못한 경우 catch 블록이 실행된다.

2. 미디어 스트림 받아오기

권한을 획득한 후에는 getUserMedia 함수가 반환하는 미디어 스트림을 받아와야 한다. 미디어 스트림은 비디오와 오디오 트랙을 포함하고 있다. 이 미디어 스트림을 화면 캡처에 사용할 수 있다. 미디어 스트림을 받아오는 코드는 다음과 같다.

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(function(stream) {
    // 미디어 스트림 받아오기 성공
    var videoTrack = stream.getVideoTracks()[0];
    var audioTrack = stream.getAudioTracks()[0];
    
    // 화면 캡처에 사용할 비디오 트랙과 오디오 트랙
    // 여기에서 화면 캡처를 위한 미디어 장치를 선택할 수도 있다.
  })
  .catch(function(err) {
    // 권한을 획득하지 못한 경우
  });

위 코드에서 getVideoTracks()와 getAudioTracks() 함수를 사용하여 미디어 스트림에서 비디오 트랙과 오디오 트랙을 추출한다.

3. 비디오 요소 생성하기

스크린 녹화를 저장하기 위해 비디오 요소를 생성해야 한다. 비디오 요소는 HTML5에서 제공하는 태그로, 미디어 스트림을 재생하고 저장할 수 있다. 비디오 요소를 생성하는 코드는 다음과 같다.

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(function(stream) {
    var videoTrack = stream.getVideoTracks()[0];
    var audioTrack = stream.getAudioTracks()[0];
    
    // 비디오 요소 생성 및 설정
    var videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    
    // 비디오 요소를 화면에 추가
    document.body.appendChild(videoElement);
  })
  .catch(function(err) {
    // 권한을 획득하지 못한 경우
  });

위 코드에서 createElement 함수로 비디오 요소를 생성한 후, srcObject 속성을 통해 미디어 스트림을 할당하고 autoplay 속성을 true로 설정하여 자동으로 재생되도록 한다.

4. 스크린 녹화 시작하기

비디오 요소를 생성하고 설정한 후에는 스크린 녹화를 시작해야 한다. 이는 MediaRecorder 객체를 사용하여 구현할 수 있다. MediaRecorder 객체는 미디어 스트림을 기록하여 비디오 파일로 저장할 수 있는 기능을 제공한다. 스크린 녹화를 시작하는 코드는 다음과 같다.

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(function(stream) {
    var videoTrack = stream.getVideoTracks()[0];
    var audioTrack = stream.getAudioTracks()[0];
    
    var videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    videoElement.autoplay = true;

    // 미디어 레코더 생성
    var mediaRecorder = new MediaRecorder(stream);
    
    // 녹화 시작 이벤트 핸들러
    mediaRecorder.start();
    mediaRecorder.ondataavailable = function(event) {
      // 녹화된 데이터를 처리하는 로직
    };
  })
  .catch(function(err) {
    // 권한을 획득하지 못한 경우
  });

위 코드에서 MediaRecorder 객체를 생성할 때 미디어 스트림을 전달하여 녹화 대상을 설정한다. 그리고 start 함수를 호출하여 녹화를 시작한다. ondataavailable 이벤트 핸들러는 녹화된 데이터를 처리하는 로직을 구현할 수 있다.

5. 스크린 녹화 중지하기

스크린 녹화를 중지하려면 stop 메소드를 호출해야 한다. 스크린 녹화를 중지하는 코드는 다음과 같다.

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(function(stream) {
    var videoTrack = stream.getVideoTracks()[0];
    var audioTrack = stream.getAudioTracks()[0];
    
    var videoElement = document.createElement('video');
    videoElement.srcObject = stream;
    videoElement.autoplay = true;

    var mediaRecorder = new MediaRecorder(stream);
    
    // 녹화 중지
    mediaRecorder.stop();
  })
  .catch(function(err) {
    // 권한을 획득하지 못한 경우
  });

위 코드에서 stop 함수를 호출하여 스크린 녹화를 중지한다.

결론

MediaStream API를 사용하면 웹 사이트에서 실시간 스크린 녹화 기능을 구현할 수 있다. 이를 통해 화상 회의, 웹 기반 학습 플랫폼 등 다양한 웹 애플리케이션에 유용한 기능을 추가할 수 있다. MediaStream API에 대한 자세한 정보는 MDN 웹 문서를 참고하면 도움이 될 것이다.

#WebDevelopment #ScreenRecording