我正在创建一个带有网络摄像头流的视频对象以应用于 Canvas 。我可以在不在 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()
})
最佳答案
您可以使用 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
事件后调用这些属性。
关于javascript - 在不向 DOM 添加视频的情况下获取网络摄像头流分辨率?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42484292/