如何用Javascript通过object标签调用摄像头？遇权限拒绝问题

方案1：替换为iframe标签（推荐） #

object标签本身不支持allow属性的权限控制，直接换成标准支持该属性的iframe是最省心的解决方案：

<iframe id="gameplay" class="gameplay" src="${this.links[0]}" allow="camera; microphone"></iframe>

直接复用原有的样式和ID，仅替换标签类型并添加allow属性，就能让目标页面正常申请摄像头和麦克风权限。

方案2：通过Content Security Policy（CSP）全局配置权限 #

如果必须保留object标签，可以通过页面的CSP规则来授权摄像头和麦克风访问：

• 用meta标签配置（放在页面<head>里）：

<meta http-equiv="Content-Security-Policy" content="camera 'self' ${this.links[0]}; microphone 'self' ${this.links[0]}; media-src 'self' ${this.links[0]}">

• 或者通过HTTP响应头配置（更推荐，优先级更高）：

Content-Security-Policy: camera 'self' https://目标资源域名; microphone 'self' https://目标资源域名; media-src 'self' https://目标资源域名

注意：替换https://目标资源域名为实际加载的资源地址，避免使用*通配符带来安全风险。不过部分浏览器对object标签的CSP权限支持可能不如iframe完善，需要测试验证。

方案3：在目标页面主动申请权限（需可控目标资源） #

如果加载的页面是你自己开发的，可在目标页面内主动发起权限申请，同时确保主页面与目标资源同域，或配置正确的CORS规则：

async function getMediaPermissions() {
  try {
    // 主动请求摄像头和麦克风权限
    const mediaStream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    // 后续可根据业务处理媒体流
  } catch (error) {
    console.error('权限申请失败:', error);
  }
}
// 页面加载时触发
getMediaPermissions();

同域场景下权限申请成功率更高，跨域时需确保目标服务器返回允许主域名访问的CORS响应头。

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