MediaRecorder斑點在電子應用

文件我有了非常簡單的桌面捕捉功能的電子應用：MediaRecorder斑點在電子應用

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, {..部分之前，以下是塊的調試信息。

console.log(chunks)

那麼這裏的new Blob(chunks, {type: 'video/webm'})對象的調試信息。

console.log(ab)

我完全難倒。所有參考教程或其他我可以找到的答案基本上都遵循這個流程。我錯過了什麼？

電子版本：1.6.2

來源

2017-04-13 Andy Baird

這個問題從字面上今天剛定本身沒有我改變什麼。我不確定我的系統如何改變（除了重新啓動），但現在它的工作原理與它應該完全相同。

來源

2017-04-17 04:14:19

當我在這個頁面的代碼（ctrl + f）上搜索「chunks」時，看起來「stopRecording」方法使用塊作爲參數傳入。我會檢查塊是否有價值通過使用此解決方案：http://stackoverflow.com/questions/1181575/determine-whether-an-array-contains-a-value – Programmer

我有完全相同的代碼和完全相同的行爲問題，但它不想修復「本身」，請在這裏幫助：https://stackoverflow.com/questions/49208343/saving-desktopcapturer-to-video-file-from-electron-app – BT101

MediaRecorder斑點在電子應用

回答

相關問題