Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在不向DOM添加视频的情况下获得网络摄像头流分辨率?_Javascript_Html - Fatal编程技术网

Javascript 在不向DOM添加视频的情况下获得网络摄像头流分辨率?

Javascript 在不向DOM添加视频的情况下获得网络摄像头流分辨率?,javascript,html,Javascript,Html,我正在使用网络摄像头流创建一个视频对象,以应用于画布。我可以在不在DOM中绘制的情况下获得网络摄像头流的分辨率吗 // Triangel side length const video = document.createElement('video') const v = document.getElementById('video') const vc = v.getContext('2d') navigator.mediaDevices.getUserMedia({video: true})

我正在使用网络摄像头流创建一个视频对象,以应用于画布。我可以在不在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()
})
您可以使用视频元素的和属性来获得其分辨率(宽度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
事件后调用这些属性