When trying to move MediaPipe Selfie Segmentation results to different Chrome tabs, they fail to activate

const videoEl = document.getElementsByClassName('input_video')[0];
selfSegObj = new SelfieSegmentation({locateFile: (file) => {
    return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
    }});
selfSegObj.setOptions({
    modelSelection: 1,
    selfieMode: false,
    effect: 'mask',
});

selfSegObj.onResults(selfieSegResults);

camObj = new Camera(videoEl, {
    onFrame: async () => {
    await selfSegObj.send({image: videoEl});
    },
    width: 1280,
    height: 720
});

camObj.start();


function selfieSegResults(results) {
    const canvasEl = document.getElementsByClassName('output_canvas')[0];
    var canvasContext = canvasEl.getContext('2d');
    canvasContext.clearRect(0, 0, canvasEl.width, canvasEl.height);
    canvasContext.save();
    canvasContext.drawImage(results.segmentationMask, 0, 0, canvasEl.width, canvasEl.height);
}

After switching tabs, the "selfieSegResults" callback function within the SelfieSegmentation object may not be triggered.

If you have any suggestions or alternative solutions to ensure that segmented image data can still be obtained even when changing Chrome tabs, please share your insights!

Answer №1

Self-segmentation may utilize requestAnimationFrame in its operation, a feature that functions solely within the active tab.

I encountered a similar issue when developing a background removal application using self-segmentation; every time I switched tabs, it would freeze on the final frame. This was remedied by implementing web workers into the system.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for attaching a jQuery click event to every anchor tag within each row of a table?

Displayed here is a grid (basic html table) showcasing users with the option to delete a specific user by clicking on the delete link. My typical approach involves: <% foreach (var user in Model.Users) {%> <tr > <td align="right"><% ...

Exploring the intersecting viewports in three.js

I'm attempting to create a camera (GUI camera) that renders above the scene camera. My idea was to make the GUI camera have a transparent background, allowing for visibility through it. However, it's not working as expected. Here is how I define ...

Tips for creating a simulated asynchronous queue with blocking functionality in JavaScript or TypeScript

How about this for a paradox: I'm looking to develop an asynchronous blocking queue in JavaScript/TypeScript (or any other language if Typescript is not feasible). Essentially, I want to create something similar to Java's BlockingQueue, but inste ...

Modifying the value of a property in one model will also result in the modification of the same

As a beginner with Vue, I am looking to allow users to add specific social media links to the page and customize properties like text. There are two objects in my data - models and defaults. The defaults object contains selectable options for social media ...

Tips for displaying content when clicking on the opener containing tables or div elements

This is a snippet of JavaScript code $(document).ready(function () { $(".show-content").hide(); $(".opener").click(function () { $(this).parent().next(".show-content").slideToggle(); return false; ...

Can we use classlist for adding or removing in Angular 2?

One of the features in my project is a directive that allows drag and drop functionality for elements. While dragging an element, I am applying classes to both the dragged element and the ones it's being dragged over. This is how I currently handle it ...

Is there a way to eliminate the # sign from hash data using jQuery?

Can anyone help me retrieve the hash value from the URL? var hash = window.location.hash; I am looking for a way to remove the "#" sign from the hash. Any suggestions? ...

Cursor hovers over button, positioned perfectly in the center

I am facing a challenge with implementing a hover function for a set of buttons on the screen. The goal is to display the mouse pointer at the center of the button upon hovering, rather than the actual position of the cursor being displayed. I have tried u ...

What is the best way to execute a function in Meteor while ensuring it responds reactively

There is a function in my code that handles gui-logic, and I want it to be executed every time a template is updated reactively in Meteor. I attempted to place the code within the Template.myTemplate.helpers section as shown below, but it caused everythin ...

Guide on retrieving data parameter on the receiving page from Ajax response call

I am working on dynamically opening a page using Ajax to avoid refreshing the browser. The page opens and runs scripts on the destination page, but before running the script, I need to retrieve parameters similar to request.querystring in JavaScript. Belo ...

What is the best way to transfer a list from aspx to javascript?

When populating a table by looping through a list, I aim to pass a row of data to my JavaScript code. If that's not an option, I'd like to pass the list and the ID number for the specific row. How can I achieve this? <%foreach(var item in Mod ...

Can one manipulate SVG programmatically?

Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered ...

Storing information using ajax and json technologies

I've inherited a project where I need to work on saving data to the database using an input. The function responsible for this (SaveData) is not functioning properly. Since I'm not very familiar with ajax and json, can someone please help me iden ...

Saving an array to a database in Concrete5

I have created a block where multiple names can be dynamically added. However, when I click save and return to edit the block, the newly added names are not visible. I suspect there is an issue with saving to the database. Can someone please assist me with ...

Exploring the world of 3D with wireframes and unique object materials

I need to retrieve the wireframe of an object that I have loaded using OBJMTLLoder. Below is the code snippet I am currently using: var loader = new THREE.OBJMTLLoader(); loader.load( 'obj/male02/male02.obj', 'obj/male02/mal ...

What methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

Video background mute feature malfunctioning

I've searched through numerous resources and reviewed various solutions for this issue, yet I still haven't been able to figure it out. Could someone please guide me on how to mute my youtube embedded video? P.s. I am a beginner when it comes to ...

Is it possible to utilize a controller within a different controller?

As I work on developing an application, I am faced with the challenge of using controller functions within another controller function. Is it possible to achieve this or not? Use-case: My goal is to verify in the User collection (using mongoDB) if a user ...

What is the best way to ensure that the bootstrap nav tab content fits perfectly on one line?

Check out this bootstrap navbar example You can see a screenshot here. <ul class="nav nav-tabs" style="display: inlne-block"> <li class="nav-item" style="text-align: center; display: inline;"> <div> <a class="nav ...

Automate your functions using Javascript!

Hello, I have written a code snippet that triggers an action on mouse click. Initially, I created a function that scrolls the screen to a specific element upon clicking another element: (function($) { $.fn.goTo = function() { $('html, bo ...