FAQ

// Check browser support
if (typeof WebAssembly === 'undefined') {
    console.error('Browser does not support required web technologies');
}

// ES Module
import { BeautyEffectEngine } from 'facebetter';
console.log('SDK imported successfully');

// CommonJS
const { BeautyEffectEngine } = require('facebetter');
console.log('SDK imported successfully');

// Check browser support
if (typeof WebAssembly === 'undefined') {
    alert('Your browser version is too old, please use Chrome 57+, Firefox 52+, Safari 11+, or Edge 16+');
}

npm update facebetter

npm install facebetter@latest

// Increase parameter value
engine.setBasicParam(BasicParam.Whitening, 0.8); // Increase from 0.5 to 0.8

// Use image mode
const result = engine.processImage(
    imageData, 
    imageData.width, 
    imageData.height, 
    FrameType.Image  // Use image mode
);

// Lower parameter value
engine.setBasicParam(BasicParam.Whitening, 0.2); // Lower from 0.5 to 0.2

// Set necessary beauty parameters
engine.setBasicParam(BasicParam.Smoothing, 0.5);

import { VirtualBackgroundOptions, BackgroundMode } from 'facebetter';

// Set virtual background (automatically enables the effect)
const options = new VirtualBackgroundOptions({
  mode: BackgroundMode.Blur
});
engine.setVirtualBackground(options);

// Set blur background
const blurOptions = new VirtualBackgroundOptions({
  mode: BackgroundMode.Blur
});
engine.setVirtualBackground(blurOptions);

// Set image background
const bgImage = new Image();
bgImage.onload = () => {
  const imageOptions = new VirtualBackgroundOptions({
    mode: BackgroundMode.Image,
    backgroundImage: bgImage
  });
  engine.setVirtualBackground(imageOptions);
};
bgImage.src = '/path/to/background.png';

// Check image data
if (!imageData || !imageData.data) {
    console.error('Invalid image data');
    return;
}

// Check Canvas
const canvas = document.getElementById('canvas');
if (!canvas) {
    console.error('Canvas element does not exist');
    return;
}

const ctx = canvas.getContext('2d');
if (!ctx) {
    console.error('Cannot get Canvas context');
    return;
}

// Check dimensions
if (canvas.width === 0 || canvas.height === 0) {
    console.error('Invalid Canvas dimensions');
    return;
}

// Use video mode (synchronous method)
const result = engine.processImage(
    imageData, 
    imageData.width, 
    imageData.height, 
    FrameType.Video  // Video mode is faster
);

// Lower resolution
const smallCanvas = document.createElement('canvas');
smallCanvas.width = Math.floor(canvas.width / 2);
smallCanvas.height = Math.floor(canvas.height / 2);
const smallCtx = smallCanvas.getContext('2d');
smallCtx.drawImage(sourceCanvas, 0, 0, smallCanvas.width, smallCanvas.height);
const smallImageData = smallCtx.getImageData(0, 0, smallCanvas.width, smallCanvas.height);

// Reuse Canvas
let reusableCanvas = null;
let reusableCtx = null;

function getReusableCanvas(width, height) {
    if (!reusableCanvas) {
        reusableCanvas = document.createElement('canvas');
        reusableCanvas.width = width;
        reusableCanvas.height = height;
        reusableCtx = reusableCanvas.getContext('2d');
    } else if (reusableCanvas.width !== width || reusableCanvas.height !== height) {
        reusableCanvas.width = width;
        reusableCanvas.height = height;
    }
    return { canvas: reusableCanvas, ctx: reusableCtx };
}

// Optimize with requestAnimationFrame
function processFrame() {
    requestAnimationFrame(() => {
        try {
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            // processImage is a synchronous method
            const result = engine.processImage(
                imageData, 
                canvas.width, 
                canvas.height, 
                FrameType.Video
            );
            ctx.putImageData(result, 0, 0);
        } catch (error) {
            console.error('Processing failed:', error);
        }
        
        // Continue next frame
        if (isProcessing) {
            processFrame();
        }
    });
}

// Detect browser support
function checkBrowserSupport() {
    if (typeof WebAssembly === 'undefined') {
        return {
            supported: false,
            message: 'Your browser does not support WebAssembly'
        };
    }
    
    return {
        supported: true,
        message: 'Browser supports WebAssembly'
    };
}

// Mobile optimization
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
    // Lower resolution
    canvas.width = Math.min(canvas.width, 640);
    canvas.height = Math.min(canvas.height, 480);
    
    // Use video mode
    processMode = FrameType.Video;
    
    // Lower parameter values
    engine.setBasicParam(BasicParam.Whitening, 0.3);
}

<template>
  <canvas ref="canvasRef"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { BeautyEffectEngine, EngineConfig } from 'facebetter';

const canvasRef = ref(null);
let engine = null;

onMounted(async () => {
  const config = new EngineConfig({
    appId: 'your-app-id',
    appKey: 'your-app-key'
  });
  
  engine = new BeautyEffectEngine(config);
  await engine.init();
});

onUnmounted(() => {
  if (engine) {
    engine.destroy();
  }
});
</script>

import { useEffect, useRef } from 'react';
import { BeautyEffectEngine, EngineConfig } from 'facebetter';

function BeautyComponent() {
  const canvasRef = useRef(null);
  const engineRef = useRef(null);
  
  useEffect(() => {
    async function init() {
      const config = new EngineConfig({
        appId: 'your-app-id',
        appKey: 'your-app-key'
      });
      
      engineRef.current = new BeautyEffectEngine(config);
      await engineRef.current.init();
    }
    
    init();
    
    return () => {
      if (engineRef.current) {
        engineRef.current.destroy();
      }
    };
  }, []);
  
  return <canvas ref={canvasRef} />;
}

function handleFileUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = async function(e) {
        const img = new Image();
        img.onload = async function() {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const result = engine.processImage(
                imageData, 
                canvas.width, 
                canvas.height, 
                FrameType.Image
            );
            
            ctx.putImageData(result, 0, 0);
            
            // Display processed image
            const resultImg = document.createElement('img');
            resultImg.src = canvas.toDataURL();
            document.body.appendChild(resultImg);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}