忘忧的小站

  • 首页
  • 文章归档
  • 日志
  • 关于页面

  • 搜索
分布式索引 索引 全文搜索 Lucene.Net GPS 音视频 过滤 AOP 时区 升级 ABP.Zero 数据备份 linux 阿里云盘 aliyunpan 面试题 Signalr S 汉字 css html 前端 拼音键盘 在线键盘 uniapp .Net Core XMLRPC Serilog LOKI Nlog 分布式日志 加密 总结 人生 Asp.Net Core Swagger Web Element-plus Quasar 匹配 JavaScript 正则 .Net 后台 架构师 Redis EF CORE MySQL 自考 英语 集群 Jenkins CI/DI 内网穿透 代理 ABP 学习 后端 软考

JavaScript授权Gps,音频,视频踩坑

发表于 2023-11-27 | 分类于 杂项 | 0 | 阅读次数 1283

授权

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地址下调用摄像头和麦克风,地址了。

image

  • 本文作者: 忘忧
  • 本文链接: /archives/184
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
.Net7 针对Utc时区转换问题中间件
Lucene.Net 入门和简单使用
  • 文章目录
  • 站点概览
忘忧

忘忧

君子藏器于身,待时而动,何不利之有

44 日志
6 分类
60 标签
RSS
Github E-mail StackOverflow
Creative Commons
0%
© 2025 忘忧
由 Halo 强力驱动