如何使用 electron 屏幕或攝像頭錄制並保存到本地

思路分析

1. 通過 electron desktopCapturer 和 navigator 獲取要進行錄制的媒體源信息；
2. 使用 MediaRecorder 對視頻流進行錄制；
3. 將 MediaRecorder 保存到本地文件。

獲取媒體源信息

1. 獲取攝像頭和麥克源信息

   navigator.mediaDevices.enumerateDevices()
     .then(devices => devices.filter(d => d.kind === 'videoinput'))
     .then(devices => console.log(devices) // devices 為攝像頭數組);
   

2. 獲取當前屏幕和應用窗口源信息

   desktopCapturer.getSources({ types: ['window', 'screen'] }, (error,  sources) => {
     if (error) throw error;
     console.log(sources); // sources 當前屏幕和應用窗口的數組
   });
   

使用 MediaRecorder 進行視頻錄制

首先根據選擇的錄制源是窗口還是攝像頭以不同的方式獲取視頻流。

1. 媒體源是攝像頭

   let deviceId = ''; // 所選擇的攝像頭 deviceId
   let stream = navigator.mediaDevices.enumerateDevices()
     .then(device => device.find(d => d.kind === 'videoinput' && d.deviceId === deviceId))
     .then(video => navigator.mediaDevices.getUserMedia({ video }));
   

2. 媒體源是屏幕或窗口

   let sourceId = ''; // 所選擇的屏幕或窗口 sourceId
   let stream = navigator.mediaDevices.getUserMedia({
     audio: false,
     video: {
       mandatory: {
         chromeMediaSource: 'desktop',
         chromeMediaSourceId: sourceId,
         maxWidth: window.screen.width,
         maxHeight: window.screen.height,
       },
     },
   });
   

3. 因為無法通過直接設置 audio: true 來獲取音頻，所以需要另外加入麥克風的音軌

   stream
     .then(Mediastream => {
       let audioTracks = await navigator.mediaDevices
         .getUserMedia({ audio: true, video: false })
         .then(mediaStream => mediaStream.getAudioTracks()[0]);
       stream.addTrack(audioTracks);
       createRecorder(stream); // createRecorder() 函數實現見下文
   })
   .catch(err => console.error('startRecord error', err));
   

將 MediaRecorder 保存至文件

1. createRecorder() 函數初始化錄制

   let recorder = null;
   
   function createRecorder(stream) {
     recorder = new MediaRecorder(stream);
     recorder.start();
     // 如果 start 沒設置 timeslice，ondataavailable 在 stop 時會觸發
     recorder.ondataavailable = event => {    
       let blob = new Blob([event.data], {
         type: 'video/mp4',
       });
       saveMedia(blob);
     };
     recorder.onerror = err => {
       console.error(err);
     };
   },
   

2. stopRecorder() 函數結束錄制並保存至本地 mp4 文件

   function stopRecord() {
     recorder.stop();
   }
   
   function saveMedia() {
     let reader = new FileReader();
     reader.onload = () => {
       let buffer = new Buffer(reader.result);
       fs.writeFile('test.mp4', buffer, {}, (err, res) => {
         if (err) return console.error(err);
       });
     };
     reader.onerror = err => console.error(err);
     reader.readAsArrayBuffer(blob);
   }
   

以上，就順利完成了使用 electron 錄制視頻功能，若有疑問可以加 qq (997494167) 進行交流。

Reference

1. https://www.electronjs.org/docs/api/desktop-capturer
2. https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
3. https://github.com/hokein/electron-screen-recorder