Electron+Vue实现截屏功能的两种方式

yarn add -D js-web-screen-shot

<template>
  <div class="screenWrapper">
    <h1>这里是截屏界面</h1>
    <button id="startButton" class="button" @click='showVideo'>开始截屏</button>
    <div class="imgWrapepr">
      <img :src='srcData' width="200px"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ScreenShot  from "js-web-screen-shot";
const srcData = ref()
const videoRef = ref()
const showVideo = () => {
  new ScreenShot ({
        enableWebRtc: false,  
        clickCutFullScreen: true,
        level: 9999,  //层级级别
        completeCallback: callbackSrc
    })
}
const callbackSrc = (data: any) => {
  srcData.value = data.base64
}
</script>
<style lang="less" scoped>
.screenWrapper {
  -webkit-app-region: no-drag;
  background-color: white;
  height: 100vh;
  width: 100vw;
  padding: 20px;
  h1 {
    color: green;
  }
  .imgWrapepr {
    border: 1px solid #ccc;
    width: 500px;
    height: 500px;
  }
}
.box-img{
  width: 200px;
  position: fixed;
  right: 10px;
  top: 10px;
  border: 2px solid red; 
}
</style>

    new ScreenShot ({
        enableWebRtc: true,   // 改成true
        clickCutFullScreen: true,
        level: 9999,  //层级级别
        completeCallback: callback
    })

const selfWindws = async () =>
  await Promise.all(
    webContents
      .getAllWebContents()
      .filter((item) => {
        const win = BrowserWindow.fromWebContents(item);
        return win && win.isVisible();
      })
      .map(async (item) => {
        const win = BrowserWindow.fromWebContents(item);
        const thumbnail = await win?.capturePage();
        // 当程序窗口打开DevTool的时候  也会计入
        return {
          name:
            win?.getTitle() + (item.devToolsWebContents === null ? "" : "-dev"), // 给dev窗口加上后缀
          id: win?.getMediaSourceId(),
          display_id: "",
          appIcon: null,
        };
      })
  );

// 获取指定id设备的视频流
export const getInitStream = async (
    source: { id: string },
    audio?: boolean
): Promise<MediaStream | null> =>{
    return new Promise((resolve, _reject) => {
    // 获取指定窗口的媒体流
    // 此处遵循的是webRTC的接口类型  暂时TS类型没有支持  只能断言成any
    (navigator.mediaDevices as any)
        .getUserMedia({
        audio: audio
            ? {
                mandatory: {
                    chromeMediaSource: "desktop",
                },
            }
            : false,
        video: {
            mandatory: {
                chromeMediaSource: "desktop",
                chromeMediaSourceId: source.id,
            },
        },
        })
        .then((stream: MediaStream) => {
            resolve(stream);
        })
        .catch((error: any) => {
        console.log(error);
            resolve(null);
        });
    });
}

getInitStream(id: string).then(res=> {
    new ScreenShot ({
       enableWebRtc: true,  
       creenFlow: res1!, // 传入屏幕流数据
       clickCutFullScreen: true,
       level: 9999,  //层级级别
       completeCallback: callback
    })
})
 

exec(path.join(__dirname, '..', '..', 'static', 'PrintScr.exe'))