사용자 화면을 캡처하고 녹화하는 방법을 살펴보겠습니다. 귀하의 페이지뿐만 아니라 사용자 브라우저, 데스크탑 및 기타 애플리케이션의 다른 탭도 포함됩니다. 그리고 우리는 브라우저 플러그인이나 거대한 라이브러리 없이 그렇게 할 것입니다. 대신 바닐라 자바스크립트 10줄만 있으면 됩니다.

이를 달성하기 위해 Media Capture and Streams API 을 사용할 것입니다. WebRTC API 과 관련이 있지만 지금은 브라우저 간의 모든 P2P 스트리밍을 무시하고 매우 기본적인 기록만 수행합니다.

전체 예

녹음을 서버에 보내 저장하거나 처리할 수 있지만 이 블로그 게시물에서는 캡처한 다음 <video> 태그에서 사용자에게 재생합니다. 완전한 예는 https://codesandbox.io/s/sharp-mestorf-qumzf 에서 찾을 수 있습니다.

사용해 보려면 "녹화 시작"버튼을 클릭하고 공유할 화면을 선택하고 몇 가지 작업을 수행한 다음 "녹화 중지"버튼을 클릭합니다.



예제에 10줄 이상의 Javascript가 포함되어 있음을 알 수 있습니다. 시작 및 중지 버튼을 처리하는 코드가 조금 더 포함되어 있기 때문입니다. 기록 로직은 6행부터 startRecording 함수에서 찾을 수 있습니다. 요약하면 이 함수는 다음 세 단계를 수행합니다.

사용자 데스크탑의 비디오 스트림 생성

이 스트림을 기록하십시오

.

녹음을 변환하여 서버로 전송하거나 <video> 태그

에 표시

각 단계를 자세히 살펴보겠습니다.

비디오 스트림 생성

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { mediaSource: "screen" }
});

하나의 함수일 뿐입니다: getDisplayMedia . 이것을 호출하면 사용자가 녹화할 화면을 선택할 수 있는 대화 상자가 열립니다(여러 디스플레이가 있는 경우). 또한 특정 애플리케이션이나 브라우저 탭을 기록하도록 선택할 수도 있습니다. 여기서 명심해야 할 두 가지 사항: 사용자는 공유를 적극적으로 허용해야 하므로 이 기능을 사용하여 사용자를 감시할 수 없습니다. 또한 약속을 반환하므로 await 확인하십시오.

스트림 녹화

const recorder = new MediaRecorder(stream);

const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.start();

여기서 MediaRecorder API을 사용하여 이전 단계에서 얻은 스트림을 캡처합니다. 비디오 스트림이 상당히 커질 수 있으므로 레코더는 주기적으로 ondataavailable 를 호출할 수 있습니다. 지금은 각 비디오 청크를 배열에 저장하고 다음 단계에서 다룰 것입니다. 데이터 처리를 설정한 후 기록을 시작합니다.

녹음을 Blob으로 변환

recorder.onstop = e => {
  const completeBlob = new Blob(chunks, { type: chunks[0].type });
  video.src = URL.createObjectURL(completeBlob);
};

어떤 시점에서 우리는 recorder.stop();를 호출해야 합니다. 이 예에서는 "Stop Recording"버튼을 클릭할 때 발생합니다. 이것은 레코더의 onstop 이벤트 핸들러를 호출합니다. 거기에서 우리는 이전 단계에서 청크를 가져 와서 Blob 으로 변환합니다. 그리고 나서 당신은 그것으로 무엇이든 할 수 있습니다.

"피드백 제출"기능의 일부로 서버로 보낼 수 있습니다. 유튜브에 올리시면 됩니다. 여기서는 객체 url을 구성하고 이를 비디오 태그의 src 속성으로 사용하여 사용자에게 녹화를 재생합니다.


그리고 10줄의 Javascript(녹화 제어용으로 조금 더 추가)로 사용자 화면을 캡처할 수 있었습니다. 이 힘을 악이 아닌 선을 위해 사용하시리라 믿습니다.