安卓浏览器引入脚本失效、网页摄像头无法调用问题排查求助

阿华AIGC实验室

2026-5-19

安卓浏览器无法加载JS并调用摄像头的排查方向

根据你描述的情况——PC端正常运行、安卓端JS加载失败且摄像头无法调用，我整理了几个最可能的原因和对应的排查思路：

1. HTTPS 协议限制

大多数现代安卓浏览器（包括Chrome、三星浏览器等）要求调用摄像头等媒体设备必须在HTTPS环境下运行，除了本地localhost测试场景外，HTTP环境下不仅会直接阻止getUserMedia的调用，还可能因浏览器的安全策略拦截脚本加载。

排查方法：检查网页是否部署在HTTPS环境；如果是本地测试，尝试用localhost代替IP地址访问。

2. 脚本兼容性问题（ES6+语法未转译）

旧版本安卓浏览器（比如Android 7及以下的系统自带浏览器）对ES6+语法（箭头函数、let/const、模块化语法等）支持有限，若你的JS代码未经过Babel等工具转译为ES5，会导致脚本解析失败，直接出现加载错误。

排查方法：查看控制台的报错信息（通常是Unexpected token '=>'这类语法错误）；使用Babel转译代码，或在脚本标签中添加type="module"的同时提供ES5降级版本。

3. 脚本加载路径或MIME类型问题

路径问题：如果脚本使用相对路径（比如./js/camera.js），安卓端访问时可能因服务器配置或URL结构差异，导致浏览器找不到脚本文件，返回404错误。
MIME类型问题：服务器未正确设置JS文件的Content-Type为application/javascript，部分安卓浏览器会拒绝加载MIME类型不正确的脚本。
排查方法：在安卓浏览器的Network面板查看脚本的请求状态，确认是否返回404或错误的MIME类型；调整路径为绝对路径，或配置服务器的MIME类型映射。

4. Content Security Policy (CSP) 拦截

如果网页设置了严格的CSP规则，可能在安卓浏览器中拦截了脚本加载或媒体设备访问。比如CSP未允许media-src为self或摄像头相关源，或者未允许脚本的加载源。

排查方法：查看控制台的CSP相关报错；调整CSP规则，添加media-src 'self' blob:允许摄像头访问，同时确保script-src包含你的脚本来源。

5. 安卓浏览器版本或厂商定制差异

不同厂商的安卓浏览器（比如小米、华为的自带浏览器）可能有自己的安全策略或API支持差异，部分旧版本浏览器甚至不支持navigator.mediaDevices.getUserMedia，而是使用旧的navigator.getUserMediaAPI。

排查方法：测试不同版本的安卓浏览器（比如最新版Chrome、Edge）；在代码中添加API兼容性检测，示例代码如下：

// 摄像头API兼容性处理示例
function getMediaStream(constraints) {
  if (navigator.mediaDevices?.getUserMedia) {
    return navigator.mediaDevices.getUserMedia(constraints);
  } else {
    return new Promise((resolve, reject) => {
      navigator.getUserMedia(constraints, resolve, reject);
    });
  }
}