[英]Get webcam stream resolution without adding video to DOM?
我正在创建带有网络摄像头流的视频对象以应用于画布。 是否可以在不在DOM中绘制的情况下获得网络摄像头流分辨率?
// Triangel side length
const video = document.createElement('video')
const v = document.getElementById('video')
const vc = v.getContext('2d')
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
video.src = window.URL.createObjectURL(stream)
console.log(video)
video.play()
//this is where I want the stream resolution.
vc.drawImage(video, -250, -250)
loop()
})
您可以使用video元素的videoWidth和videoHeight属性来获得其分辨率(宽度x高度) ,即使不将该元素添加到DOM中。 这些属性返回视频的固有宽度/高度(以CSS像素为单位)。
const video = document.createElement('video')
const v = document.getElementById('video')
const vc = v.getContext('2d')
navigator.mediaDevices.getUserMedia({
video: true
}).then((stream) => {
video.src = window.URL.createObjectURL(stream)
console.log(video)
video.play()
// get video / stream resolution
video.onloadedmetadata = function() {
console.log('resolution: ' + this.videoWidth + ' x ' + this.videoHeight);
};
vc.drawImage(video, -250, -250)
loop()
})
注意: 触发loadedmetadata
事件后,必须调用这些属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.