MediaDevices.getUserMedia() 提示用户获得许可，然后全屏启动相机应用程序而不是在浏览器中

Question

我正在使用 getUserMedia() 在 vue 网络应用程序上拍摄图像。在 iOS 野生动物园除外的任何地方工作。在用户接受相机后，系统会询问用户访问相机的权限，相机将在全屏而不是浏览器中启动。我必须手动关闭它，然后才能在我的网络应用程序中看到摄像头画面。

这可以避免吗？我想在具有某些功能的浏览器中显示相机提要，而不是在用户确认许可后全屏启动相机。我猜这是一个 iOS-safari 问题，而不是 js 或 chrome..

基本语法：

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
});

Answer 1

在我的例子中，将 playsinline 属性添加到元素中解决了问题。

工作代码：

<video
    ref="video"
    autoplay
    playsinline
/>

<script>
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false,
    })

    this.$refs.video.srcObject = stream
</script>

MediaDevices.getUserMedia() 提示用户获得许可，然后全屏启动相机应用程序而不是在浏览器中

MediaDevices.getUserMedia() prompts the user for permission then launches camera app on full screen instead of in-browser

javascript

safari

google-chrome

mobile-safari

ios