navigator.mediaDevices.getUserMedia不适用于较新的手机

时间:2018-02-12 19:48:48

标签: javascript android video-streaming

我无法通过新的华为P10手机获取视频。 奇怪的是,它适用于我的旧华为P7。 它在延迟变换期间(大约15秒)滞后,即使它返回canplay也从不给出实际视频。 我知道iPhone 6s中也存在这个问题。 有没有人有类似的问题或解决方案?

UPDATE! 6.mar.2018

问题似乎与浏览器平台有关。 我在我的手机上安装了Firefox并且代码工作得很好(尽管它在每次重新加载时仍然纠缠于使用相机的权利,即使它在https服务器上)。

所以只是为了迭代,问题似乎仅限于Chrome移动版。

实现adapter.js polyfill的任何机会都可以解决问题。我真的不知道自己在做什么。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<script type="text/javascript">
// Older browsers might not implement mediaDevices at all, so we set an empty object first
function strt(){

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);
    });
  }
}
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.onloadstart = function(e) {
    alert("loadstart");
  };
  video.ondurationchange = function(e) {
    alert("ondurationchange");
  };
  video.onloadedmetadata = function(e) {
    alert("meta");
    video.play();
  };
  video.onloadeddata = function(e) {
    alert("onloadeddata");
  };
  video.oncanplay = function(e) {
    alert("oncanplay");
  };
})
.catch(function(err) {
  alert(err.name + ": " + err.message);
  console.log(err.name + ": " + err.message);
});
}
</script>
</head>
<body onload="strt()">
<video></video>
</body>
</html>

0 个答案:

没有答案