我有一个电子应用程序，它具有非常简单的桌面捕捉功能：
const {desktopCapturer} = require('electron') const fs = require('fs'); var recorder; var chunks = []; var WINDOW_TITLE = "App Title"; function startRecording() { desktopCapturer.getSources({ types: ['window', 'screen'] }, function(error, sources) { if (error) throw error; for (let i = 0; i < sources.length; i++) { let src = sources[i]; if (src.name === WINDOW_TITLE) { navigator.webkitGetUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: src.id, minWidth: 800, maxWidth: 1280, minHeight: 600, maxHeight: 720 } } }, handleStream, handleUserMediaError); return; } } }); } function handleStream(stream) { recorder = new MediaRecorder(stream); chunks = []; recorder.ondataavailable = function(event) { chunks.push(event.data); }; recorder.start(); } function stopRecording() { recorder.stop(); toArrayBuffer(new Blob(chunks, {type: 'video/webm'}), function(ab) { var buffer = toBuffer(ab); var file = `./test.webm`; fs.writeFile(file, buffer, function(err) { if (err) { console.error('Failed to save video ' + err); } else { console.log('Saved video: ' + file); } }); }); } function handleUserMediaError(e) { console.error('handleUserMediaError', e); } function toArrayBuffer(blob, cb) { let fileReader = new FileReader(); fileReader.onload = function() { let arrayBuffer = this.result; cb(arrayBuffer); }; fileReader.readAsArrayBuffer(blob); } function toBuffer(ab) { let buffer = new Buffer(ab.byteLength); let arr = new Uint8Array(ab); for (let i = 0; i < arr.byteLength; i++) { buffer[i] = arr[i]; } return buffer; } // Record for 3.5 seconds and save to disk startRecording(); setTimeout(function() { stopRecording() }, 3500);我知道要保存MediaRecorder blob资源，我需要将它读入ArrayBuffer，然后将其复制到正常的缓冲区中以便保存文件。
但是，这似乎对我来说是失败的是将大块的斑点结合成斑点。 当这些块被添加到一个Blob中时 - 就像它们刚刚消失一样。 新的Blob是空的，而且之后复制的其他数据结构也是完全空的。
在创建Blob之前，我知道在块数组中有有效的Blob。
在执行new Blob(chunks, {..之前，以下是块的调试信息new Blob(chunks, {..部分。
console.log(chunks)
然后，这里是new Blob(chunks, {type: 'video/webm'})的调试信息new Blob(chunks, {type: 'video/webm'})对象。
console.log(ab)
我完全被难住了。 所有参考教程或其他我可以找到的答案基本上都遵循这个流程。 我错过了什么？
电子版本：1.6.2
I have an electron app that has very simple desktop capturing functionality:
const {desktopCapturer} = require('electron') const fs = require('fs'); var recorder; var chunks = []; var WINDOW_TITLE = "App Title"; function startRecording() { desktopCapturer.getSources({ types: ['window', 'screen'] }, function(error, sources) { if (error) throw error; for (let i = 0; i < sources.length; i++) { let src = sources[i]; if (src.name === WINDOW_TITLE) { navigator.webkitGetUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: src.id, minWidth: 800, maxWidth: 1280, minHeight: 600, maxHeight: 720 } } }, handleStream, handleUserMediaError); return; } } }); } function handleStream(stream) { recorder = new MediaRecorder(stream); chunks = []; recorder.ondataavailable = function(event) { chunks.push(event.data); }; recorder.start(); } function stopRecording() { recorder.stop(); toArrayBuffer(new Blob(chunks, {type: 'video/webm'}), function(ab) { var buffer = toBuffer(ab); var file = `./test.webm`; fs.writeFile(file, buffer, function(err) { if (err) { console.error('Failed to save video ' + err); } else { console.log('Saved video: ' + file); } }); }); } function handleUserMediaError(e) { console.error('handleUserMediaError', e); } function toArrayBuffer(blob, cb) { let fileReader = new FileReader(); fileReader.onload = function() { let arrayBuffer = this.result; cb(arrayBuffer); }; fileReader.readAsArrayBuffer(blob); } function toBuffer(ab) { let buffer = new Buffer(ab.byteLength); let arr = new Uint8Array(ab); for (let i = 0; i < arr.byteLength; i++) { buffer[i] = arr[i]; } return buffer; } // Record for 3.5 seconds and save to disk startRecording(); setTimeout(function() { stopRecording() }, 3500);I know that to save the MediaRecorder blob sources, I need to read it into an ArrayBuffer, then copy that into a normal Buffer for the file to be saved.
However, where this seems to be failing for me is combining the chunk of blobs into blobs. When the chunks are added into a single Blob - it's like they just disappear. The new Blob is empty, and every other data structure they are copied into afterwards also is completely empty.
Before creating the Blob, I know I have valid Blob's in the chunks array.
Here's what the debug info of chunks is, before executing the new Blob(chunks, {.. part.
console.log(chunks)Then here's the debug info of the new Blob(chunks, {type: 'video/webm'}) object.
console.log(ab)I'm completely stumped. All the reference tutorials or other SO answers I can find basically follow this flow. What am I missing?
Electron version: 1.6.2
最满意答案
这个问题从字面上直接解决了今天没有我改变任何东西。 我不确定我的系统如何改变（除了重新启动），但现在它的工作原理与它应该完全相同。
This problem literally just fixed itself today without me changing anything. I'm not sure what about my system changed (other than a reboot) but it's now working exactly as it should.
更多推荐
发布评论