如何在Ionic Barcode Scanner相机流顶部显示自定义HTML内容

核心限制说明 #

默认调用Ionic Native Barcode Scanner的scan()方法拉起的是原生层级的全屏相机界面，该界面渲染优先级高于App的WebView层，你在Ionic页面中编写的所有HTML元素都会被原生相机界面遮挡，无法直接浮在相机采集流上方。

推荐实现方案 #

放弃使用默认拉起原生全屏页的扫描逻辑，改用支持WebView内嵌渲染的扫码库，这类库会直接将相机视频流输出到当前页面的视频标签中，你可以完全通过CSS的z-index属性控制自定义内容的层级，任意叠加提示文字、扫码框、操作按钮等HTML元素，实现你需要的效果。
以适配Ionic Angular技术栈的ZXing扫描库为例，实现步骤如下：

1. 安装依赖

npm install @zxing/ngx-scanner @zxing/browser @zxing/library

2. 在对应的页面模块中导入扫描模块后，编写页面模板：

<!-- 相机采集流层，设置较低z-index -->
<zxing-scanner 
  [formats]="['QR_CODE', 'EAN_13', 'CODE_128']" 
  (scanSuccess)="handleScanResult($event)"
  class="camera-stream"
></zxing-scanner>

<!-- 自定义浮层，设置更高z-index浮在相机上方 -->
<div class="custom-html-overlay">
  <div class="scan-frame"></div>
  <p class="tip-text">请将条码对准扫描框，系统将自动识别</p>
  <button class="action-btn">输入条码</button>
  <button class="close-btn">关闭</button>
</div>

3. 编写CSS控制布局和层级，可以完全还原示例图的效果：

.camera-stream {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}
.custom-html-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  /* 浮层背景设为半透明或者透明，露出下层相机流 */
  background: rgba(0,0,0,0.3);
}
/* 后续可自行编写扫描框、文字、按钮的样式 */

不推荐方案 #

不建议通过修改原生Barcode Scanner插件源码的方式实现：该方案需要分别修改Android、iOS端的原生插件代码，将原生相机页设为透明、调整WebView与原生层的层级关系，后续插件升级、重新安装依赖时都会丢失修改内容，维护成本极高，兼容性差。

自定义浮层效果参考图

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