javascriptfirefoxwebcam

Video aspect ratio changes automatically on the firefox web browser

I'm working on a project, I'm accessing the camera using javascript and the aspect ratio of the camera is working fine on CHROME but when I'm testing it on the Firefox browser it changes the aspect ratio automatically

this is a CHROME result chrome result

and FIREFOX result enter image description here

and my code <video id="video" width="280px" height="480px"></video>

const videoElement = document.getElementById("video");
const camera = new Camera(videoElement, {
  onFrame: async () => {
    await model.send({ image: videoElement });
  },
  width: 280,
  height: 480,
});
camera.start();

let me know if anyone can help with this

Solution

  • UPDATE

    -I've got the answer in my video id I just need to add this CSS property object-fit: cover