Firefox 和 Chrome 中的 getUserMedia() 视频大小不同

Question

我正在使用getUserMedia()，并且在实施约束时（见下文），它们仅适用于 Chrome 而不是 Mozilla。 Mozilla 中的大小总是显得拉长，最终比 chome 中的大。

var vid_constraints = {
    mandatory: {
        maxHeight: 180,
        maxWidth: 320
    }
}
var constraints = { audio: false, video: vid_constraints };
navigator.getUserMedia(constraints, successCallback, errorCallback);

读了一些之后，MozGetUserMedia() 似乎不支持分辨率限制。有没有办法显示视频以确保它在 Firefox 和 Chrome 中具有相同的大小/分辨率？

谢谢

编辑 我已修改脚本以拍摄快照。我在 Moz 和 Chrome 中保存了快照 - 结果如下：

（左 = Chrome，右 = Mozilla）

认为这可以澄清问题。它看起来像宽高比。

编辑（拍摄 2 次）

是的 - chrome one 的纵横比是 16:9，而 Moz 的纵横比是 4:3。我该如何修改？

Answer 1

4 月 15 日编辑

正如@jib 在他的awesome answer 中所指出的，

Firefox [38+] 确实支持约束的子集 getUserMedia()，但不是 Chrome 和 Opera 的过时语法 使用。强制/可选语法在一年前被弃用，并且 前一年的 minWidth 和 minHeight。

所以规范批准的新语法是：

var constraints = {
    audio: false,
    video: {
        width: { min: 1024, ideal: 1280, max: 1920 },
        height: { min: 576, ideal: 720, max: 1080 },
    }
};

但是，这种语法会在 Chrome 中引发错误。如 cmets 中所述，已制作了 PR 到 adapter.js，包括用于旧 FF 和 chrome 的 polyfill。

这是我的尝试，仅适用于 chrome（但新版本的 FF 似乎接受了神奇而隐藏的 require:['width', 'height']。

	var video_constraints = {
		width: { min: 320, max: 480 },
		height: { min: 240, max: 360 },
		require: ["width", "height"] // needed pre-Firefox 38 (non-spec)
		};
		

	function getMedia(){
     
        if(navigator.webkitGetUserMedia){
				var wkConstraints={mandatory: {} };
				var c = video_constraints;
				for(var i in c){
					switch(i){
					 case 'width': for(j in c[i]){
						  switch(j){
							 case 'max': wkConstraints.mandatory.maxWidth = c[i][j]; break;
							 case 'min': wkConstraints.mandatory.minWidth = c[i][j]; break;
							 case 'exact': wkConstraints.mandatory.minWidth = wkConstraints.mandatory.maxWidth = c[i][j]; break;
							 }
						}; break;

					 case 'height': for(var j in c[i]){
						  switch(j){
							 case 'max': wkConstraints.mandatory.maxHeight = c[i][j]; break;
							 case 'min': wkConstraints.mandatory.minHeight = c[i][j]; break;
							 case 'exact': wkConstraints.mandatory.minHeight = wkConstraints.mandatory.maxHeight = c[i][j]; break;
							 }
						}; break;
					 default: break;
					}
				}
				video_constraints = wkConstraints;
				}

		navigator.getUserMedia = ( 	navigator.getUserMedia ||
							   	navigator.webkitGetUserMedia ||
								navigator.mozGetUserMedia);

        if(!navigator.getUserMedia){
			alert("your browser doesn't support getUserMedia")
			}

		
		navigator.getUserMedia(
                {
				video: video_constraints,
				audio: false,
				},
			
				function(stream) {
					if (navigator.mozGetUserMedia) {
						video.mozSrcObject = stream;
						} 
					else {
						var URL = window.URL || window.webkitURL;
						video.src = URL.createObjectURL(stream);
						}
					video.play();
					},

				function(err) {
					console.log(err);
					}
				);
		}

	  var video= document.querySelector('video');
	  video.addEventListener('playing', loopStart, false);			   
	  function loopStart(){
		  this.removeEventListener('playing', loopStart);
		  if(this.videoHeight === 0){
			window.setTimeout(function() {
			  this.pause();
			  this.play();
			  loopStart();
			}, 100);
			}
			else {
			  this.setAttribute('width', this.videoWidth);
			  this.setAttribute('height', this.videoHeight);
			  }
		 }
	  getMedia();

<video/>

第一个答案

所以在你回答你自己的问题之前，我开始给你写这篇文章。

如 cmets 中所述，我正在绘制视频的每一帧以适应调整大小的画布。

var video, canvas, streaming = false,
  constrainedWidth = 320,
  constrainedHeight = 180;

function streamCam() {
  navigator.getMedia = (navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);

  //**Deprecated Now, see the update**
  var video_constraints = {
    "mandatory": {
      "minWidth": constrainedWidth,
      "minHeight": constrainedHeight,
      "minFrameRate": "30"
    },
    "optional": []
  }

  navigator.getMedia({
      video: video_constraints,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL.createObjectURL(stream);
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
      streamCam();
    }
  );


}

function FFResize() {
  canvas.width = constrainedWidth;
  canvas.height = constrainedHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, constrainedWidth, constrainedHeight);
  setTimeout(function() {
    requestAnimationFrame(FFResize)
  }, 10);
}


window.onload = function() {
  video = document.querySelector('#video'),
    canvas = document.querySelector('#canvas');

  streamCam();

  video.addEventListener('playing', function(ev) {
    if (!streaming) {
      if (video.videoHeight === 0) {
        window.setTimeout(function() {
          video.pause();
          video.play();
        }, 100);
      } else {
        video.setAttribute('width', video.videoWidth);
        video.setAttribute('height', video.videoHeight);
        canvas.setAttribute('width', constrainedWidth);
        canvas.setAttribute('height', constrainedHeight);
        streaming = true;
        requestAnimationFrame(FFResize);
      }
    }
  }, false);

};

#canvas {
  position: fixed;
  top: 0;
}

<video id="video"></video>
<canvas id="canvas"></canvas>

这完成了它的工作，但正如您所指出的，限制仍在开发中，让它们与 Firefox 一起工作的唯一方法是在about:config 中手动设置每个浏览器的media.navigator.video.default_。

Answer 2

好的。好久不见。

我发现如下代码：

var vid_constraints = {
    mandatory: {
        maxHeight: 180,
        maxWidth: 320
    }
}

其实没用。更好的方法是简单地使用

navigator.getUserMedia({audio: true, video: true}, function(stream){..},function(e){...});

您只需通过 CSS 或内联 html 设置视频的大小。对于我的应用程序，这很好用，因为我只需要将视频内容复制到画布上。最后效果很好。

因此，总而言之，问题似乎出在约束选项上。如果您试图使其在多个浏览器中工作，请远离它们。

如果您需要更好地控制相机分辨率，这可能不适合您。如果您需要对 res 进行有限控制，不妨试试有条件的（即if(navigator.mozGetUserMedia){... //compatible resolutions etc ...}）。

祈祷很快就会有一个标准的getUserMedia 函数被所有浏览器处理！ :)

仅供参考。我分叉了一些 fiddleJS 代码并对其进行了修改以在 Chrome 和 Mozilla 中进行测试：http://jsfiddle.net/sidewaiise/Laq5txvq/