Model Mode

npm install @mirrar-sdm/ar-engine @mirrar-sdm/gallery-mode

<div id="ar-container">
    <canvas id="modelCanvas" width="640" height="480"></canvas>
</div>

import { GalleryMode } from '@mirrar-sdm/gallery-mode'
 
const imageURL = 'model image url'
const canvas = document.getElementById('modelCanvas')
 
GalleryMode.setModelURL(imageURL)
GalleryMode.init(canvas)
 
setupAREngine(canvas)

import {AR_Engine} from "@mirrar-sdm/ar-engine"
import { TrackingTypeEnum } from "@mirrar-sdm/ar-engine/lib/TrackingManagers/MachineLearningTrackingManager"
 
function setupAREngine(canvas) {
    const container = document.getElementById('ar-container')
 
    // You can set any dimensions here but it is advised
    // to set the dimensions of AR Engine same as camera feed 
    const options = {
                container: container,
                dimensions: {
                    width: canvas.width,
                    height: canvas.height
                }
    }
    const arEngine = new AR_Engine(options)
}

 
// choose tracking type as face or hand
const trackingType = TrackingTypeEnum.Face // TrackingTypeEnum.Hand
 
// function to get the download progress of the AI model
const progressFunction = (values) -> {
    console.log("Download Progress", values)
}
 
// callback that will be called after completion of Face/Hand Tracking Setup
const onComplete = () => {
    console.log("Tracking setup successfull")
}
 
arEngine.setupTracking(trackingType, progressFunction, (data) => {
    onComplete(data)
})

if(arEngine) {
    arEngine.processFrame(canvas, onProcessingComplete)
}