获取摄像头流分辨率而不添加视频到DOM？

Question

我使用网络摄像头流创建视频对象以应用于画布。我可以在没有在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() 
}) 

Answer 1

您可以使用视频元素的videoWidth和videoHeight属性来获取其resolulation （宽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事件被触发后，必须调用这些属性。