使用 getUserMedia 的纵向后置摄像头

Question

我正在尝试使用 navigator.mediaDevices.getUserMedia 以纵向方式启动后置摄像头，因为相机似乎没有考虑我发送的约束这是代码如何查找初始化

 const constraints = {
                    video: {
                        aspectRatio: 6/19,
                        width: 1920,
                        height: 1080,
                        facingMode: "environment",
                    },
                    audio: false,
                };

     navigator.mediaDevices.getUserMedia(constraints)
            .then((mediaStream) => {
                video = document.querySelector('video');
                video.srcObject = mediaStream;
                video.onloadedmetadata = () => {
                    video.play();
                };
            })
            .catch((err) => {
                console.error(`${err.name}: ${err.message}`);
            });

    <video autoPlay={true} playsInline={true} muted={true} id="video" width="100%" height="100%"></video>

我想让后置摄像头在手机上竖屏时全屏打开，横屏时全屏似乎没问题，但竖屏时看起来像这样

Answer 1

我给你一个HTML页面供你参考：

async function initCam() {
  try {
    let constraints = {
      "video": {
        facingMode: "environment"            
      }
    };
    let stream = await navigator.mediaDevices.getUserMedia(constraints);
    let video = document.getElementById("qq");
    video.srcObject = stream;
  } catch (err) {
    console.log(err);
  };
}

.container {
  display: flex;
  flex-grow: 1 1;
}

video {
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

<body onload="initCam()">
  <div class="container">
    <video autoplay muted controls id="qq" />
  </div>
</body>

PS：请在手机上运行，我的PC chrome没有“facingMode”约束。

使用 getUserMedia 的纵向后置摄像头

问题描述投票：0回答：1

1个回答

最新问题

使用 getUserMedia 的纵向后置摄像头

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1