BuildFire.JS WebRTC无法访问摄像头与麦克风权限报错

AI 小北

2026-8-27

问题场景

在Widget Builder内基于buildfire.js使用WebRTC开发视频聊天应用时，系统未弹出摄像头、麦克风权限访问申请提示，直接返回权限被拒绝错误，报错信息如下：

Uncaught (in promise) 
bt {gum: {…}, name: 'gum.permission_denied', message: 'User denied permission to use device(s): audio, video', stack: 'Error\n    at new bt (https://meet.bingewave.com/li…bingewave.com/libs/lib-jitsi-meet.min.js:2:509715'}
gum:
constraints: {video: {…}, audio: {…}}
devices: (2) ['audio', 'video']
error: DOMException: Permission denied
message: "User denied permission to use device(s): audio, video"
name: "gum.permission_denied"
stack: "Error\n    at new bt (https://meet.bingewave.com/libs/lib-jitsi-meet.min.js:2:269189)\n    at https://meet.bingewave.com/libs/lib-jitsi-meet.min.js:2:509715"
[[Prototype]]: Error

核心原因

这个问题不是用户手动拒绝了权限，是Buildfire的沙箱运行环境+浏览器安全策略直接拦截了权限请求，根本没走到系统弹窗那一步：

Buildfire插件默认没有声明音视频设备使用权限，沙箱会直接拦截相关API调用
承载视频能力的跨域iframe没有配置对应的权限允许策略，浏览器会直接拒绝跨域场景下的设备访问请求
权限调用时机不对，或者访问协议不符合安全要求，浏览器自动拦截非安全场景下的权限申请

配置解决步骤

配置插件权限声明
打开插件根目录的plugin.json文件，在配置中添加摄像头、麦克风的权限声明，告知Buildfire运行时当前插件需要调用音视频设备：
```
{
  // 其他原有配置保持不变
  "permissions": [
    "camera",
    "microphone"
  ]
}
```
配置iframe权限策略
如果视频功能是通过iframe嵌入的WebRTC服务（比如当前使用的Jitsi Meet服务），必须给iframe标签添加权限声明属性，否则跨域场景下浏览器不会弹出权限提示：
```
<iframe 
  src="你的视频服务页面路径"
  allow="camera *; microphone *; autoplay *; fullscreen *"
  allowusermedia
></iframe>
```
注意：如果iframe加了sandbox属性，必须确保属性值包含allow-same-origin、allow-scripts，不要添加多余的权限限制，否则沙箱会直接阻断设备API调用。
调整权限调用时机
所有调用navigator.mediaDevices.getUserMedia的逻辑，必须绑定在用户主动触发的交互事件回调中（比如点击「加入通话」按钮的click事件），不要在页面初始化、setTimeout、异步请求回调这类无用户直接交互的场景下调用，浏览器会自动拦截这类非用户触发的权限请求，不会弹窗。
本地开发环境校验
本地调试必须使用HTTPS协议访问Widget Builder预览地址，HTTP协议下浏览器默认永久禁用音视频设备访问权限，不会弹出任何提示；如果之前操作时不小心选了「永久拒绝」该站点的权限，需要打开浏览器对应站点的设置页，把摄像头、麦克风权限手动改回「询问」状态。

验证方式

所有配置修改完成后，重新上传插件包、清空缓存刷新Widget Builder预览页，主动点击触发视频通话的按钮，此时会正常弹出系统级的摄像头、麦克风权限申请弹窗，选择允许后即可正常调用设备，不会再抛出gum.permission_denied错误。

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