哪些api必须在https下调用才生效呢？

080

前几天在对接声网的过程中，发现起步就失败了，服务并没有调起摄像头。f12一看 发现报了这么一个警告。

WX20230729-104552@2x.png

大意就是navigator.mediaDevices这个api需要https环境下才可用。web的世界果然很神奇，没有遇到之前，我一度以为http://localhost 是最完美的运行环境。既然需要https，那我们就给他https （如何在本地开发调试中使用https我就不赘述了，jym可以自行谷歌百度）。

经过一番努力（大概算努力吧，大部分是在翻看文档），声网对接结束。但我对https的好奇才刚刚开始。既然存在一个需要https环境才可用的api，那么web不至于这么偏爱吧，会有其它api也是这种情况吗

遇事不决，chatgpt，老哥果然也没让我失望，居然给出了这么多api！

image.png

但万一老哥又坑我怎么办？（我被这老哥坑的可不是一次两次了，睁眼说瞎话老在行了）。教员说过，实践出真知，实践是检验真理的唯一标准。当然在实践之前向老哥再确认一下也算是例行公事

image.png
再确认一下，这次老哥总算给了一份全的 当然还可能有漏网之鱼 毕竟老哥的不靠谱我是深有体会（希望有缘人可以补充一下）
以下是一份最完整的 Web API 列表(gpt说的 不是我说的哈)，这些 API 必须在 HTTPS 环境下使用：

  • Ambient Light Sensor API
  • Battery Status API
  • Clipboard API
  • Fetch API
  • Fullscreen API
  • Gamepad API
  • Geolocation API
  • MediaDevices.getUserMedia()
  • Network Information API
  • Notification API
  • Payment Request API
  • Proximity Sensor API
  • Service Worker API
  • Vibration API
  • Web Bluetooth API
  • Web MIDI API
  • Web Speech API
  • Web Storage API
  • Web USB API
  • WebVR API
  • WebSocket API
  • WebRTC API

开始实践！

Ambient Light Sensor

mdn告诉我们这个api是用来返回主机设备周围环境光的当前亮度或照度的，很明显是个实验属性，但这个功能看起来真的高端（我就不拓展了）。

image.png
实践代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    if (window.AmbientLightSensor) {
      console.log('支持')
      const als = new AmbientLightSensor();
      als.addEventListener('reading', (event) => {
          console.log(event)
      })
      console.log('当前url',location.href)
      als.start();
    } else{
      console.log('不支持')
      console.log('当前url',location.href)
    }
  </script>
</body>
</html>

浏览器consle效果如下

image.pngimage.png

可以看到相同的代码确实https环境下才支持使用该API

Battery Status API

api功能为获取电池状态，实践结论为http不可用，https可用，实践效果如下：

image.png

image.png

Clipboard API

api功能为提供系统剪贴板的读写访问能力，实践结论为http不可用，https可用，实践效果如下：

image.pngimage.png

fetch API

这个就不用说了，肯定是可以在http环境下使用的 属于典型的chatgpt诈骗，不过有错就认，不嘴硬，老哥还是可以的（也有可能是我的老哥不够先进）

image.png

Fullscreen API

这个api用于将浏览器中的元素（如视频、图片、音频等）切换到全屏模式。在全屏模式下，元素会占据整个屏幕，用户可以更好地享受媒体内容，提高用户体验。

但经过测试发现大部分浏览器http环境下都可用，虽然移动端上表现出来的兼容性让人堪忧。再一次询问gpt后 它又一次诚恳的道歉了（我习惯了）

image.png

Gamepad API

Gamepad API 的 Gamepad 接口，定义了一个独立的游戏手柄或其他控制器，允许访问控制器的信息，譬如按钮按下的状态、坐标输入的位置。游戏手柄或其他控制器，允许访问如按钮按下，和 ID 等信息
从下面结果看，这个api还是需要https环境下的

image.pngimage.png

Geolocation API

这个api熟悉的人应该会多一点,它是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置，这将允许网站或应用基于用户的地理位置提供定制的信息。从下面的实验结果可以看出，确实也是需要在https环境下才生效的

image.pngimage.png

MediaDevices.getUserMedia()

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。
这个api就是这篇文章的引子，也是必须在https环境下才生效的 我就不在额外实验啦

Network Information API

NetworkInformation 提供有关设备正在使用的连接与网络进行通信的信息，并提供了在连接类型更改时通知脚本的事件。NetworkInformation 接口是不能被实例化的，而是通过 Navigator 的 connection 属性进行访问。

通过下面的例子可以看出 http下也是可以访问的 老哥再一次欺骗了我…
image.png

image.png

Notification API

Notifications API 的接口 Notification 用于配置以向用户显示桌面通知。如下图所示，mdn已经告诉我们必须在https环境下了，所以就不额外贴代码了（这个api我搞了一下，还挺有意思，就是移动端和ie兼容性有点差劲，而且一些用户可能直接设置的就是拒绝接受，大家可以自己试试）

