Question

我正在尝试使用WebRTC的getUserMedia功能从用户的相机拍摄视频流中的快照。问题是我想分别在Firefox 19.02，Opera 12.14和Chrome 25.0.1364.172版本中使用640 X 480的分辨率，但我无法在Firefox和Opera中使用此分辨率。当我尝试时，图像显示从下方切割640 x 360分辨率。无论如何，如果我尝试在Chrome中更改分辨率，它不起作用，也不会使用高于640 X 480的分辨率。有没有人有同样的问题？我想知道这是一个错误还是什么，但我还没有看到任何相关的信息。这是我的代码，我已经在许多方面证明了这样的最小宽度和高度的限制，但它不起作用：

脚本：

navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia;
if(navigator.getUserMedia){
    navigator.getUserMedia({
      video: true
      }, onSuccess, onError);
}
else{
    alert('An error has occurred starting the webcam stream, please revise the instructions to fix the problem');
}
function onSuccess(stream) {
    var video = document.getElementById('webcam');

    if(navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
        video.src = window.URL.createObjectURL(stream);
    }
    else if(navigator.msGetUserMedia){
        //future implementation over internet explorer
    }
    else{
        video.src = stream;
    }
    video.play();
}
function onError() {
    alert('There has been a problem retrieving the streams - did you allow access?');
}

css（仅用于证明，它不会将所有内容放在正确的位置）：

body {
    margin: 0px 0px;
    padding: 0px 0px;
}
#videoFrame {
    margin: 0px auto;
    width: 640px;
    height: 480px;
    border: 10px #333 solid;
}
#webcam {
    videoWidth: 640px;
    videoHeight: 480px;
}
#captureFrame {
    margin: 0px auto;
    width: 640px;
    height: 480px;
}
#webcamContent {
    width: 1280px;
    height: 480px;
}

和jsp文件：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Testing WebRTC</title>`
        <link href="css/styles.css" rel="stylesheet" type="text/css" />`
    </head>
    <body>
        <div id="webcamContent">
            <div id="videoFrame">
                <video id="webcam"></video>
            </div>
            <div id="captureFrame">
                <canvas id="bioCapture"></canvas>
            </div>
        </div>
        <script src="js/webRTC.js"></script>
    </body>
</html>

提前致谢！

Answer 1

尝试maxWidth/maxHeight 约束：

var video_constraints = {
   mandatory: {
       maxHeight: 480,
       maxWidth: 640 
   },
   optional: []
};

navigator.getUserMedia({
   audio: false,
   video: video_constraints
}, onsuccess);

更新（2013年9月26日）：

根据this page;您可以设置以下分辨率（最小/最大宽度/高度）：

或Maybe：

Answer 2

如果不保持相机的宽高比或试图强制它不支持帧速率（这是一个旧的USB相机），我遇到了同样的问题。所以像@Muaz Khan建议的那样尝试，但只设置一个强制参数，即：

var video_constraints = {
   mandatory: {
        maxWidth: 640
   },
   optional: []
};

navigator.getUserMedia({
   audio: false,
   video: video_constraints
}, onsuccess);

编辑：也尝试不同的值，即maxHeight：120对我不起作用，但maxHeight：180确实有效。我想这取决于相机

使用WebRTC设置不同分辨率的问题

2 个答案: