带有相机输入的视频标签在 iOS 上的 Safari 中工作，但在 Chrome 和任何应用内浏览器中均不工作答案

【问题标题】：Video tag with input from Camera is Working in Safari on iOS but neither working in Chrome nor in any In-app Browser带有相机输入的视频标签在 iOS 上的 Safari 中工作，但在 Chrome 和任何应用内浏览器中均不工作
【发布时间】：2019-03-10 11:54:11
【问题描述】：

视频流非常适合 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();
  });
}

任何解决此问题的帮助或替代方法将不胜感激。我的目标是从网页上的摄像头开始流式传输并在点击时拍照。

【问题讨论】：

控制台有错误吗？
我正在尝试为我的移动设备打开控制台。显然，在 iOS 上为 Chrome 获取它并不是那么简单。如果有任何弹出，我会更新。谢谢。

标签： javascript ios google-chrome vue.js html5-video

【解决方案1】：

尽管information here Chrome、Firefox 和 Edge for iOS 不支持 navigator.mediaDevices 属性，因为事实上它们都使用内置的 WebKit 渲染引擎，该引擎不向第三方提供此功能派对。存在一个错误 filed here，其中包含一些关于 iOS 13.4 如何部分解决此问题的有希望的讨论。

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

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

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

【讨论】：