image.png

Payment Request API

刚看到这个名字我就知道老哥没有骗我 和钱有关的api重要性不言而喻 就像在现实里产品测试对其它功能可以有一定的弹性空间，但pay肯定不会！需要注意的是这个api太新了 新到什么地步呢—>mdn的中文文档是搜不到 大家可以自己试一下 只有developer.mozilla.org/en-US/docs/… 这个可以访问 但是如果将en-us换成zh-cn 得到的就是下面的结果

image.png

而英文文档的第一行 就明确表明了这个api必须在https环境下使用

image.png

Proximity Sensor API

这个也是一个比较新的api 甚至更甚于pay 我是在w3c 的官方文档里才找到的资料 从文档可以看出，这个api还处于编辑草案阶段,目前我的浏览器还不能尝试，不过这个api也很有意思（这个api可以检测设备是否靠近用户的脸或其他物体，并根据检测结果进行相应的操作，例如自动关闭屏幕、暂停视频播放等），真希望能快点让我玩一玩

image.png

Service Worker API

这个api大家应该不算陌生，可以说是PWA(渐进式web应用)的好帮手。（Service Worker用于在后台运行脚本，以提供离线缓存、推送通知、网络代理等功能。通过使用 Service Worker，可以改善网站或应用程序的性能和用户体验，使其更加可靠和快速）

从下面打印结果可以看出，http下确实无法使用，不过按照mdn的说法 某些浏览器如果修改一些配置 是可以在http环境下使用的，我的看法就是不管怎样都要配置 ，那我为啥不配置个https环境呢 ?

image.png

image.png

Vibration API

mdn Vibration_API的描述是这样的：大多数现代移动设备包括振动硬件，其允许软件代码通过使设备摇动来向用户提供物理反馈。Vibration API 为 Web 应用程序提供访问此硬件（如果存在）的功能，如果设备不支持此功能，则不会执行任何操作。

这个api实践结论是http环境下是可用的 再次询问老哥后 老哥也再次道歉。。。（在此反思了一下，我是不是应该花钱升级一下老哥，有没有可能不是老哥能力不够，而是我花的钱不够呢）

image.png

Web Bluetooth API

看这个名字 bluetooth 很容易看出是和蓝牙有关的api，实践也证明确实只有https环境下才可用，而且这是一个实验属性的api，浏览器的兼容性可以说是灾难级别，连官方文档也强调了请尽量不要在生产环境中使用。。。

image.png

image.png

Web MIDI API

Web MIDI也是一个只存在于mdn英文文档中的api （用于访问 MIDI 设备。通过使用 Web MIDI API，您可以在浏览器中连接和控制 MIDI 键盘、控制器和其他 MIDI 设备，并将其用于音频合成、音乐制作和其他应用程序中）

而且文档的前几行就告诉我们必须在https环境下使用

image.png

Web Speech API

虽然Web Speech API也是一个实验性技术，但看兼容表居然还可以(Web Speech API 使您能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。)

运行以下代码 会发现http下虽然能运行，但是会直接报识别错误 https下就可以正常运行啦 老哥还是有点实力的（白嫖还是香）

// 检查设备是否支持 Web Speech API
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
  // 创建语音识别对象
  var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

  // 设置语言
  recognition.lang = 'en-US';

  // 开始识别
  recognition.start();

  // 监听识别结果
  recognition.addEventListener('result', function(event) {
    var result = event.results[0][0].transcript;
    console.log('识别结果：', result);
  });


  // 监听识别错误
  recognition.addEventListener('error', function(event) {
    console.error('识别错误：', event.error);
  });

  // 创建语音合成对象
  var synthesis = window.speechSynthesis;


  // 创建语音合成选项
  var options = new SpeechSynthesisUtterance();
  options.text = 'Hello, world!';
  options.lang = 'en-US';

  // 开始语音合成
  synthesis.speak(options);
} else {
  console.error('设备不支持 Web Speech API');
}

Web Storage API

这个api我就不赘述了 大家肯定都用过 而且http下是可用的 老哥犯这种错 确实有点低级了 还是应该升级啊

Web USB API

Web USB API这也是一个只存在英文文档中的api 而且确实只有在https下才可用 而且也是实验性（功能大概就是在浏览器中连接和控制 USB 设备，并将其用于数据传输、控制设备和其他应用程序中）

image.png
大家可以自行尝试一下 代码如下

// 检查设备是否支持 Web USB
if ('usb' in navigator) {
  // 请求访问 USB 设备
  navigator.usb.requestDevice({ filters: [] })
    .then(function(devices) {
      // 列出所有可用的 USB 设备
      devices.forEach(function(device) {
        console.log('USB 设备：', device.productName);
      });
    })
    .catch(function(error) {
      console.error('无法访问 USB 设备：', error);
    });
} else {
  console.error('设备不支持 Web USB');
}

