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中具有相同的大小/ res？

由于

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

Chrome Mozilla

（左= Chrome ，右= Mozilla ）

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

修改（拍摄2）

是 - 铬合金的纵横比为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中引发错误。如评论中所述，已经制作了PR到adapter.js，其中包括polyfill旧版FF和Chrome。

这是我的尝试，仅适用于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/>

第一个答案

所以我在你回答你自己的问题之前就开始给你写这个。

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

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一起使用的唯一方法是在media.navigator.video.default_中手动设置每个浏览器的about:config。

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/

Firefox中的getUserMedia（）视频大小＆amp; Chrome有所不同

2 个答案:

编辑4月15日

第一个答案