How to set default virtual background?

[achoa21]

Hi,

Currently I need to customize some features in jitsi.
I'm not sure where to modify inside the code to set/load virtual background by default whenever a new room is created.

Any suggestion?

Thanks

[deleolajide]

Any suggestion?

My approach is to do any new features of customization from https://github.com/igniterealtime/openfire-pade-plugin/blob/master/src/webapp/custom_ofmeet.js.

Sometimes, this requires hacks to Jitsi code and that is done in https://github.com/igniterealtime/openfire-pade-plugin/blob/master/src/webapp/libs/lib-jitsi-meet.min.js and https://github.com/igniterealtime/openfire-pade-plugin/blob/master/src/webapp/libs/app.bundle.min.js

[achoa21]

Any suggestion?

My approach is to do any new features of customization from https://github.com/igniterealtime/openfire-pade-plugin/blob/master/src/webapp/custom_ofmeet.js.

Sometimes, this requires hacks to Jitsi code and that is done in https://github.com/igniterealtime/openfire-pade-plugin/blob/master/src/webapp/libs/lib-jitsi-meet.min.js and https://github.com/igniterealtime/openfire-pade-plugin/blob/master/src/webapp/libs/app.bundle.min.js

Thanks for reply.

I've reviewed the code in app.bundle.min.js and inspect the code on browser. I found that the virtual-background is stored in the local storage. How do I intercept the first load when room is created? I can't find the first function to be called when room is created. I plan to create the image blob and store it in local storage on the first load. Can you give some guides?

[deleolajide]

How do I intercept the first load when room is created? I can't find the first function to be called when room is created.

openfire-pade-plugin/src/webapp/custom_ofmeet.js

Line 338 in e2e56f6

function setup() {

[achoa21]

How do I intercept the first load when room is created? I can't find the first function to be called when room is created.

openfire-pade-plugin/src/webapp/custom_ofmeet.js

Line 338 in e2e56f6

function setup() {

I've place the code inside the setup() to insert the virtual-background information into the local storage but it's not working. The background not changed at all. The info I put into the local storage, will be overwritten on first load, after I refresh the page, then the info will be inserted into the local storage but the background did not change. This was tested on chrome however in mozilla, the code not working at all and even the local storage remain empty for "virtual-background". Did I missed something?

function setup() {
.......
 let dataUrl;
        (async function () {
            let blob = await fetch(window.location.origin + "/ofmeet/images/virtual-background/background-7.jpg").then(r => r.blob());
            dataUrl = await new Promise(resolve => {
                let reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.readAsDataURL(blob);
            });
            window.localStorage.setItem("virtualBackgrounds", "[]");
            window.localStorage.setItem("features/virtual-background", "{\"backgroundEffectEnabled\":true, \"backgroundType\": \"image\", \"selectedThumbnail\":\"7\",\"virtualSource\":\"" + dataUrl + "\"}");
        })();

}