Power Pages网站实现在线自拍及人脸检测功能技术咨询

核心技术选型 #

无需依赖第三方付费插件，直接用前端原生API+开源AI模型即可实现需求：

• 相机捕获：使用浏览器原生navigator.mediaDevices.getUserMedia API，Power Pages支持嵌入自定义HTML/JS，无需额外插件。
• 人脸检测与关键点识别：采用Mediapipe Face Mesh或TensorFlow.js Face Landmarks Detection模型，均为前端可直接运行的轻量预训练模型，无需后端部署。

具体实现步骤 #

1. 在Power Pages中嵌入相机组件 #

在页面的自定义HTML区域添加以下元素：

<div class="camera-wrapper">
  <video id="selfie-video" autoplay playsinline style="width: 100%; max-width: 400px;"></video>
  <canvas id="capture-canvas" style="display: none;"></canvas>
  <div id="detection-status" class="status-text"></div>
  <button id="take-photo-btn" disabled>拍摄照片</button>
</div>

2. 集成人脸检测模型并实现验证逻辑 #

在页面的自定义JS区域添加以下代码（以Mediapipe Face Mesh为例）：

// 加载Mediapipe人脸关键点模型
async function initSelfieSystem() {
  // 加载模型依赖
  const visionFileset = await FilesetResolver.forVisionTasks('https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm');
  const faceMeshModel = await FaceMesh.createFromOptions(visionFileset, {
    baseOptions: {
      modelAssetPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/face_landmark.task',
      delegate: 'GPU' // 优先使用GPU加速，提升性能
    },
    numFaces: 1 // 只检测单张人脸，符合自拍场景
  });

  const videoEl = document.getElementById('selfie-video');
  const statusEl = document.getElementById('detection-status');
  const captureBtn = document.getElementById('take-photo-btn');

  // 启动前置摄像头
  async function startCamera() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ 
        video: { 
          facingMode: 'user', // 使用前置摄像头
          width: { ideal: 640 },
          height: { ideal: 480 }
        } 
      });
      videoEl.srcObject = stream;
    } catch (err) {
      statusEl.textContent = '无法访问摄像头，请检查权限设置';
    }
  }

  // 实时检测人脸与耳朵对齐
  videoEl.addEventListener('play', () => {
    async function runDetection() {
      if (videoEl.readyState !== 4) return;

      const detectionResult = faceMeshModel.detectForVideo(videoEl, performance.now());
      if (detectionResult.faceLandmarks.length === 0) {
        statusEl.textContent = '未检测到人脸，请对准镜头';
        captureBtn.disabled = true;
        requestAnimationFrame(runDetection);
        return;
      }

      // 获取左右耳朵的关键点坐标（Mediapipe Face Mesh索引：左耳234，右耳454）
      const leftEar = detectionResult.faceLandmarks[0][234];
      const rightEar = detectionResult.faceLandmarks[0][454];
      // 计算耳朵垂直方向的偏移差，阈值可根据需求调整（0.03对应画面高度的3%）
      const earAlignmentDiff = Math.abs(leftEar.y - rightEar.y);

      if (earAlignmentDiff < 0.03) {
        statusEl.textContent = '人脸对齐成功，可拍摄';
        captureBtn.disabled = false;
      } else {
        statusEl.textContent = '请调整姿势，确保双耳水平对齐';
        captureBtn.disabled = true;
      }

      requestAnimationFrame(runDetection);
    }
    runDetection();
  });

  // 拍摄照片并提交到Dataverse
  captureBtn.addEventListener('click', () => {
    const canvasEl = document.getElementById('capture-canvas');
    canvasEl.width = videoEl.videoWidth;
    canvasEl.height = videoEl.videoHeight;
    const ctx = canvasEl.getContext('2d');
    ctx.drawImage(videoEl, 0, 0);

    // 将图片转为Base64格式，用于提交
    const imageBase64 = canvasEl.toDataURL('image/jpeg', 0.8);
    
    // 这里替换为Power Pages的提交逻辑：
    // 1. 填充到表单的隐藏字段中，提交到Dataverse
    // 2. 调用Dataverse Web API直接上传图像字段
    console.log('拍摄完成，图片Base64：', imageBase64);
    statusEl.textContent = '照片已拍摄，正在提交...';
  });

  // 初始化摄像头
  startCamera();
}

// 页面加载完成后初始化系统
document.addEventListener('DOMContentLoaded', initSelfieSystem);

3. 配置Power Pages安全策略 #

在Power Pages的**内容安全策略(CSP)**设置中，添加以下规则，允许加载模型资源和摄像头访问：

• 允许脚本源：https://cdn.jsdelivr.net
• 允许媒体源：mediastream:
• 允许worker源：blob:

关键注意事项 #

• 移动端适配：确保视频元素添加playsinline属性，避免iOS设备上自动全屏播放摄像头画面。
• 权限处理：首次访问页面时，浏览器会请求摄像头权限，需提示用户允许。
• 性能优化：使用GPU加速模型，若设备不支持GPU自动降级为CPU；可调整检测帧率（比如每2帧检测一次）减少资源占用。
• 数据存储：Dataverse的图像字段支持直接存储Base64数据，或转换为Blob后通过Web API上传。

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