Hello Wix Community,
I’ve been working on a custom element approach that allows me to access the camera and microphone. However, I’ve encountered an issue where the external scripts do not load in sequence, which is causing some functionality problems.
Do you have any idea what might be causing this behavior?
Here’s a simplified version of the code I’m using to load the external scripts:
const loadExternalScripts = () => {
const scripts = [
“https://ecardify.io/js/videojs/video.min.js”,
“https://ecardify.io/js/videojs/record.min.js”,
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
];
const loadScript = (index) => {
if (index >= scripts.length) {
initializeEcardify(); // All scripts loaded, initialize Ecardify
return;
}
const scriptElement = document.createElement("script");
scriptElement.src = scripts[index];
scriptElement.onload = () => {
console.log("script"+index+ "loaded");
loadScript(index + 1); // Load the next script
};
scriptElement.onerror = () => {
console.error(`Failed to load script: ${scripts[index]}`);
};
document.body.appendChild(scriptElement);
};
loadScript(0); // Start loading scripts from the first one
};
const initializeEcardify = () => {
if (window.ecardify && typeof window.ecardify.init === “function”) {
window.ecardify.init({
subscription: “c1e3a3c1-4d11-446d-bb69-cd2b9c9fee43”,
recorderImpl: “videojs-record”,
action: “page”,
offerEncryption: false,
autoEngage: true,
submission: “final”
});
} else {
console.error(“Ecardify initialization failed: ecardify.init is not a function”);
}
};
class WixDefaultCustomElement extends HTMLElement {
constructor() {
super();
console.log(“Loading the code for Custom Element ‘wix-default-custom-element’. To debug this code, open wixDefaultCustomElement.js in Developer Tools.”);
}
connectedCallback() {
document.head.appendChild(createStyle()); // Append style to the head
this.appendChild(createTitle());
this.appendChild(createWrapper());
loadExternalScripts();
}
}
customElements.define(“ecardify-custom”, WixDefaultCustomElement);