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

谢谢

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

(左= Chrome,右= Mozilla)

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

编辑(拿2)

是的 - 铬合金的纵横比是16:9,而Moz的纵横比是4:3.我怎么修改这个？

Answer 1

编辑4月15日

正如@jib在他的精彩回答中指出的那样,

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已取得包括填充工具为老年人FF和铬.

这是我的尝试,仅适用于镀铬(但较新版本的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>

这样做的工作,但正如你指出的限制仍然在开发中,并让他们与火狐合作的唯一方法是每一个浏览器的手动设置media.navigator.video.default_的about:config.