file协议访问时MediaDevices.enumerateDevices()无法展示全部媒体设备如何解决

这是浏览器的安全策略限制：媒体设备相关的Web API（如navigator.mediaDevices下的所有接口）要求页面必须运行在*安全上下文（Secure Context）*中。默认仅HTTPS协议、http://localhost/http://127.0.0.1这类本地回环地址属于安全上下文，file://协议默认不在安全上下文范围内，因此会出现设备枚举不全、deviceId和label字段为空的问题。

不同浏览器可以通过调整设置，将file://协议纳入安全上下文范围，实现file协议下正常获取媒体设备信息：

Chromium内核浏览器（Chrome、Edge、360极速浏览器等） #

• 方法1：添加启动参数
  关闭所有已打开的浏览器窗口，右键点击浏览器快捷方式选择「属性」，在「目标」栏原有路径末尾添加空格，再粘贴以下参数：

  --allow-file-access-from-files --unsafely-treat-insecure-origin-as-secure=file:///*
  

  保存后用该快捷方式启动浏览器，再打开本地html文件即可正常获取设备信息。
• 方法2：修改浏览器Flags设置
  地址栏输入对应入口地址：Chrome输入chrome://flags/#unsafely-treat-insecure-origin-as-secure，Edge输入edge://flags/#unsafely-treat-insecure-origin-as-secure，将该选项改为Enabled，在下方输入框填入file:///*，重启浏览器后生效。

Firefox浏览器 #

• 地址栏输入about:config，接受风险提示后搜索security.fileuri.strict_origin_policy，双击将该配置项的值改为false，重启浏览器即可。

以上配置仅适用于本地开发测试场景，日常上网时请恢复默认设置，避免降低浏览器安全等级导致隐私泄露风险。如果是面向用户的生产环境项目，请务必部署到HTTPS服务上，符合Web API的标准安全要求。

内容的提问来源于stack exchange，提问作者Alok