1

基于电子 api和这个问题，我正在尝试将记录的用户屏幕保存到根应用程序文件夹的视频文件夹中的 .webm 文件。

实际上它几乎可以工作，因为它保存 .webm 文件但保存的文件是空的，它重 0B .. 我不知道我在这里缺少什么。

示例文件为 0 字节

所以看起来它以某种方式无法正确录制，因为文件是空的..

调试时编辑我发现记录可能正常工作，因为我控制台日志的 blob 在内部具有值，在toArrayBuffer我的 blob 内部不再具有值之后。

代码是：

(function () {
    'use strict';

    var fs = require('fs');
    var { desktopCapturer } = require('electron');
    var recorder, blobs = [];

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

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

    function Controller($scope) {

        var startRecord = function () {
            console.log('started');
            desktopCapturer.getSources({types: ['window', 'screen']}, function(error) {
                if (error) throw error;
                navigator.webkitGetUserMedia({
                    audio: false,
                    video: {
                        mandatory: {
                            chromeMediaSource: 'desktop',
                            minWidth: 1280,
                            maxWidth: 1280,
                            minHeight: 720,
                            maxHeight: 720
                        }
                    }
                }, handleStream, handleError);
                return;
            });
        };

        function handleError(err) {
            console.log('something went wrong but it shouldnt');
        }

        function handleStream(stream) {
            recorder = new MediaRecorder(stream);
            blobs = [];
            recorder.ondataavailable = function (event) {
                blobs.push(event.data);
            };
            recorder.start();
        }

        function toArrayBuffer(blob, cb) {
            var fileReader = new FileReader();
            fileReader.onload = function() {
                var arrayBuffer = this.result;
                cb(arrayBuffer);
            };
            fileReader.readAsArrayBuffer(blob);
        }

        function toBuffer(ab) {
            var buffer = new Buffer(ab.byteLength);
            var arr = new Uint8Array(ab);
            for (var i = 0; i < arr.byteLength; i++) {
                buffer[i] = arr[i];
            }
            return buffer;
        }

        function stopRecording() {
            recorder.stop();
            console.log(blobs); // 300k bytes
            toArrayBuffer(new Blob(blobs, {type: 'video/webm'}), function(ab) {
                console.log(ab); // 0 bytes
                var buffer = toBuffer(ab);
                var file = `./videos/example.webm`;
                fs.writeFile(file, buffer, function(err) {
                    if (err) {
                        console.error('Failed to save video ' + err);
                    } else {
                        console.log('Saved video: ' + file);
                    }
                });
            });
        }

        startRecord();
        setTimeout(function() {
            // stop recording after 7sec
            stopRecording();
        }, 7000);
    }
})();

startRecord()函数立即执行，它也console.log按预期在点击此控制器后启动。

stopRecording()函数在 7 秒后正确执行，console.log('Saved video: ' + file);就好了。

然后我转到我刚刚创建的视频文件夹，打开我保存的example.webm文件，它是空的。

它不会在控制台中打印任何错误。

  • 我consoled.log(blobs)在stopRecording()功能中停止记录器后，看看它是否真的是 Blob。
  • 我console.log(ab)在里面toArrayBuffer(new Blob(blobs, {type: 'video/webm'}), function(ab) {})回调。

安慰的东西截图

我的行为不blobs包含价值ab。

我自己真的无法解决，寻找答案我用最少的复制示例创建演示存储库，只需克隆它以查看您自己的行为

4

1 回答 1

4

您recorder.stop()将按如下方式运行：（来自 MediaRecorder 文档）

当调用 stop() 方法时，UA 将运行以下步骤的任务排队：

  1. 如果MediaRecorder.state是“非活动”，则引发 DOMInvalidState错误并终止这些步骤。如果MediaRecorder.state不是“非活动”，则继续下一步。
  2. 将 设置MediaRecorder.state为“非活动”并停止捕获媒体。
  3. 引发dataavailable包含已收集数据的 Blob 的事件。
  4. 引发stop事件。

在您的情况下，您不会等待stop事件，因此只有在您启动文件保存方法后dataavailable才会填写。blobs

您必须进行重组stopRecording以确保记录的数据可用。例如： 

function stopRecording () {
  const save = () => {
    ...
  }
  recorder.onstop = save
  recorder.stop()
}
于 2018-05-03T14:17:51.040 回答