Chrome의 브라우저 내(또는 데스크톱) 조작을 JavaScript로 녹화

브라우저내의 조작을 비디오에 녹화하고 싶어졌으므로 조사하고 있으면 getDisplayMedia

Chrome Canary M70에서 Screen Capture API를 사용할 수 있습니다.

MediaStream.getDisplayMedia()

2018/10/23 시점의 Chrome 70.0.3538.67에서는 아직 사용할 수 없는 것 같습니다. 사용하려면 Canary를 사용해보십시오. 다른 브라우저의 대응으로서는 Firefox/Edge 가 대응하고 있는 것 같습니다. 그러나 Firefox는 호출하는 방법이 다릅니다.

참고: WebRTC API 코토하지메

또한 헤드리스 브라우저로 녹화하는 방법은 여기

헤드리스 브라우저 Chrome + Chrome에서 조작한 내용 녹화

샘플 코드

Canary의 DevTool 콘솔에 다음 코드를 입력합니다. 공유 확인 다이얼로그가 표시되어 선택 후 3초간의 조작을 녹화해 줍니다. 그러면 webm 파일이 다운로드됩니다. 재미 있습니다.

navigator.getDisplayMedia({audio: false, video: true}).then(stream => {
  const tracks = [...stream.getTracks()]
  const mediaStream = new MediaStream(tracks)
  const rec = new MediaRecorder(mediaStream, {mimeType: 'video/webm; codecs=vp9'})
  const chunks = []

  rec.ondataavailable = ev => chunks.push(ev.data)
  rec.start()
  rec.onstop = () => {
    const webm = new Blob(chunks, { 'type' : 'video/webm' });
    const url = window.URL.createObjectURL(webm)
    const a = document.createElement('a')
    a.setAttribute('href', url)
    a.setAttribute('download', 'rec.webm')
    a.click()
  }

  setTimeout(()=>{
    rec.stop();
  }, 3000);
})

데모의 모습

이번에는 Canary 탭을 녹화했지만 데스크톱을 선택하면 전체 데스크톱 녹화도 가능합니다.