Recording the screen with electron and utilizing the angularJS framework

I've been exploring the implementation of the electron recording method into my electron and angularJS desktop application.

Since I am using angularJS to maintain services, controllers, and views, I have a button in one of my views (HTML file) that is supposed to trigger screen recording from a function inside the controller. This function is called startRecord.

The complete code for the controller is as follows:

(function () {
    'use strict';
    var { desktopCapturer } = require('electron')

    angular
        .module('app')
        .controller('loggedScreen', Controller);

    Controller.$inject = ['$scope', 'recorderService'];

    function Controller($scope, recorderService) {

        function handleStream (stream) {
            console.log('success ? ');
            document.querySelector('video').src = URL.createObjectURL(stream)
        }

        function handleError (e) {
            console.log('error ? ');
            console.log(e)
        }

        $scope.startRecord = function () {
            desktopCapturer.getSources({types: ['window', 'screen']}, (error, sources) => {
                if (error) throw error;
                // record when window title is Electron
                // just record electron window
                for (let i = 0; i < sources.length; ++i) {
                    if (sources[i].name === 'Electron') {
                        // console log to check if it goes inside the loop and the if statement
                        console.log('started'); 
                        navigator.mediaDevices.getUserMedia({
                            audio: false,
                            video: {
                                mandatory: {
                                    chromeMediaSource: 'desktop',
                                    chromeMediaSourceId: sources[i].id,
                                    minWidth: 1280,
                                    maxWidth: 1280,
                                    minHeight: 720,
                                    maxHeight: 720
                                }
                            }
                        }, handleStream, handleError)
                        return
                    }
                }
            });
        };

    }

})();

When I click the button in the view to execute this function, nothing seems to happen. There are no 'success ?' or 'error ?' logs in the console, however, 'started' is logged indicating that it's inside the loop.

I'm unsure if the recording is actually taking place. No errors are appearing in the console. It seems like the recording starts but never ends, which may explain why the success or error callback logs don't show up.

Due to the limited information provided in the Electron documentation, I'm quite confused about how to proceed. Some questions that come to mind are:

  1. How can I confirm that the recording has actually started?
  2. What is the process for stopping the screen recording? The electron docs linked above do not mention this.
  3. Is there a way to save or upload the recorded movie to storage (such as Amazon S3)? The line
    document.querySelector('video').src = URL.createObjectURL(stream)
    in the handle stream function makes me wonder if it's uploading, but I'm uncertain.

If anyone knows of another reliable source of information regarding this recording process, please share it with me. I need more insights to effectively use it.

Answer №1

It appears that the usage of promises, as outlined in electron documentation, is not being implemented in your code.
According to the MDN reference for navigator.mediaDevices.getUserMedia, this function call should return a promise. Ensure that you incorporate promises into your code to address this issue.

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

The ConsoleCapture does not capture every console error for Sentry

Running into an issue capturing console errors with Sentry in a Next.js app. The problem arises from an error within a library that is inaccessible to us, specifically related to WebSocket "WebSocket is already in CLOSING or CLOSED state" This error is c ...

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

Getting the WebElement object by manually clicking an element while in an active WebDriver Session

I am currently developing a Java Swing application for managing object repositories in Selenium scripts. This application will launch a WebDriver instance and allow users to manually navigate to the desired element for inspection. My goal is to capture th ...

Animate css style using setTimeout: "in the blink of a moment"

I need help creating a bar (#innerBar) that decreases in width by 1% every second. Unfortunately, the loop I implemented is not working as expected. The bar goes from 100% to 0% almost instantaneously. function timer(){ var timer; for(i=100;i&g ...

Can Array Values from Different Functions be Merged?

After running my code, you will notice that when a user inputs the quantity for a room, selects check-in and check-out dates, and clicks submit, two tables are displayed. The first table shows the room name, the entered quantity, and the price based on the ...

Data table created with functional components is not refreshing when columns are added or removed, which are stored in the state as an array of objects

I’ve been working on setting up a datatable with a checkbox dropdown feature to add or remove columns from the table. Everything is functioning properly, except for one issue – the table is not refreshing unless I click on one of the header titles. At ...

Increasing numerical values within an array using JavaScript

My goal is to enhance the functionality of this visualization by being able to increase or decrease the nodes in the hidden layers. I have attempted to achieve this by adding the following code: I am facing difficulties in adjusting the number of hidden l ...

Javascript string manipulation operation

Is it possible to extract only the characters 'ABCD' from a string like 'ABCD150117T15' using JavaScript? I am interested in removing everything after 'ABCD' in this example, specifically excluding the first occurrence of a n ...

Interactive div containing elements that cannot be clicked

http://codepen.io/anon/pen/zxoYBN To demonstrate my issue, I created a small example where there is a link button within a div that toggles another div when clicked. However, I want the link button to not trigger the toggle event and be excluded from the ...

Passing parameters in a jQuery function through a button click

I am trying to figure out how to pass the @item.Id value as a parameter in the click function for a button. Here is the code snippet: <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#Ed ...

Issues with XMLHTTP readyState 3 updates in Webkit browsers

This query has resurfaced twice in these forums, yet the solution offered does not seem to be effective for my situation. The dilemma I am facing involves a JSP page that is delivering and pushing out small bits of data. Here is the code snippet I am usi ...

Is there a way to export static HTML from Next.js to different directories at once?

My Next.js website is static with 1 million pages, but I am facing an issue where all the exported pages are stored in the same folder, requiring a lot of RAM to access files. Is there a way to export pages into multiple folders, maybe grouping 100k pages ...

jQuery fails to locate class following AJAX reply

In my application, there is a cart feature where users can remove items from their cart, triggering a refresh of the contents using AJAX. However, I noticed that after removing an item from the cart, the response switches from asynchronous to synchronous m ...

Is extracting the title of an image from Flickr?

I have a JavaScript code that randomly pulls single images from Flickr every time the page is refreshed. Now, I want to add a feature where the title of the image is displayed when it's hovered over. However, I've been searching for a solution fo ...

Searching for an array of IDs in Mongoose

I have created an API using Express.js and mongoose to find users based on their ids in an array. // Here is the array of user ids const followedIds = follow.map((f) => f.followed); console.log(followedIds); // This will log [ '5ebaf673991fc60204 ...

Align the date input field to the center for better visual appeal

I am facing a challenge in centering the date in an input, not the entire input element inside a div. When I attempt to center it, the date gets positioned within a portion of the input due to a resizable right-hand side panel for selecting a date from a c ...

Properly relocating the node_modules folder: A step-by-step guide

I decided to relocate my node_modules folder to a different location. To do this, I deleted the original node_modules folder and moved the package.json file to the new desired location. After that, I executed the command npm install to install the node_mod ...

Personalizing data structure fields in sanity.io

In the Sanity Studio schema, I created an object type with one field that is dependent on another. If the "all" field is checked true, then the "date" field should be hidden or disabled. However, I am unsure of how to implement this. I have searched for e ...

Does ExpressJS always terminate with JSON by default?

I am currently utilizing expressjs to serve JSON data. Upon attempting to use res.end() with an object, I encounter the following error: TypeError: first argument must be a string, Array, or Buffer Is there a specific setting or middleware available tha ...

Drop down calendar in Javascript

I am in the process of developing a virtual JavaScript calendar dropdown feature. I aim to have the correct number of days displayed upon selecting a month, but currently, no days appear when I make a selection. Can someone please assist me with this iss ...