# 使用 electron 屏幕或攝像頭錄制并保存到本地
## 獲取媒體源信息
1. 獲取攝像頭和麥克源信息
~~~javascript
navigator.mediaDevices.enumerateDevices()
.then(devices => devices.filter(d => d.kind === 'videoinput'))
.then(devices => console.log(devices) // devices 為攝像頭數組);
~~~
2. 獲取當前屏幕和應用窗口源信息
~~~javascript
desktopCapturer.getSources({ types: ['window', 'screen'] }, (error, sources) => {
if (error) throw error;
console.log(sources); // sources 當前屏幕和應用窗口的數組
});
~~~
## 使用 MediaRecorder 進行視頻錄制
首先根據選擇的錄制源是窗口還是攝像頭以不同的方式獲取視頻流。
1. 媒體源是攝像頭
~~~javascript
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. 媒體源是屏幕或窗口
~~~javascript
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 來獲取音頻，所以需要另外加入麥克風的音軌
~~~javascript
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() 函數初始化錄制
~~~javascript
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 文件
~~~javascript
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-vue打包不同平臺的安裝文件
- Electron+Vue開發跨平臺桌面應用
- electron-vue項目初始化process is not defined問題解決
- 出現 require is not defined 的問題
- Cannot read property 'app' of undefined
- electron-vue 隱藏頂部菜單 隱藏導航 、自定義導航
- electron程序顯示在右下角托盤
- electron與vue通信
- electron-vue修改任務欄圖標
- electron-vue文檔1
- 打包錯誤
- 使用 electron 屏幕或攝像頭錄制并保存到本地
- electron-vue創建報錯