网络摄像头支持野生动物浏览器

Webcam support for Safari Browser

本文关键字：浏览器 野生动物 支持 摄像头 网络      更新时间：2023-09-26

如何在台式计算机上使用 Safari 浏览器、使用 html5 或 javascript 打开网络摄像头？似乎 javascript 中的navigator.getUserMedia()在 Safari 中不起作用。我找到了一个像WebRTC项目这样的库，但是不支持Safari浏览器。谁能帮我？

navigator.getUserMedia()在新

浏览器中已弃用。尝试像这样使用：

navigator.mediaDevices.getUserMedia

这是我的整个代码

<script>
// Older browsers might not implement mediaDevices at all, so we set an empty object first
 var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var image = document.querySelector('img');
if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}
// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    // First get ahold of the legacy getUserMedia, if present
    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    // Some browsers just don't implement it - return a rejected promise with an error
    // to keep a consistent interface
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }
    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}
function snapshot() {
      var cw = video.clientWidth;
      var ch = video.clientHeight;
      ctx.drawImage(video, 0, 0, cw, ch, 0, 0, cw / 2, ch / 3);
      image.src = canvas.toDataURL();
      image.height = ch;
      image.width = cw;
  }
  video.addEventListener('click', snapshot, false);
navigator.mediaDevices.getUserMedia({ audio: false, video: true })
.then(function(stream) {
  var video = document.querySelector('video');
  // Older browsers may not have srcObject
 // if ("srcObject" in video) {
    video.srcObject = stream;
 // } else {
    // Avoid using this in new browsers, as it is going away.
    //video.src = window.URL.createObjectURL(stream);
 // }
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});
</script>
相关文章：