如何在Firefox中基于视频限制进行getusermedia捕获？在Chrome浏览器中，所有内容均与代码一致，但在Firefox中不是？

如何解决如何在Firefox中基于视频限制进行getusermedia捕获？在Chrome浏览器中，所有内容均与代码一致，但在Firefox中不是？

当我想从getusermedia捕获图像时出现问题，在Firefox中捕获的图像没有保持我在视频限制中设置的比例。 这是获取视频的比率，但是从我看到的视频来看，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.";
      }

这是用于拍照并重新拍照

capture() {
    this.canvas.nativeElement.style.display = 'block';
    this.canvas.nativeElement.getContext("2d").scale(-1,1);
    this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement,this.canvas.nativeElement.width * 2,this.canvas.nativeElement.height * 2,-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,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);
  }

如何使用给定的约束制作视频？这段代码在Chrome中有效，在Firefox中无效？谢谢

注意： 在询问之前，我已经阅读了其他问题，但对于我的案子仍然没有答案。谢谢

解决方法

呈现给getUserMedia（）的约束是请求。您将无法始终获得所需的确切尺寸。

我同意您的看法，即Google Chrome浏览器比Firefox更符合您要求的尺寸。我尝试通过exact属性强制Firefox使用确切的尺寸，但是由于约束冲突错误而被拒绝。

我必须裁剪捕获的Firefox图像，使其大小与我在Chrome中捕获的图像大小相同。为了使用户在进行捕获时看起来合适，我还安排了一些CSS，以裁剪预览窗口。

,

最后，在尝试了我的代码之后，我可以进行预览

positioningVideo(){
    //Check Orientation
    if(this.videoWidth > this.videoHeight){
      let temp = this.videoWidth;
      this.videoWidth = this.videoHeight;
      this.videoHeight = temp;
    }

    if(this.videoWidth > (this.canvasWidth * 2)){
      this.video.nativeElement.style.maxHeight = '' + this.canvasHeight + 'px' ;
      this.video.nativeElement.style.maxWidth = '' + (this.videoWidth / 2) + 'px';
    } else if(this.videoHeight > (this.canvasHeight * 2)){
      this.video.nativeElement.style.maxWidth = '' + this.canvasWidth + 'px' ;
      this.video.nativeElement.style.maxHeight = '' + (this.videoHeight / 2) + 'px';
    } else if(this.videoWidth == (this.canvasWidth * 2) && this.videoHeight == (this.canvasHeight * 2)){
      this.video.nativeElement.style.maxHeight = '' + this.canvasHeight + 'px' ;
      this.video.nativeElement.style.maxWidth = '' + this.canvasWidth + 'px' ;
    }

  }

我用一些计算来设置我的起始坐标

注意：我正在使用作物中心，所以我计算顶部或左侧的边距。

capture() {
    let coorX = 0,coorY = 0;
    
    if(this.videoWidth != (this.canvasWidth * 2)){
      coorX = (this.videoWidth - (this.canvasWidth * 2)) / 2;
    }
    if(this.videoHeight != (this.canvasHeight * 2)){
      coorY = (this.videoHeight - (this.canvasHeight * 2)) / 2;
    }
    this.canvas.nativeElement.style.display = 'block';
    this.canvas.nativeElement.getContext("2d").scale(-1,1);
    this.canvas.nativeElement.getContext("2d").drawImage(this.video.nativeElement,coorX,coorY,this.canvasWidth * 2,this.canvasHeight * 2,-1 * this.canvasWidth,this.canvasHeight);
    this.canvas.nativeElement.getContext("2d").restore();
    this.captured = this.canvas.nativeElement.toDataURL("image/png");
    this.video.nativeElement.parentElement.style.display = 'none';
  }