客户端捕获屏幕实现屏幕共享

import React, { useRef, useEffect } from 'react'
import { desktopCapturer } from 'electron'

import ScreenCapture from '~/shared/webrtc/ScreenCapture'

const screenCapture = new ScreenCapture()
window.screenCapture = screenCapture

export default function TestScreenCapture() {
  const videoElemRef = useRef(null)

  useEffect(() => {
    desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: 1280, height: 720 } }, (err, sources) => {
      screenCapture.setScreenInfo({ id: sources[0].id })
      screenCapture.setCaptureArea({
        x: 0,
        y: 0,
        width: 640,
        height: 360,
      })
      screenCapture.start().then(() => {
        videoElemRef.current.onloadedmetadata = () => videoElemRef.current.play()
        videoElemRef.current.srcObject = screenCapture.outputStream
      })
    })

    return () => {
      screenCapture.stop()
    }
  })

  return (
    <div className="test-screen-capture-component-wrap">
      <video
        ref={videoElemRef}
        style={{
          width: 320,
        }}
        controls
        autoPlay
      />
    </div>
  )
}