时间戳

首页 > 解决方案 > navigator.getUserMedia 不适用于 safari，但适用于其他浏览器

javascript - navigator.getUserMedia 不适用于 safari，但适用于其他浏览器

问题描述

在我的应用程序中，我的 xhtml 页面之一正在访问相机，为此我创建了一个脚本，脚本如下

function getCamera() {
    navigator.getMedia = ( navigator.getUserMedia || // use the proper vendor prefix
           navigator.webkitGetUserMedia ||
           navigator.mozGetUserMedia ||
           navigator.msGetUserMedia);
    navigator.getMedia({video: true}, function() {
      console.log("webcam is available ");
      document.getElementById('camera-image').style.display='';
      document.getElementById('no-image').style.display='none';
    }, function() {
      console.log("webcam is not available ");
      document.getElementById('camera-image').style.display='none';
      document.getElementById('no-image').style.display='';
    });
}

该脚本在 chrome、firefox、opera 上运行良好，但不适用于 safari。

任何人都可以帮助我吗？

标签： javascript

解决方案

根据 MDN Docs，navigator.getUserMedia已被弃用，并且在 Safari 浏览器中不受支持。您可以查看从 MDN 文档中获取的兼容性表。 在此处输入图像描述

相反，您可以使用对不同浏览器有更好支持 的navigator.mediaDevices.getUserMedia 。在此处输入图像描述

试试这个代码。希望，这可以帮助你

function getCamera() {

  if (!navigator.mediaDevices && !navigator.mediaDevices.getUserMedia) {
    navigator.userMedia = navigator.mozGetUserMedia || navigator.getUserMedia
    if (!navigator.userMedia) {
      alert("Please Update or Use Different Browser");
      return
    }
    navigator.userMedia({
      video: true
    }, (stream) => showCam(stream), (err) => showErr(err))
    return
  }

  navigator.mediaDevices.getUserMedia({
      video: true
    })
    .then((stream) => showCam(stream))
    .catch((err) => showErr(err))

  function showCam(stream) {
    let video = document.querySelector("video");
    video.srcObject = stream;
  }

  function showErr(err) {
    let message = err.name === "NotFoundError" ? "Please Attach Camera" :
      err.name === "NotAllowedError" ? "Please Grant Permission to Access Camera" : err
    alert(message)
  }
}

推荐阅读