javascript - 使用 webRTC 获取屏幕列表并选择要在 Electron 中记录的屏幕

标签 javascript node.js electron webrtc chromium

现在我想做的是在 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/

相关文章:

javascript - WebStorm 中导入的路径别名

javascript - Three.js - 使用投影仪和射线选择顶点

javascript - Jasny 多文件上传与其他表单元素

javascript - 使用 GAS 在 Google 工作表选项卡之间附加数据

node.js - 如果 wolkenkit(或任何)事件源事件是非结构化的,会有问题吗?

html - ElectonJs base64 image src-无法加载资源

node.js - 从子进程到 API 的请求导致 ECONNRESET

javascript - 异步 node.js 代码(使用 Q)不写入标准错误

node.js - 在 NodeJS 中监听 createReadStream 上的 'data' 事件时,写入 createWriteStream 的文件被损坏

reactjs - Electron react 设置文件下载路径