Just load the library and set up :

• onWebappReady (see below) : called when library is ready to play
• set up listeners for webapp events => see subscribeTo (listens to change in componentStatus of any component) and addEventListeners

// export enum componentStatus {
// LOADING,
// READY,
// STARTED,
// RUNNING,
// PAUSED,
// SUCCEDED,
// FAILED
// }

// export enum componentName {
// WEBARGO,
// VIDEO,
// TRACKING,
// SCENE,
// RECO,
// ODO
// }
let options = {
app: {
targetFPS: 30,
useGyroscop: false,
autoStart:false,
debug:true,
lang:’fr’,
useShadow:false
},
apis: {
apiMediaUrl: “https://apidev.bear2b.com/”,
apiUrl: “https://apidev.bear2b.com/v2.10/”,
jwt: “eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpZGV2LmJlYXIyYi5jb21cLyIsImlhdCI6MTU4MTAwOTExNiwiZXhwIjoxNTg1ODQ3NTE2LCJiYXBpX3R5cGUiOiJzZXJ2aWNlIiwiYmFwaV9hY2Nlc3MiOiJyZXN0cmljdGVkIiwiYmFwaV9hcHBfaWQiOjMsImJhcGlfb3JpZ2luX2FsbG93ZWQiOiIiLCJiYXBpX3VzZXJfaWQiOjgyOSwiYmFwaV9jbGllbnRfaWQiOjUsImJhcGlfcm9sZV9pZCI6MSwiYmFwaV9maXJzdF9uYW1lIjoiV2VieHIiLCJiYXBpX2xhc3RfbmFtZSI6IkRldiIsImJhcGlfdXNlcl9sYXN0X3VwZGF0ZWRfdGltZSI6MTU3MDcxNzk5OH0.no2JbqfdsTeXamm-NDqG-qcfAQt0RNKAk0lLQiT3LDQ”,
dev_apiMediaUrl: “https://apidev.bear2b.com/”,
dev_apiUrl: “https://apidev.bear2b.com/v2.10/”,
dev_jwt: “eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpZGV2LmJlYXIyYi5jb21cLyIsImlhdCI6MTU4NTkyMTg4NCwiZXhwIjoxNjM0MzA1ODg0LCJiYXBpX3R5cGUiOiJzZXJ2aWNlIiwiYmFwaV9hY2Nlc3MiOiJyZXN0cmljdGVkIiwiYmFwaV9hcHBfaWQiOjMsImJhcGlfb3JpZ2luX2FsbG93ZWQiOiIiLCJiYXBpX3VzZXJfaWQiOjgyOSwiYmFwaV9jbGllbnRfaWQiOjUsImJhcGlfcm9sZV9pZCI6MSwiYmFwaV9maXJzdF9uYW1lIjoiV2VieHIiLCJiYXBpX2xhc3RfbmFtZSI6IkRldiIsImJhcGlfdXNlcl9sYXN0X3VwZGF0ZWRfdGltZSI6MTU4NTkyMTU1MX0.7Zl6VSicEliweug9LNY0t1SyFdOkY9nwtA17uSpVW8M”,
prod_apiMediaUrl: “https://api.bear2b.com/”,
prod_apiUrl: “https://api.bear2b.com/v2.10/”,
prod_jwt: “eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLmJlYXIyYi5jb21cLyIsImlhdCI6MTU4MTAwOTAyMywiZXhwIjoxNjI5MzkzMDIzLCJiYXBpX3R5cGUiOiJzZXJ2aWNlIiwiYmFwaV9hY2Nlc3MiOiJyZXN0cmljdGVkIiwiYmFwaV9hcHBfaWQiOjMsImJhcGlfb3JpZ2luX2FsbG93ZWQiOiIqLmFyLWdvLmNvIiwiYmFwaV91c2VyX2lkIjo2MDM5LCJiYXBpX2NsaWVudF9pZCI6MjcsImJhcGlfcm9sZV9pZCI6MSwiYmFwaV9maXJzdF9uYW1lIjoiU25hcCIsImJhcGlfbGFzdF9uYW1lIjoiV2VieHIiLCJiYXBpX3VzZXJfbGFzdF91cGRhdGVkX3RpbWUiOjE1NzEzOTM2NTh9.BiYaMUAblvfkAjhFcialXxjlnSooi5a9d15Ivq55Oes”,
default: “prod”
},
video: {
videoId: “webcam”,
mp4VideoPath:””,
trackConstraints: {
facingMode: {
ideal: “environment”
},
width: {
min: 480,
ideal: 640,
max: 1000
},
height: {
min: 480,
ideal: 480,
max: 1000
},
frameRate: {
min: 30,
ideal: 60
}
}
},
reco: {
pageId:””,//53163
maxRecoRequests: 1,
},
tracking: {
excludedFromTrackingBooks:[49581,46942,421281],
useWorkers: false,
nbWorkers: 1,
maxNbNotFound: 5,
},
scene: {
preloadScene: 1,
three: {
motherDomElement: null,
antialias: true,
preserveDrawingBuffer: true,
alpha:true,
focalLength: 424,
canvasId: “myARCanvas”,
switchToVRWhenTrackingLost: true,
}
}
}

function onWebAppReady() {

if(!isNaN(parseInt(options.reco.pageId))){
webArgo.startAR();
}else if(options.app.autoStart){
webArgo.startCam();
}
document.getElementById(“start”).style.display = “block”
}

//creates webArgo library
let webArgo = new ARGO.webArgo(options, onWebAppReady)

function brightness(canvas, target) {
canvas.className = target
}

function onVideoEvent(event) {
console.log(“onVideoEvent:” + event)
//document.getElementById(“debug”).innerHTML = event;
const argoDiv = document.getElementById(‘argo’);
switch (event.toString()) {
case “1”:
brightness(argoDiv, “dark”);
break;
case “2”:
brightness(argoDiv, “dark”);
break;
case “3”:
brightness(argoDiv, “light”);
break;
case “4”:
brightness(argoDiv, “dark”);
break;
}
}

function onNewSceneStatus(event) {
console.log(“onNewSceneStatus”)
console.log(event)
}

function onRecoEvent() {
var img = document.getElementById(“foundImage”);
let foundMarker = webArgo.getFoundMarker()
img.onload = function () {}
img.crossOrigin = “Anonymous”;
img.onerror = function () {
console.error(“ERROR LOAD MARKER IMG ! “)
webArgo.throwError(301)
};
let url = “notFound.png”
if (foundMarker != undefined && foundMarker.found) {
url = foundMarker.metaData.url
url = options.apis.apiMediaUrl + url;
}
img.src = url
}

function onTrackingEvent(event) {
console.log(“Tracking changed:” + event)
console.log(event.details)
}

function startWebapp() {
webArgo.checkCompatibility()
webArgo.subscribeTo(1, [0, 1, 2, 3, 4, 5, 6], onVideoEvent)
webArgo.subscribeTo(4, [5,6], onRecoEvent) //READY of RECO
}

function start() {
webArgo.startAR()
document.getElementById(“back”).style.display=”block”
document.getElementById(“bg”).style.display=”none”
}

function pause(){
let status=webArgo.getComponent(1).getStatus();
if(status==4){
webArgo.resumeVideo();
}
if(status==3){
webArgo.pauseVideo();
}
}

function gotoHome(){
const argoDiv = document.getElementById(‘argo’);
webArgo.stop()
document.getElementById(“back”).style.display=”none”
document.getElementById(“bg”).style.display=”block”
brightness(argoDiv, “dark”);
}

//starts the webapp
startWebapp()