Electron+Vue實現截屏功能的兩種方式
更新時間：2024年10月23日 11:33:16 作者：海威
在Electron環(huán)境下,截屏功能相對強大,可以通過desktopCapturer獲取應用視頻流,實現對整個應用的截屏,而在非Electron環(huán)境下,截屏功能受限,只能截取瀏覽器內容,且存在iframe或base64圖片加載問題
本次介紹的截屏功能一共有兩種分別是在electron環(huán)境中與非electron環(huán)境中
非electron環(huán)境
這個環(huán)境下會有一些限制：
1.只能截瀏覽器中的畫面
2.如果里面有iframe或者base64的圖片會加載不出來（這個會有解決辦法）
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>但是會有第二種的限制，如果畫面有iframe 的話就不行了，就像這樣
這種情況下就得開啟webrtc模式，但是也不是所有的瀏覽器都支持，很操但
new ScreenShot ({
enableWebRtc: true, // 改成true
clickCutFullScreen: true,
level: 9999, //層級級別
completeCallback: callback
})electron環(huán)境
electron環(huán)境下之前的方法可以使用，但是弊端也有，不過可以從electron中獲取當前應用的視頻流信息，可以規(guī)避這個問題
第一步就是從主線程中調用desktopCapturer獲取當前應用的ID
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之后用js獲取視頻流
// 獲取指定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
})
})
如果你只是想要截瀏覽器內的內容，這個就滿足你的需求了!
但是如果你想做成跟微信QQ一樣能截應用外面的，就要使用第三方庫
這里就直接使用QQ封裝好的截圖工具（非常好用）
exec(path.join(__dirname, '..', '..', 'static', 'PrintScr.exe'))
稍后遺憾的是，人家封裝好的有別人的業(yè)務功能（轉發(fā)功能）
如果不想用人家封裝好的話就需要自己調用dll文件去做一遍，不過在electron中調用dll, 那就得安裝ffi ,那是非常難安依賴。
就這樣吧 資源在這了自己去拉吧
https://github.com/liangtongzhuo/electron_screenshot.git
到此這篇關于Electron+Vue實現兩種方式的截屏功能的文章就介紹到這了,更多相關Electron Vue截屏內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章介紹了axios的基本使用和封裝方法,包括設置接口請求前綴、請求頭和超時時間、封裝請求方法、添加請求和響應攔截器,封裝axios可以提高代碼質量和可維護性,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了Vue入門學習筆記,結合實例形式分析了vue.js的基本概念、對象、過濾器、指令等的相關原理與簡單使用方法,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue中的eventBus會不會產生內存泄漏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
解決Vue項目報錯Error:Cannot find module ‘webpack/li
解決Vue CLI版本沖突問題,確保本地package.json與全局@vue/cli版本一致,避免開發(fā)環(huán)境不一致導致的問題,分享個人解決步驟和版本管理心得,僅供參考2026-05-05
Vue 項目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的，而且在很多項目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下2023-08-08
下面小編就為大家分享一篇在vue項目中,使用axios跨域處理，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了如何在Vue中動態(tài)添加類名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要為大家詳細介紹了Vue項目之學生管理系統(tǒng)實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
el-table樹形表格中復選框聯(lián)動功能操作大全
本文介紹了如何在el-table樹形表格中實現復選框聯(lián)動功能,包括父級復選框控制子級復選框狀態(tài)以及子級復選框不可控制父級復選框狀態(tài)的功能,通過給表格數據添加標識并編寫相應的事件處理函數,實現了這一功能,感興趣的朋友跟隨小編一起看看吧2026-01-01
vue項目使用高德地圖的定位及關鍵字搜索功能的實例代碼(踩坑經驗)
這篇文章主要介紹了vue項目使用高德地圖的定位及關鍵字搜索功能的實例代碼，也是小編踩了無數坑總結出來的經驗,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03