getUserMedia() video-Größe, die in Firefox & Chrome unterscheidet

Bearbeiten April 15

Wie bereits von @jib in seinem awesome Antwort,

Firefox [38+] unterstützt eine Teilmenge der constraints mit
getUserMedia(), aber nicht die veraltete syntax, Chrome und Opera sind
mit. Die obligatorische /optionale syntax veraltet vor einem Jahr, und
minWidth-und minHeight ein Jahr zuvor.

Also die neue syntax, genehmigt durch den specs ist :

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

Aber diese syntax gibt einen Fehler in Chrome. Wie bereits in den Kommentaren, ein PR zu adapter.js gemacht worden, einschließlich einer polyfill für ältere FF und chrome.

Hier ist mein Versuch, für chrome nur (aber neuere version von FF scheinen zu akzeptieren, die Magische und versteckte require:['width', 'height'].

JS:

	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();

HTML:

<video/>

Erste Antwort

Also begann ich zu schreiben Sie diese, bevor Sie Ihre eigene Frage beantwortet.

Wie bereits angemerkt in den Kommentaren, ich bin zeichnen jeden frame des Videos zu passen eine Mini-Leinwand.

JS:

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);

};

CSS:

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

HTML:

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

Dieser macht seinen job aber wie Sie bemerkt Einschränkungen sind immer noch in der dev und der einzige Weg, um Ihnen das arbeiten mit Firefox ist auf manuell gesetzt, für alle browser media.navigator.video.default_ im about:config.