getUserMedia（）视频大小在Firefox& Chrome不同 [英] getUserMedia() video size in Firefox & Chrome differs
问题描述
我正在使用 getUserMedia（），并且在实现约束时（见下文），它们只能在Chrome中运行，而不能在Mozilla中运行。
var vid_constraints = {
必须填写：{
maxHeight：180，
maxWidth：320
}
}
var constraints = {audio：false，video：vid_constraints};
navigator.getUserMedia（constraints，successCallback，errorCallback）;
看完一些后，看起来 MozGetUserMedia（）不支持分辨率约束。有没有一种方法来显示视频，以确保它在Firefox和Chrome中具有相同的大小/分辨率？
谢谢
编辑
我修改了脚本以创建快照。我在Moz和Chrome中保存了快照，结果如下：
（左= Chrome ，右= Mozilla ）
以为这可能会解决问题。它看起来像宽高比。
编辑（带2）
是 - 铬的纵横比是16：9，而Moz的是4：3。如何修改这个？
编辑April 15
在 @jib 中指出真棒回答 ，
Firefox [38+]支持
getUserMedia（），但不是Chrome和Opera过时的
使用的语法。强制性/可选语法在一年前被弃用，而
minWidth和minHeight则在前一年。
语法，批准的规格是：
$ pre $ var $ constraints $ {
audio：false，
video：{
width：{min：1024，ideal：1280，max：1920}，
height：{min：576，ideal：720，max：1080}，
}
} ;
但是这种语法在Chrome中会引发错误。正如评论中指出的， PR to adapter.js 已经制作完毕，其中包括 polyfill for FF和铬。
这是我的尝试，仅用于chrome（但更新版本的FF似乎接受魔法和隐藏 require：['width'，'高度'] 。
var video_constraints = {width：{min：320，max：480}，height：{min：240，max：360}，require：[width，height] //需要pre-Firefox 38 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 = wkCons traints.mandatory.maxWidth = c [i] [j];打破; }};打破; case'height'：for（var j in c [i]）{switch（j）{case'max'：wkConstraints.mandatory.maxHeight = c [i] [j];打破; case'min'：wkConstraints.mandatory.minHeight = c [i] [j];打破; 确切的情况：wkConstraints.mandatory.minHeight = wkConstraints.mandatory.maxHeight = c [i] [j];打破; }};打破;默认：中断; }} video_constraints = wkConstraints; } navigator.getUserMedia =（navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia）;如果（！navigator.getUserMedia）{alert（您的浏览器不支持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）;函数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 />
首先回答
$ b $因此，在你回答你自己的问题之前，我开始写你。
正如评论中指出的那样，我正在绘制视频的每一帧一个调整大小的画布。
320，constrainedHeight = 180; function streamCam（）{navigator.getMedia =（navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia）; 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 = （）;}函数（err）{console.log（错误发生！+ err）; streamCam（）;}）;}函数FFResize（）{画布。 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（' （）;};};};};
#canvas {position：fixed; top：0;}
< video id =video >< / video>< canvas id =canvas>< / canvas>
b
$ b
这是它的工作，但正如你所记录的，约束仍然在开发中，让他们使用Firefox的唯一方法是手动设置每个浏览器的 media.navigator。 video.default _ 在 about：config 。
I'm using getUserMedia(), and when implementing constraints (see below) they only work in Chrome and not Mozilla. The size in mozilla always appears stretched and ends up bigger than the one in chome.
var vid_constraints = {
mandatory: {
maxHeight: 180,
maxWidth: 320
}
}
var constraints = { audio: false, video: vid_constraints };
navigator.getUserMedia(constraints, successCallback, errorCallback);
After reading some, it appears that MozGetUserMedia() doesn't support resolution constraints. Is there a way to display the video that ensures it has the same size/res in both Firefox and Chrome?
Thanks
Edit I've modified the script to take snapshots. I've saved snapshots in Moz and in Chrome - the result is what follows:
(left = Chrome, right = Mozilla)
Thought this may clarify the problem. It looks like aspect ratio.
Edit (take 2)
Yes - the aspect ratio for the chrome one is 16:9, whereas for Moz its 4:3. How can I modify this?
Edit April 15
As noted by @jib in his awesome answer,
Firefox [38+] does support a subset of constraints with getUserMedia(), but not the outdated syntax that Chrome and Opera are using. The mandatory / optional syntax was deprecated a year ago, and minWidth and minHeight the year before that.
So the new syntax, approved by specs is :
var constraints = {
audio: false,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 576, ideal: 720, max: 1080 },
}
};
However this syntax throws an error in Chrome. As noted in comments, a PR to adapter.js has been made, including a polyfill for older FF and chrome.
Here is my attempt, for chrome only (but newer version of FF seem to accept the magical and hidden 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/>
First Answer
So I started to write you this before you answered your own question.
As noted in the comments, I'm drawing each frame of the video to fit a resized canvas.
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>
This does its job but as you noted constraints are still in dev and the only way to have them to work with Firefox is to manually set every browser's media.navigator.video.default_ in about:config.
这篇关于getUserMedia（）视频大小在Firefox& Chrome不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