WebVR API

WebVR API点进来一看 原来是个废弃的api 取而代之的是webXR ,那我们就来看看xr好啦 很明显这也是一个需要https环境的（用于在浏览器中实现增强现实和虚拟现实体验。通过使用 WebXR API，您可以在浏览器中连接和控制增强现实和虚拟现实设备，并将其用于游戏、体验和其他应用程序中，越发感觉web的强大！）
不过这个api体系有点庞大 我这边试了一下 不知道是浏览器问题还是什么原因 并没有完全走通一个流程 具体的我就自己私底下慢慢搞了 本文不再赘述了(如果我这个萌新还会写下一篇文章的话 可以试着写一下)

image.png

WebSocket API

WebSocket API这个api大家应该更熟悉了（WebSocket API 是一个 JavaScript API，用于在浏览器中实现 WebSocket 客户端和服务器之间的双向通信。通过使用 WebSocket API，您可以在浏览器中建立 WebSocket 连接，并使用 WebSocket 协议在客户端和服务器之间发送和接收数据）。这个api是可以在http环境下使用的

老哥可以说是又一次欺骗了我（不说了 我发完工资就充钱给老哥升级一下）

WebRTC API

WebRTC API是一个可以用在视频聊天，音频聊天或 P2P 文件分享等 Web App 中的 API。

看到rtc rtm的时候 就该意识到这个api和http无缘了 实验结果也确实如此。webRTC是需要在https环境下的（感兴趣的同学可以自己试一下哈）

// 获取本地媒体流
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
  .then(function(stream) {
    // 创建本地媒体流显示区域
    var localVideo = document.createElement('video');
    localVideo.srcObject = stream;
    localVideo.autoplay = true;
    document.body.appendChild(localVideo);

    // 创建 PeerConnection 对象
    var pc = new RTCPeerConnection();

    // 添加本地媒体流到 PeerConnection 中
    stream.getTracks().forEach(function(track) {
      pc.addTrack(track, stream);
    });


    // 监听 ICE 候选事件
    pc.onicecandidate = function(event) {
      if (event.candidate) {
        // 发送 ICE 候选到远端
        sendIceCandidate(event.candidate);
      }
    };


    // 监听远端媒体流事件
    pc.ontrack = function(event) {
      // 创建远端媒体流显示区域
      var remoteVideo = document.createElement('video');
      remoteVideo.srcObject = event.streams[0];
      remoteVideo.autoplay = true;
      document.body.appendChild(remoteVideo);
    };

    // 创建数据通道
    var dc = pc.createDataChannel('chat');

    // 监听数据通道消息事件
    dc.onmessage = function(event) {
      console.log('收到消息：', event.data);
    };

    // 发送数据通道消息
    dc.send('Hello, world!');

    // 发送 Offer 到远端
    pc.createOffer()
      .then(function(offer) {
        return pc.setLocalDescription(offer);
      })
      .then(function() {
        // 发送 Offer 到远端
        sendOffer(pc.localDescription);
      });
  })
  .catch(function(error) {
    console.error('获取本地媒体流失败：', error);
  });

// 发送 Offer 到远端
function sendOffer(offer) {
  // TODO: 发送 Offer 到远端
}

// 发送 ICE 候选到远端
function sendIceCandidate(candidate) {
  // TODO: 发送 ICE 候选到远端
}

经过实践，可以发现ai老哥(白嫖版本)现在是一个很好的帮手，能帮我们开阔思路，想要充分信任ai还有很长的路要走，但是ai已经可以帮我们从知识的海洋里筛出湖泊，而且这个湖泊确实还算是个淡水湖（可以饮用的）这已经很厉害了，比之前百度谷歌要节省很多的时间，大大提高了开发效率，尽信书不如无书，合理利用工具，大胆应用 ，敢于质疑，期待ai更完美，也期待自己能在ai的帮助下更加快速的成长。

本文就先到这里，如果还有什么api需要https环境下才可以执行，还望大家不吝赐教！！！萌新感谢ing！！！

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# 前端
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYhcsiMn' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
Dhtmlx甘特图简单实现-五八三
Dhtmlx甘特图简单实现
Dhtmlx甘特图简单实现
2年前 3623
AI太强了！使用langchain自动生成代码-五八三
AI太强了！使用langchain自动生成代码
AI太强了！使用langchain自动生成代码
2年前 466
Playwright使用教程-五八三
Playwright使用教程
Playwright使用教程
2年前 466
? 配置及使用 Strapi CMS 的一些总结-五八三
? 配置及使用 Strapi CMS 的一些总结
? 配置及使用 Strapi CMS 的一些总结
2年前 420
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？-五八三
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
2年前 404
OpenTelemetry与Jaeger集成指南-五八三
OpenTelemetry与Jaeger集成指南
OpenTelemetry与Jaeger集成指南
2年前 381
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