zoukankan      html  css  js  c++  java
  • 客户端捕获屏幕实现屏幕共享

    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: {  1280, height: 720 } }, (err, sources) => {
          screenCapture.setScreenInfo({ id: sources[0].id })
          screenCapture.setCaptureArea({
            x: 0,
            y: 0,
             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={{
               320,
            }}
            controls
            autoPlay
          />
        </div>
      )
    }
  • 相关阅读:
    每日博客
    每日博客
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
    今日收获
  • 原文地址:https://www.cnblogs.com/chenbeibei520/p/11151750.html
Copyright © 2011-2022 走看看