화면캡처2 [자바스크립트] 캔버스(canvas) 화면 캡처/녹화 방법(+파일 저장 다운로드 구현) 자바스크립트는 태그의 화면을 캡처/녹화하는 방법을 제공한다. 예를 들어 캔버스에서 동작 중인 애니메이션을 녹화하여 동영상 등으로 저장할 수 있다. 작업 순서는 아래와 같다. # canvas 태그 화면 캡처/녹화 방법 1. canvas태그 화면 스트림 취득 : HTMLCanvasElement.captureStream()=>MediaStream 2. 취득한 스트림을 저장 : MediaRecorder, Blob 3. 저장한 스트림을 재생 OR 동영상 파일로 저장(다운로드) : BlobURL(ObjectURL) 먼저 canvas화면을 캡처하는 예제 코드 전문을 보고, 상세 설명을 정리한다. # canvas 캡처/녹화 방법 - 코드 전문 - 태그의 화면을 녹화하여 태그에서 재생하고, 동영상 파일로 다운로드 받는다.. 2021. 12. 12. 자바스트립트 Media Stream Recording API: MediaRecorder Media Stream Recording API란 소리나 영상 등의 미디어 스트림을 녹음, 녹화하는 API이다. 이 글은 Media Stream Recording API에 대한 개념과 예제 코드를 정리한다. # Media Stream Recording API란? - Media Stream을 Recording 하는 API로 MediaRecorder객체 하나로 구성되어 있다. - 즉, MediaStream객체를 통해 입력 받는 소리, 영상, 화면 등을 MediaRecorder객체로 녹음 및 녹화하는 API이다. * 주의사항 - MediaRecorder 객체는 브라우저별 지원 여부 확인 필요(2021년 기준, Safari는 지원 안 되는 것으로 확인된다.) # MediaRecorder로 녹음 및 녹화할 수 있.. 2021. 12. 6. 이전 1 다음
