javascript - 使用 webRTC 获取屏幕列表并选择要在电子中记录的屏幕
问题描述
现在我想做的是在电子中创建一个屏幕录像机,我知道有一种方法(桌面捕获和 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,它的工作没问题,视频质量也比电子的好。现在我的问题是,当我首先在电子上使用这个时,我收到了这个错误
现在让我们来看看我们如何解决这个问题我的下一个问题是在浏览器中选择一个窗口它显示打开的屏幕是什么所以我们可以选择一个屏幕并按开始录制但是这个我们不能这样做我的意思是电子是有什么建议
解决方案
我不是 100% 确定,但可能是您没有以管理员身份运行您的项目以确保一切都可以正常运行?
推荐阅读
- android - 重新打开应用程序但服务仍在运行时会删除前台服务通知
- c# - 使用 refit 进行 api 调用后我需要做什么
- git - 本地 git repo 已损坏?所有文件都被识别为新文件并且拉取失败 - 无法锁定引用,引用已损坏
- woocommerce - 按特定产品 SKU 隐藏 woocommerce 产品
- javascript - 检测 Angular 中的资源加载
- github - Jenkins:需要安装哪个插件才能获得构建触发器选项“GitHub hook trigger for GITScm polling”
- html - 打字稿/角度中的对象可能为“空”
- php - Laravel Octane 缓存不持久
- salesforce - 在 Salesforce 中的 Apex 中捕获 LWC 中的异常
- python - Flask 在现有路由中显示 404 错误