0

提前谢谢了。

我正在使用 Electron (v9.1) 和 React (MacOS Big Sur) 构建屏幕捕获应用程序。

CaptureWindowParams应用程序打开一个新的浏览器窗口，该窗口使用 BrowserWindow.on 事件侦听器成功更新主进程 () 中的“screenParameters”对象。

（我还在主进程中使用了屏幕模块来识别活动屏幕并更新CaptureWindowParams工作正常。）

CaptureWindowsParams 对象也通过 IPC 从主进程成功接收。

我正在努力解决的具体问题是，在使用 MediaRecorder 录制后，我无法将 videoURL 发送到主进程。（我想将 URL 中继到另一个组件进行显示。）


import { ipcRenderer } from "electron";
import React, {useState} from "react";

function ImageCapturer(props) {

  const [videoObj, setVideoObj] = useState({})
  
  
  const sendVideoURL = () => {
    ipcRenderer.send("capturer:videoURL", videoObj)
  };

  ipcRenderer.once("main_process:captured_window_params", async (captureWindowParams) => {

    try {

      // Get screens
      let screens = await desktopCapturer.getSources({ types: ["screen"] })
      
      // create video stream

      for (screen in screens) {
          
          if (Number(screens[screen].display_id) === captureWindowParams.active_screen_id) {
            try { 
              
              const stream = await navigator.mediaDevices.getUserMedia({
                audio: false,
                video: {
                  mandatory: {
                    chromeMediaSource: "desktop",
                    chromeMediaSourceId: screens[screen].id,
                    minWidth: captureWindowParams.active_screen_width,
                    minHeight: captureWindowParams.active_screen_height,
                  },
                },
              });
              
              let chunks = []
              

              // create Media Recorder
              let mediaRecorder = await new MediaRecorder(stream);
              
              console.log(mediaRecorder.state)

              mediaRecorder.start()
              console.log(mediaRecorder.state)

              mediaRecorder.ondataavailable = (event) => {
                chunks.push(event.data)
              }

              setTimeout(() => {
                mediaRecorder.stop()
                console.log(mediaRecorder.state)
                }, 3000)

            
               mediaRecorder.onstop = (event) => {
                  let blob = new Blob(chunks, {type: 'video/mp4'})
                  let videoURL = window.URL.createObjectURL(blob)
                  setVideoObj({video_url: videoURL})
                  
                  console.log(videoObj.video_url)
                  // console.log(VideoURL) - works properly
                  } 
                    
            } catch (error) {
              console.log(error)
            }
          }
      }
        } catch (error) {
          console.log(error)
        }
  })


  return (
    <div className="image-capturer">
      <div className="capturer-buttons">
        <button onClick={sendVideoURL}>Capture Video</button>
        <button
          onClick={() => {
            window.close();
          }}
        >
          Close Window
        </button>
      </div>
    </div>
  );
}

export default ImageCapturer;

videoURL 在录制后按预期生成（如 MediaRecorder 状态的 console.log 和 videoURL 所示），但是，每当我尝试更新状态或将 videoURL 发送到主进程（通过 IPC）时，对象是undefined

我试图创建一个全局变量并在mediaRecorder.onstop()函数内更新，但这也会导致相同的未定义值。

问：我做错了什么/错过了什么？这只是范围的问题吗？

任何帮助，将不胜感激。谢谢。

4

0 回答 0