授权

GPS 授权

function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    else
    {
        console.log("该浏览器不支持获取地理位置。");
    }
}

function showPosition(position)
{
    console.log("纬度: " + position.coords.latitude +
    " 经度: " + position.coords.longitude);    
}

function showError(error) {
    console.log(error);
}

音频授权

if (navigator.mediaDevices.getUserMedia) {
  const constraints = { audio: true };
  navigator.mediaDevices.getUserMedia(constraints).then(
    stream => {
      console.log("授权成功！");
    },
    () => {
      console.error("授权失败！");
    }
  );
} else {
  console.error("浏览器不支持 getUserMedia");
}

摄像头视频授权

const constraints = {
  video: true // 请求视频流
};

const videoElement = document.getElementById('video');

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    videoElement.srcObject = stream;
  })
  .catch(error => {
    console.error('获取摄像头权限失败:', error);
  });

遇到问题

浏览器安全机制

按照上面的步骤去做，理论上是可以实现我们的功能。但事实并非如此，不信你可以起个服务验证一下看看。

通过验证，你会发现在Chrome 浏览器中使用http://localhost:8080 或者 http://127.0.0.1:8080 可以正常获取到浏览器的地理位置，但通过IP或者域名的形式，如：http://172.21.3.82:8080 和 http://b.cunzhang.com进行访问时却获取不到。

为什么呢？打开控制台，你会发现有以下错误信息：
Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

“只有在安全来源的情况才才被允许”。错误信息里还包含了一个提示链接，我们不妨打开这个链接（https://goo.gl/Y0ZkNV）看看。原来，为了保障用户的安全，Chrome浏览器认为只有安全的来源才能开启定位服务。那什么样才算是安全的来源呢？在打开链接的页面上有这么一段话：

“Secure origins” are origins that match at least one of the following (scheme, host, port) patterns:

• (https, *, *)

• (wss, *, *)

• (*, localhost, *)

• (*, 127/8, *)

• (*, ::1/128, *)

• (file, *, —)

• (chrome-extension, *, —)

This list may be incomplete, and may need to be changed. Please discuss!

大概意思是说只有包含上述列表中的scheme、host或者port才会被认为是安全的来源，现在这个列表还不够完整，后续可能还会有变动，有待讨论。

这就可以解释了为什么在http://localhost:8080 和 http://127.0.0.1:8080访问下可以获取到浏览器的地理位置，而在http://172.21.3.82:8080 和 http://b.cunzhang.com 确获取不到了。

方法一

如果需要在域名访问的基础上实现地位位置的定位，那我们只能把http协议升级为https了。

方法二

在浏览器地址栏中输入chrome://flags/#unsafely-treat-insecure-origin-as-secure，回车，如下图，将该选项置为
，在输入框中输入需要访问的地址，多个地址使用“,”隔开，然后点击右下角弹出的
按钮，自动重启浏览器之后就可以在添加的http地址下调用摄像头和麦克风，地址了。

• 本文链接： /archives/184
• 版权声明： 本博客所有文章除特别声明外，均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处！