Video streaming 使用WebRTC设置不同分辨率时出现问题
我正在尝试使用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的分辨率。有人有同样的问题吗?我想知道这是一个bug还是什么,但我还没有看到任何关于它的信息。这是我的代码,我已经在很多方面证明了这一点,比如用最小宽度和高度放置约束,但它不起作用: 剧本:Video streaming 使用WebRTC设置不同分辨率时出现问题,video-streaming,resolution,webrtc,Video Streaming,Resolution,Webrtc,我正在尝试使用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的分辨率。有人有同样的问题吗?我想知道这是一个bug
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(只是为了证明,它并没有把所有的东西都放在正确的位置):
和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>
测试WebRTC`
`
提前谢谢 尝试
maxWidth/maxHeight
约束条件:
var video_constraints = {
mandatory: {
maxHeight: 480,
maxWidth: 640
},
optional: []
};
navigator.getUserMedia({
audio: false,
video: video_constraints
}, onsuccess);
更新(2013年9月26日):
1280:800
1280:720
960:600
960:540
640:400
640:360
640:480
480:300
480:270
480:360
320:200
320:180
320:240
240:150
240:135
240:180
160:100
160:90
160:120
根据,;您可以设置以下分辨率(最小/最大宽度/高度):
或:
1280:800
1280:720
960:600
960:540
640:400
640:360
640:480
480:300
480:270
480:360
320:200
320:180
320:240
240:150
240:135
240:180
160:100
160:90
160:120
当我没有保持相机的纵横比或者试图强制使用它不支持的帧速率(这是一个旧的USB相机)时,我也遇到了同样的问题。 因此,请按照@Muaz Khan的建议进行尝试,但只设置一个必需参数,即:
var video_constraints = {
mandatory: {
maxWidth: 640
},
optional: []
};
navigator.getUserMedia({
audio: false,
video: video_constraints
}, onsuccess);
编辑:还可以尝试不同的值,即maxHeight:120对我不起作用,但maxHeight:180起作用。我想这要看相机了我又有同样的问题了。在我的笔记本电脑的网络摄像头中,这个功能运行良好(windows vista 64位),但另一个通过usb连接的摄像头仍然存在同样的问题(这是一款创造性的摄像头,型号为VF0700)。我知道这款相机的分辨率为640 X 480,效果非常好,之前我尝试过另一个java应用程序,所以我看不出问题出在哪里。我使用相机的电脑有64位操作系统windows 7。有人知道怎么回事吗?你试过金丝雀吗。这些限制在旧的chrome上不受支持。我有最新版本的chrome(25.0.1364.172),但实际上chrome不是问题所在(无论如何它工作得很好),但在Firefox 19.02(我能得到的最新版本)和Opera 12.14中它不起作用。奇怪的是,它在我的笔记本电脑中工作(也许它在没有这些限制的情况下也能工作,但我真的不知道),但在这里它不工作……是的,我认为问题与网络摄像头有关。它不能很好地处理较低的值。
var video_constraints = {
mandatory: {
maxWidth: 640
},
optional: []
};
navigator.getUserMedia({
audio: false,
video: video_constraints
}, onsuccess);