カメラの幅と高さを検出してキャンバスで使用し、比率を維持するにはどうすればよいですか？
カメラの幅と高さを検出して、キャンバスで使用する必要があります。新しいキャンバスでは、いくつかのフィルターを使用してライブビデオを表示します。カメラのサイズはビデオと同じである必要があります。
カメラにアクセスするために使用するコード：
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || naviagor.msGetUserMedia);
var options = {video: true};
var videoWidth, videoHeight;
var onFail = function(e) {
alert('Failed to get camera');
alert(e);
};
var onSuccess = function(stream) {
if(navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var url = window.URL || window.webkitURL;
video.src = url.createObjectURL(stream);
}
// Wait 1000 ms before starting the loop
setTimeout(function(){
//rest of functions ...
//Here I need to use: videoWidth, videoHeight
//that are obtained from the image data of the camera
},1000);
};
navigator.getUserMedia(options, onSuccess, onFail);
2つの方法があります：ChromeとFirefoxは新しいものをサポートしtrack.getSettings()ます：
let stream = await navigator.mediaDevices.getUserMedia({video: true});
let {width, height} = stream.getTracks()[0].getSettings();
console.log(`${width}x${height}`); // 640x480
これは、ストリームが何かに接続されているかどうかに関係なく機能します。
または、古いブラウザの場合は、ストリームをビデオ要素にフックし、（重要なことですが）メタデータが読み込まれるのを待ってから、videoWidthとを確認しvideoHeightます。
video.srcObject = await navigator.mediaDevices.getUserMedia({video: true});
await new Promise(resolve => video.onloadedmetadata = resolve);
console.log(`${video.videoWidth}x${video.videoHeight}` // 640x480
ほとんどのWebカメラは複数の解像度をサポートしていることに注意してください。高解像度の制約を使用します。
await navigator.mediaDevices.getUserMedia({video: {width: 9999}}); // 1280x720
これが実用的なフィドルです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加