Web 端人脸识别新标准：玩美移动基于 JS Camera Kit 的实时图像采集与 AI 逻辑集成

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Camera Kit Sample</title>
  </head>
 
  <body>
    <script>
      window.ymkAsyncInit = function() {
        YMK.addEventListener('loaded', function() {
          /* Module fully loaded and ready */
        });
 
        YMK.addEventListener('faceDetectionCaptured', function(capturedResult) {
          /* Display all captured images */
          const container = document.getElementById('captured-results');
          container.innerHTML = '';
 
          for (const image of capturedResult.images) {
            const img = document.createElement('img');
            img.src = typeof image.image === 'string'
              ? image.image
              : URL.createObjectURL(image.image);
 
            container.appendChild(img);
          }
        });
      };
 
      function openCameraKit() {
        YMK.init({
          faceDetectionMode: 'facereshape',
          imageFormat: 'base64',
          language: 'enu',
        });
        YMK.openCameraKit();
      }
    </script>
 
    <script>
      window.addEventListener('load', function() {
        (function(d) {
          const s = d.createElement('script');
          s.type = 'text/javascript';
          s.async = true;
          s.src = 'https://plugins-media.makeupar.com/v2.2-camera-kit/sdk.js';
          d.getElementsByTagName('script')[0].parentNode.insertBefore(s, null);
        })(document);
      });
    </script>
 
    <button onClick="openCameraKit()">Open Camera Kit</button>
 
    <div id="YMK-module"></div>
 
    <h3>Captured Results:</h3>
    <div id="captured-results"></div>
  </body></html>