如何在 Firefox 中根据视频约束进行 getusermedia 捕获？在 Chrome 中一切都按照代码进行，但在 Firefox 中不是吗？

Question

当我想从 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, 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);
  }

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

注意：在提问之前我已经阅读了其他问题，但我的情况仍然没有答案。谢谢

Answer 1

您对 getUserMedia() 的限制是请求。您不一定总能获得所需的确切尺寸。

我同意您的看法，即 Google Chrome 比 Firefox 更符合您要求的尺寸。我尝试使用 exact 属性强制 Firefox 使用精确尺寸，但它因违反约束错误而拒绝。

我不得不裁剪捕获的 Firefox 图像，使其与我在 Chrome 中捕获的图像大小相同。为了让进行捕获的用户看起来正确，我还安排了一些 CSS 来剪辑预览 window。

Answer 2

在试验我的代码后，我终于可以进行预览了

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, 0, 0, -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';
  }

如何在 Firefox 中根据视频约束进行 getusermedia 捕获？在 Chrome 中一切都按照代码进行，但在 Firefox 中不是吗？

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

javascript

html5-canvas

html5-video

getusermedia