자바스크립트 코드 20줄로 간단한 스크린 레코더를 작성하는 방법은 무엇인가요? 저는 Bait이니 함께 배워봅시다.
글 서문.
스크린 레코더의 유료화 및 제한된 상태에 지쳐서 직접 코드를 작성하고 싶다고 가정해 보겠습니다. 몇 줄의 코드만으로 기본적인 기능을 구현할 수 있습니다.
단계별 연습
첫째, 브라우저에 사용하여 캡처된 동영상 스트림을 가져오도록 요청할 수 있지만 보안상의 이유로 버튼 클릭과 같은 사용자 제스처로 캡처 가 트리거되는지 확인하는 것이 중요합니다:
const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
// TODO
});
동영상 스트림을 가져와 녹화하려면 클릭하세요.
const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();
사용자가 화면 공유를 중단하면 녹화 중지
const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
recoder.stop();
});
녹화된 파일을 가져와 다운로드
recoder.addEventListener("dataavailable", (evt) => {
const a = document.createElement("a");
a.href = URL.createObjectURL(evt.data);
a.download = "capture.webm";
a.click();
});
전체 코드
const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();
const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
recoder.stop();
});
recoder.addEventListener("dataavailable", (evt) => {
const a = document.createElement("a");
a.href = URL.createObjectURL(evt.data);
a.download = "capture.webm";
a.click();
});
});
보세요, 간단한 스크린 레코더가 있습니다!
녹화, 웹캠 통합, 장시간 스트리밍 등 해결해야 할 제한 사항이 많지만, 이렇게 강력한 기능을 몇 줄의 코드로 구현했다는 사실을 공유하지 않기에는 너무 멋지다는 생각이 들었습니다.
공개: 프로그래머 미끼
