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>
前もって感謝します！