gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 00:31:06 30 4
gpt4 key购买 nike

我正在尝试使用 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>

提前致谢!

最佳答案

试试 maxWidth/maxHeight 约束 :

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

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

更新(2013 年 9 月 26 日):

根据 this page ;您可以设置以下分辨率(最小/最大宽度/高度):
1920:1080
1280:720
960:720
640:360
640:480
320:240
320:180

Maybe :
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

关于video-streaming - 使用 WebRTC 设置不同分辨率的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15434008/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com