使用 angularJS 框架在电子中进行屏幕录制

Question

我正在尝试在我的电子 + anuglarJS 桌面应用程序中实现 electron recording method。

我正在使用 angularJS，所以我使用服务/控制器/视图来维护应用程序。在一个视图（html 文件）中，我有一个按钮，它应该从控制器中的功能开始录制屏幕。这个函数被命名为startRecord。

控制器的完整代码是：

(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 go inside loop and if statemant
                        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
                    }
                }
            });
        };

    }

})();

我在视图中单击按钮时执行此功能。按钮点击后什么都没有发生。它不会 console.log 这个字符串 'success ?'或“错误？”来自成功和错误回调。但是它 console.log string 'started' 所以它在循环内。

我什至不知道它是否真的在录音。控制台没有错误。我认为录制开始但永远不会结束，这就是为什么我没有 console.log 来自成功或错误回调的原因。

电子文档非常薄弱，这就是为什么我对此感到非常困惑。我很想知道：

1. 如何检测实际开始的录制？
2. 停止录屏的方法是什么？我在问题顶部链接的电子文档中找不到此信息。
3. 如何将录制的电影保存或/和上传到某个存储（可能是亚马逊 S3 或某些内置选项），我在句柄流中看到这个 document.querySelector('video').src = URL.createObjectURL(stream)，在文档中，也许它正在像我想要的那样上传到某个存储，是吗？

也许你们知道有关此录音的其他信息来源？我需要更多信息才能使用它。

Answer 1

似乎您没有像在电子文档中那样使用承诺。
navigator.mediaDevices.getUserMedia 的 MDN 参考声明此调用返回一个承诺。 这就是您的代码中缺少的内容。