0


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

本次介绍的截屏功能一共有两种分别是在electron环境中与非electron环境中

非electron环境

这个环境下会有一些限制:

1.只能截浏览器中的画面

2.如果里面有iframe或者base64的图片会加载不出来(这个会有解决办法)

  1. yarn add -D js-web-screen-shot

使用的话也非常简单,直接上代码了

  1. <template>
  2. <div class="screenWrapper">
  3. <h1>这里是截屏界面</h1>
  4. <button id="startButton" class="button" @click='showVideo'>开始截屏</button>
  5. <div class="imgWrapepr">
  6. <img :src='srcData' width="200px"/>
  7. </div>
  8. </div>
  9. </template>
  10. <script setup lang="ts">
  11. import { ref } from 'vue'
  12. import ScreenShot from "js-web-screen-shot";
  13. const srcData = ref()
  14. const videoRef = ref()
  15. const showVideo = () => {
  16. new ScreenShot ({
  17. enableWebRtc: false,
  18. clickCutFullScreen: true,
  19. level: 9999, //层级级别
  20. completeCallback: callbackSrc
  21. })
  22. }
  23. const callbackSrc = (data: any) => {
  24. srcData.value = data.base64
  25. }
  26. </script>
  27. <style lang="less" scoped>
  28. .screenWrapper {
  29. -webkit-app-region: no-drag;
  30. background-color: white;
  31. height: 100vh;
  32. width: 100vw;
  33. padding: 20px;
  34. h1 {
  35. color: green;
  36. }
  37. .imgWrapepr {
  38. border: 1px solid #ccc;
  39. width: 500px;
  40. height: 500px;
  41. }
  42. }
  43. .box-img{
  44. width: 200px;
  45. position: fixed;
  46. right: 10px;
  47. top: 10px;
  48. border: 2px solid red;
  49. }
  50. </style>

但是会有第二种的限制,如果画面有iframe 的话就不行了,就像这样

这种情况下就得开启webrtc模式,但是也不是所有的浏览器都支持,很操但

  1. new ScreenShot ({
  2. enableWebRtc: true, // 改成true
  3. clickCutFullScreen: true,
  4. level: 9999, //层级级别
  5. completeCallback: callback
  6. })

electron环境

electron环境下之前的方法可以使用,但是弊端也有,不过可以从electron中获取当前应用的视频流信息,可以规避这个问题

第一步就是从主线程中调用desktopCapturer获取当前应用的ID

  1. const selfWindws = async () =>
  2. await Promise.all(
  3. webContents
  4. .getAllWebContents()
  5. .filter((item) => {
  6. const win = BrowserWindow.fromWebContents(item);
  7. return win && win.isVisible();
  8. })
  9. .map(async (item) => {
  10. const win = BrowserWindow.fromWebContents(item);
  11. const thumbnail = await win?.capturePage();
  12. // 当程序窗口打开DevTool的时候 也会计入
  13. return {
  14. name:
  15. win?.getTitle() + (item.devToolsWebContents === null ? "" : "-dev"), // 给dev窗口加上后缀
  16. id: win?.getMediaSourceId(),
  17. display_id: "",
  18. appIcon: null,
  19. };
  20. })
  21. );

拿到ID之后用js获取视频流

  1. // 获取指定id设备的视频流
  2. export const getInitStream = async (
  3. source: { id: string },
  4. audio?: boolean
  5. ): Promise<MediaStream | null> =>{
  6. return new Promise((resolve, _reject) => {
  7. // 获取指定窗口的媒体流
  8. // 此处遵循的是webRTC的接口类型 暂时TS类型没有支持 只能断言成any
  9. (navigator.mediaDevices as any)
  10. .getUserMedia({
  11. audio: audio
  12. ? {
  13. mandatory: {
  14. chromeMediaSource: "desktop",
  15. },
  16. }
  17. : false,
  18. video: {
  19. mandatory: {
  20. chromeMediaSource: "desktop",
  21. chromeMediaSourceId: source.id,
  22. },
  23. },
  24. })
  25. .then((stream: MediaStream) => {
  26. resolve(stream);
  27. })
  28. .catch((error: any) => {
  29. console.log(error);
  30. resolve(null);
  31. });
  32. });
  33. }

然后把视频流直接怼到这个截屏组件上

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

如果你只是想要截浏览器内的内容,这个就满足你的需求了!

但是如果你想做成跟微信QQ一样能截应用外面的,就要使用第三方库

这里就直接使用QQ封装好的截图工具(非常好用)

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

稍后遗憾的是,人家封装好的有别人的业务功能(转发功能)

如果不想用人家封装好的话就需要自己调用dll文件去做一遍,不过在electron中调用dll, 那就得安装ffi ,那是非常难安依赖。

就这样吧 资源在这了自己去拉吧

https://github.com/liangtongzhuo/electron_screenshot.git


本文转载自: https://blog.csdn.net/qq_39620552/article/details/142992639
版权归原作者 海威的技术博客 所有, 如有侵权,请联系我们删除。

“Electron+Vue实现两种方式的截屏功能”的评论:

还没有评论