带有来自相机的输入的视频标签可在 iOS 上的 Safari 中运行，但既不能在 Chrome 中也不能在任何应用内浏览器中运行

Question

视频流非常适合 Android 和 iOS 中的 Safari。 当我们尝试在 iOS 或应用内浏览器上使用 Chrome 时会出现问题。 我使用 Vue 作为单个文件组件。

我的 HTML 代码如下：

<video
  height="400px"
  width="300px"
  autoplay
  playsinline
/>

我的 Vue JS 代码如下：

data: () => ({
  video: null,
}),
mounted() {
  navigator.mediaDevices.getUserMedia({
    audio: false,
    // Prioritize Rear Camera
    video: {facingMode: 'environment'},
  })
  .then((stream) => {
    this.video = document.querySelector('video');
    this.video.srcObject = stream;
    this.video.tracks = stream.getTracks();
  });
}

任何解决此问题的帮助或替代方法将不胜感激。 我的目标是从网页上的相机开始一个流并点击拍照。

Answer 1

尽管这里有信息，iOS 版 Chrome、Firefox 和 Edge 不支持 navigator.mediaDevices 属性，因为它们在幕后都使用内置的 WebKit 渲染引擎，该引擎不向第三方提供此功能。 这里有一个错误，其中包括一些关于 iOS 13.4 如何部分解决此问题的有希望的讨论。

在 Apple 决定提供此之前，唯一的选择是检查navigator.mediaDevices是否为 null 并捕获承诺中的错误：

if (navigator.mediaDevices == null) { /* unsupported */ }
else {
    navigator.mediaDevices.getUserMedia({})
    .then((stream) => {})
    .catch((err) => { /* unsupported */ })
}

...并为用户提供适当的反馈。