现在我想做的是在 Electron 中创建一个屏幕录像机,我知道有一种方法(桌面捕获和 mediaRecorde),我也尝试过它们,我的问题是有时视频正在录制,有时它开始一半有时它不是事件播放,这是我的代码
const { desktopCapturer, remote } = require('electron');
const { fs } = require('fs');
const { dialog, Menu } = remote;
// Global state
let mediaRecorder; // MediaRecorder instance to capture footage
const recordedChunks = [];
// Buttons
const videoElement = document.querySelector('video');
const startBtn = document.getElementById('startBtn');
function startrecord(){
mediaRecorder.start();
}
const stopBtn = document.getElementById('stopBtn');
stopBtn.onclick = e => {
mediaRecorder.stop();
console.log("Record Stopping ")
};
const videoSelectBtn = document.getElementById('videoSelectBtn');
videoSelectBtn.onclick = getVideoSources;
getVideoSources()
// Get the available video sources
async function getVideoSources() {
const inputSources = await desktopCapturer.getSources({
types: ['window', 'screen']
});
inputSources.map(source => {
if(source.name==="IphoneScreen"){
selectSource(source)
}
})
}
// Change the videoSource window to record
async function selectSource(source) {
videoSelectBtn.innerText = source.name;
const constraints = {
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id
}
}
};
ipcRenderer.send("TEST",{info:"dsdas"})
// Create a Stream
const stream = await navigator.mediaDevices
.getUserMedia(constraints);
ipcRenderer.send("FOCUS",{info:"dsdas"})
// Preview the source in a video element
// videoElement.srcObject = stream;
// videoElement.play();
// Create the Media Recorder
const options = { mimeType: 'video/webm;codecs=h264'};
mediaRecorder = new MediaRecorder(stream, options);
// Register Event Handlers
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.onstop = handleStop;
mediaRecorder.onstart = function() {
console.log("Record Started")
}
startrecord()
// Updates the UI
}
// Captures all recorded chunks
function handleDataAvailable(e) {
console.log('video data available');
recordedChunks.push(e.data);
}
// Saves the video file on stop
async function handleStop(e) {
console.log(recordedChunks);
toArrayBuffer(new Blob(recordedChunks, {type: 'video/webm;codecs=h264'}), function(ab) {
console.log(ab);
var buffer = toBuffer(ab);
dialog.showSaveDialog({
buttonLabel: 'Save video',
defaultPath: `vid-${Date.now()}.webm`
}).then((res)=>{
console.log(res);
var file =res.filePath+".webm";
ipcRenderer.send("VIDEO",{path:file,buffer:buffer})
})
});
};
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.alloc(ab.byteLength);
let arr = new Uint8Array(ab);
for (let i = 0; i < arr.byteLength; i++) {
buffer[i] = arr[i];
}
return buffer;
}
经过一番挖掘,我发现了这个 WebRtc它的工作和视频质量也比 Electron 一号更好。现在我的问题是,当我首先在 Electron 上使用这个时,我收到了这个错误When i press start recording it's shows this
现在让我们来看看我们如何解决这个问题我的下一个问题是在浏览器中选择一个窗口它显示打开的屏幕是什么所以我们可以选择一个屏幕并按开始录制但是这个我们不能这样做我的意思是 Electron 是有什么建议
最佳答案
我不是 100% 确定,但可能是您没有以管理员身份运行您的项目以确保一切都可以正常运行?
关于javascript - 使用 webRTC 获取屏幕列表并选择要在 Electron 中记录的屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63193371/