Screen Recording Portion of Screen with JavaScript

Question

I am attempting to implement a screen recorder in JavaScript that records a video feed rather than the entire screen. My question is whether or not this is possible using getDisplayMedia or if there is a library to achieve this. This is my current implementation, which will ask and record the entire screen.

const handleRecord = async () => {
    // console.log('record')
    let stream = await navigator.mediaDevices.getDisplayMedia({
      video: true
    })
    // Needed for better browser support 
    const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
      ? "video/webm; codecs=vp9"
      : "video/webm"

    let mediaRecorder = new MediaRecorder(stream, { mimeType: mime })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', ({ data }) => chunks.push(data))

    mediaRecorder.addEventListener('stop', function () {
      let blob = new Blob(chunks, {type: chunks[0].type})
      let url = URL.createObjectURL(blob)
      let video = document.querySelector("#cameraFeed")
      video.src = url

      let a = document.createElement('a')
      a.href = url
      a.download = 'video.webm'
      a.click()
    })

    //we have to start the recorder manually
    mediaRecorder.start()
  }

Answer 1

As far as I understand your problem Do you want to record the user cam if yes here you

let stream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: "user" },
})

In case you feel any difficulty feel free to ask!