navigator.getUserMedia经bind绑定为别名后调用未返回Promise的原因排查

异常本质 #

你实际调用的并非文档中描述的Promise化getUserMedia实现，而是浏览器为兼容旧代码保留的遗留回调式原生接口，和文档描述的方法根本不是同一个对象。

具体行为拆解 #

• 新版标准中支持单参传约束、自动返回Promise的getUserMedia，是挂载在navigator.mediaDevices接口下的方法，而非直接挂载在Navigator全局对象上。
• 直接挂载在navigator下的getUserMedia是Web API发展早期的遗留实现，从设计之初就固定要求3个入参：媒体约束对象、成功回调函数、失败回调函数，没有内置Promise返回逻辑。你只传入1个约束参数时，浏览器会直接在参数校验阶段抛出缺失参数的错误，根本不会进入返回Promise的逻辑分支。
• 你之前注释里提到“必须绑定到navigator上再做别名”的思路是对的，所有浏览器原生方法脱离宿主调用时都会因为this指向错误报错，但this绑定只解决执行上下文的问题，没法改变这个老方法本身的参数校验规则。就算你正确绑定了navigator作为this，三参校验的逻辑依然存在，所以单参调用必然报错。
• 出现认知偏差的原因：早年浏览器普及摄像头调用能力时，所有兼容实现都是直接挂在navigator下的三参回调式接口；后续标准迭代把Promise版本的getUserMedia迁移到了mediaDevices命名空间下，但旧版的navigator.getUserMedia为了不破坏十年前的老网页，一直没有被移除，导致很多人混淆了两个同名方法的实际行为和挂载位置。

正确的别名创建方式 #

如果需要创建支持Promise的getUserMedia别名，不要直接绑定navigator下的同名遗留方法，应该优先绑定标准的mediaDevices下的实现，同时做好兼容性兜底：

// 获取当前环境下可用的getUserMedia实现
const availableGetUserMedia = navigator.mediaDevices?.getUserMedia 
  || navigator.webkitGetUserMedia 
  || navigator.mozGetUserMedia;
// 绑定正确的宿主对象
const _getUserMedia = availableGetUserMedia?.bind(navigator.mediaDevices || navigator);

注意：部分老旧浏览器的前缀版实现依然是三参回调式，不会自动返回Promise，实际生产环境需要额外做兼容封装。

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