2

I'm reading about screen capture API. I want to implement it inside an electron app. At the moment I'm using the basic code provided in the available example on MDN

const displayMediaOptions = {
  video: {
    cursor: "never"
  },
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    sampleRate: 44100
  }
}

async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  return captureStream;
}

startCapture(displayMediaOptions).then( (stream) => {  
  console.log(stream) 
  let blob = new Blob(stream, {type: 'video/mp4'}); 
  let a = document.createElement('a');
  a.download = 'test.mp4';
  a.href = window.URL.createObjectURL(blob);
  a.click();
});

I've tried the code also into browser console and it will show a popup to select the source to record. The problem is that I'm unable to save the resulting MediaStream into a video file. I will get this error

Uncaught (in promise) TypeError: Failed to construct 'Blob': The object must have a callable @@iterator property.

How I can fix this and save the data to a video file correctly?

newbiedev
  • 2,607
  • 3
  • 17
  • 65

0 Answers0