Javascript 如何检测网络摄像机的宽度和高度?
如何检测相机的宽度和高度,以便在画布上使用并保持比例??? 我需要检测相机的宽度和高度,然后在画布上使用它。在新的画布中,我将显示带有一些过滤器的实时视频。摄像机的尺寸应与视频相同 我用于访问相机的代码:Javascript 如何检测网络摄像机的宽度和高度?,javascript,getusermedia,Javascript,Getusermedia,如何检测相机的宽度和高度,以便在画布上使用并保持比例??? 我需要检测相机的宽度和高度,然后在画布上使用它。在新的画布中,我将显示带有一些过滤器的实时视频。摄像机的尺寸应与视频相同 我用于访问相机的代码: navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || naviagor.msGetUserMedia); var
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);
您可以使用
videoWidth
和videoHeight
元素的属性来获取宽度和高度:
video.videoWidth
video.videoWidth
检查有两种方式:Chrome和Firefox支持新版本: 无论流是否连接到任何对象,这都是有效的 或者,对于较旧的浏览器,在查看
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
请注意,大多数网络摄像头支持多种分辨率。用于更高分辨率:
await navigator.mediaDevices.getUserMedia({video: {width: 9999}}); // 1280x720
这里有一个。您可以在选项中设置视频约束,如video:{width:1280,height:720}..选中或类似于:videoWidth=video.videoWidth;videoHeight=video.videoHeight;
await navigator.mediaDevices.getUserMedia({video: {width: 9999}}); // 1280x720