Record video in lower resolution than original using MediaRecorder

Viewed 492

I'm creating a video recorder script using JavaScript and the MediaRecorder API. I'm using a video capture as source. The video output is 1920 x 1080 but I'm trying to shrink this resolution to 640 x 360 (360p).

I will write all the code below. I tried many configurations and variants of HTML and JS, and according to this site my video source can fit that size I'm trying to force.

The video source is from this elgato camlink 4k

UPDATE

  1. Instead of using exact in video constraints, replace it with ideal and it will see if this resolution is available in the device.

  2. The elgato camlink device don't support 360p apparently, I tested with external webcam which does support 360p and using ideal it works.

enter image description here

  1. Using windows camera settings you can see there is no other resolutions available on elgato camlink only HD and FHD.

enter image description here

The HTML tag:

<video id="videoEl" width="640" height="360" autoplay canplay resize></video>

This is the getUSerMedia() script:

const video = document.getElementById('videoEl');
const constraints = {
  audio: { deviceId: audioDeviceId },
  video: { 
    deviceId: videoDeviceId, 
    width: { exact: 640 },
    height: { exact: 360 },
    frameRate: 30
  }
};
this.CameraStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = this.CameraStream;

Before that I choose the video source using navigator.mediaDevices.enumerateDevices();

Then I tried some options for the MediaRecorder constructor:

  1. this.MediaRecorder = new MediaRecorder(this.CameraStream)
  2. this.MediaRecorder = new MediaRecorder(this.CameraStream, { mimeType: 'video/webm' })

Found this mimeType in this Forum

  1. this.MediaRecorder = new MediaRecorder(this.CameraStream, { mimeType: 'video/x-matroska;codecs=h264' })

And the event listener

this.MediaRecorder.addEventListener('dataavailable', event => {
    this.BlobsRecorded.push(event.data);
});

MediaRecorder on stop

As I mention before, I tried some variants of options:

const options = { type: 'video/x-matroska;codecs=h264' };
const options = { type: 'video/webm' };
const options = { type: 'video/mp4' }; // not supported

const finalVideo = URL.createObjectURL(
    new Blob(this.BlobsRecorded, options)
);

Note

Everything is working perfectly, I just leave the code to let you see the used constraints and for illustrative purposes. If there is something missing let me know to put it here.

Thank you for your time.

0 Answers
Related