javascript – How to make getusermedia capture based on video constraint in Firefox? In Chrome everything is according to the code, but not in Firefox?


I have a problem when I want to capture image from getusermedia, the captured image in Firefox is not retaining the ratio I have set in video constraint.
this is the ratio for getting the video, but from what I’ve seen the video not taking the constraints in Firefox

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        if(window.innerWidth >= 600){
          this.canvasWidth = 480;
          this.canvasHeight = 360;
        } else {
          this.canvasWidth = 240;
          this.canvasHeight = 240;
        }
        navigator.mediaDevices.getUserMedia({ audio: false,video: {facingMode: 'user', width: this.canvasWidth * 2, height: this.canvasHeight * 2} }).then(stream => {
            this.useWebcam = true;
            this.canvas.nativeElement.style.display = 'none';
            this.video.nativeElement.srcObject = stream;
            this.stream = stream;
            this.ref.detectChanges();
            this.video.nativeElement.play();
            console.log(stream);
        }).catch(reason => {
          this.useWebcam = false;
          if(this.acceptable){
            this.acceptable = false;
            this.eMessage = reason + "<br/>Please check your camera to continue.";
            this.ref.detectChanges();
          }
          // alert(reason + " nPlease check your camera to continue.")
        });
      } else {
        this.eMessage = "Please check your camera to continue.";
      }

And this is for taking the picture and retaking the picture

capture() {
    this.canvas.nativeElement.style.display = 'block';
    this.canvas.nativeElement.getContext("2d").scale(-1,1);
    this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement, 0, 0, this.canvas.nativeElement.width * 2, this.canvas.nativeElement.height * 2, 0, 0, -1 * this.canvas.nativeElement.width, this.canvas.nativeElement.height);
    this.canvas.nativeElement.getContext("2d").restore();
    this.captured = this.canvas.nativeElement.toDataURL("image/png");
    this.video.nativeElement.style.display = 'none';
  }

  retake() {
    setTimeout(() => {
      this.canvas.nativeElement.getContext("2d").scale(-1,1);
      this.canvas.nativeElement.getContext("2d").clearRect(0, 0, -1 * this.canvas.nativeElement.width, this.canvas.nativeElement.height);
      this.canvas.nativeElement.getContext("2d").restore();
      this.canvas.nativeElement.style.display = 'none';
      this.video.nativeElement.style.display = 'block';
      this.captured = null;
    }, 20);
  }

How to make the video using the constraint given? This code worked in Chrome, not in Firefox? Thank you

Note:
I already read other questions before asking but still have no answer for my case. Thank you