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 + Chromy で操作した内容を録画する

サンプルコード

Canary の DevTool コンソールに下記のコードを入力してください。共有確認ダイアログが表示され、選択後３秒間の操作を録画してくれます。その後、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 のタブを録画しましたが、デスクトップを選択すればデスクトップ全体の録画もできます。