recorder.js

  // Record
  export async function record() {
    // reset()
    play()
    $video = null
    console.log('record called')

    const canvas = document.getElementById('canvas')
    const videoStream = canvas.captureStream(60)
    const mediaRecorder = new MediaRecorder(videoStream, {
      videoBitsPerSecond: 5000000 // Double the default quality from 2.5Mbps to 5Mbps
    })

    let chunks = []

    mediaRecorder.ondataavailable = function (e) {
      chunks.push(e.data)
    }

    mediaRecorder.onstop = function (e) {
      const blob = new Blob(chunks, { type: 'video/mp4' })
      chunks = []
      const videoURL = URL.createObjectURL(blob)
      $video = videoURL
    }
    mediaRecorder.ondataavailable = function (e) {
      chunks.push(e.data)
    }

    mediaRecorder.start()
    setTimeout(function () {
      mediaRecorder.stop()
      $recording = false
    }, animTimeline.duration - 1000)
  }