navigator.getUserMedia() 在移动设备上不起作用 - Javascript

问题描述

在使用 navigator.getUserMedia() 在移动设备上时，该函数无法正常工作。如何解决这个问题？

解决方案

1. 检查兼容性

首先，需要检查设备和浏览器是否支持 getUserMedia()。

可以使用以下代码检查：

if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not supported in this browser'));
    }
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

如果输出错误信息，则说明该设备或浏览器不支持 getUserMedia()。

2. 确保HTTPS

在移动设备上，getUserMedia() 只能在安全上下文(HTTPS或localhost)中使用。

请确保所使用的网页是使用 HTTPS 协议加载的。

3. 请求权限

在使用 getUserMedia() 之前，请确保已经请求了必要的权限。

可以使用以下代码请求权限：

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(stream) {
    /* do something with the stream */
  })
  .catch(function(err) {
    /* handle the error */
  });

提示用户授权权限，然后再调用该函数。授权后，应该能够正常使用 getUserMedia()。

总结

当在移动设备上使用 navigator.getUserMedia() 函数时出现错误时，应该先检查兼容性、确保使用了HTTPS，还要确保已经请求必要的权限。

希望这些解决方案对你有所帮助！