AR.js技术问询：如何通过按钮点击启停摄像头并显示/隐藏AR内容

我现在有个需求：原本所有展示AR.js浏览器端AR能力的示例及代码都是网页加载完成后立即运行的，但我想改成让用户手动控制——提供启动/停止扫描、隐藏AR内容的按钮，仅在用户点击按钮时才加载a-frame、AR.js脚本以及其他a-frame HTML元素。想请教下：AR.js有没有可传递的参数，用来响应用户启动摄像头/扫描/显示内容的操作意图？我使用的版本是：A-Frame Version: 0.7.1 (Date 18-10-2017, Commit #b9a751e)，three Version: ^0.87.0，WebVR Polyfill Version: ^0.9.36。

嘿，针对你的需求，我结合你用的这套老版本A-Frame和AR.js来给你梳理可行的方案：

一、核心思路：从自动执行改为人为触发 #

你用的这个版本（AR.js对应大概1.x系列，适配A-Frame 0.7.x）本身没有直接的“一键启动/停止AR”参数，但我们可以通过动态加载脚本+手动初始化AR场景的方式，完全实现用户手动控制的逻辑。

1. 点击按钮才加载核心脚本 #

不要在页面初始化时就引入A-Frame和AR.js，而是写个按钮，等用户点击后再动态创建脚本标签加载资源：

// 绑定到启动按钮的点击事件
document.getElementById('start-ar-btn').addEventListener('click', loadARScripts);

function loadARScripts() {
  // 先加载A-Frame
  const aframeScript = document.createElement('script');
  aframeScript.src = 'https://aframe.io/releases/0.7.1/aframe.min.js';
  document.body.appendChild(aframeScript);
  
  // 必须等A-Frame加载完成后，再加载AR.js，否则会报错
  aframeScript.onload = function() {
    const arjsScript = document.createElement('script');
    // 用适配A-Frame 0.7.1的AR.js版本，比如1.6.0
    arjsScript.src = 'https://raw.githubusercontent.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js';
    document.body.appendChild(arjsScript);
    
    // AR.js加载完后，再动态创建AR场景
    arjsScript.onload = createARScene;
  }
}

2. 动态生成AR场景元素 #

原本写在HTML里的<a-scene>等AR元素，也改成JS动态创建，这样只有用户触发后才会生成：

function createARScene() {
  // 创建AR场景容器
  const arScene = document.createElement('a-scene');
  // 设置AR.js的核心参数，比如摄像头源、检测模式这些
  arScene.setAttribute('arjs', 'sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;');
  
  // 添加摄像头实体
  const camera = document.createElement('a-entity');
  camera.setAttribute('camera', '');
  camera.setAttribute('marker-camera', '');
  
  // 举个例子：添加一个识别条形码（值为6）的标记，上面放个红色立方体
  const marker = document.createElement('a-marker');
  marker.setAttribute('type', 'barcode');
  marker.setAttribute('value', '6');
  
  const box = document.createElement('a-box');
  box.setAttribute('position', '0 0.5 0');
  box.setAttribute('material', 'color: red;');
  
  // 组装元素并添加到页面
  marker.appendChild(box);
  arScene.appendChild(camera);
  arScene.appendChild(marker);
  document.body.appendChild(arScene);
}

3. 实现停止/隐藏AR的功能 #

要停止扫描或者隐藏AR内容，直接操作生成的<a-scene>元素就行：

// 绑定到停止按钮的点击事件
document.getElementById('stop-ar-btn').addEventListener('click', stopAR);

function stopAR() {
  const arScene = document.querySelector('a-scene');
  if (arScene) {
    // 只是隐藏的话，用display:none
    arScene.style.display = 'none';
    // 如果要彻底销毁AR场景（释放摄像头权限），就用remove()
    // arScene.remove();
  }
}

如果是隐藏的场景，后续要重新启动，只需要把display改回block就行；如果是彻底销毁了，就重新调用createARScene()。

二、关于AR.js参数的适配 #

你问的“响应用户操作意图的参数”，在这个老版本里没有直接的开关，但可以通过动态设置arjs组件的属性来间接控制：

• 比如要临时关闭摄像头，可以把sourceType改成none，不过实际使用中，直接隐藏/移除场景会更简单。
• 像detectionMode（检测模式）、matrixCodeType（矩阵码类型）这些参数，都可以在动态创建arjs属性时按需传递，满足不同的扫描需求。

三、版本兼容注意事项 #

因为你用的是比较老的版本，一定要注意兼容性：

• 必须用适配A-Frame 0.7.1的AR.js版本，比如1.6.0，不然会出现各种奇怪的报错。
• 动态加载脚本的顺序不能乱，必须等A-Frame完全加载后再加载AR.js，否则AR.js找不到A-Frame的全局对象会直接挂掉。

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