Electron+Vue實現(xiàn)截屏功能的兩種方式
本次介紹的截屏功能一共有兩種分別是在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ī)避這個問題
第一步就是從主線程中調(diào)用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!, // 傳入屏幕流數(shù)據(jù)
clickCutFullScreen: true,
level: 9999, //層級級別
completeCallback: callback
})
})
如果你只是想要截瀏覽器內(nèi)的內(nèi)容，這個就滿足你的需求了!
但是如果你想做成跟微信QQ一樣能截應用外面的，就要使用第三方庫
這里就直接使用QQ封裝好的截圖工具（非常好用）
exec(path.join(__dirname, '..', '..', 'static', 'PrintScr.exe'))
稍后遺憾的是，人家封裝好的有別人的業(yè)務功能（轉(zhuǎn)發(fā)功能）
如果不想用人家封裝好的話就需要自己調(diào)用dll文件去做一遍，不過在electron中調(diào)用dll, 那就得安裝ffi ,那是非常難安依賴。
就這樣吧 資源在這了自己去拉吧
https://github.com/liangtongzhuo/electron_screenshot.git
到此這篇關于Electron+Vue實現(xiàn)兩種方式的截屏功能的文章就介紹到這了,更多相關Electron Vue截屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue.js 左側(cè)二級菜單顯示與隱藏切換的實例代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue中混入mixin的理解和應用，對vue感興趣的同學，可以參考下2021-05-05
今天小編就為大家分享一篇Vuejs+vue-router打包+Nginx配置的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
element UI 中的 el-tree 實現(xiàn) checkbox&n
在日常項目開發(fā)中，會經(jīng)常遇到，樹形結(jié)構(gòu)的查詢方式，為了快速方便開發(fā)，常常會使用到快捷的ui組件去快速搭樹形結(jié)構(gòu)，這里我用的是 element ui 中的 el-tree，對element UI 中的 el-tree 實現(xiàn) checkbox 單選框及 bus 傳遞參數(shù)的方法感興趣的朋友跟隨小編一起看看吧2022-09-09
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue3中實現(xiàn)文本顯示省略號和tooltips提示框的方式詳解
在?B?端業(yè)務中,我們經(jīng)常會遇到文本內(nèi)容超出容器區(qū)域需顯示省略號的需求,當鼠標移入文本時,會出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場景,接下來給大家介紹vue3中實現(xiàn)文本顯示省略號和tooltips提示框的方式,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
基于vue實現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實踐)
這篇文章主要介紹了基于vue實現(xiàn)網(wǎng)站前臺的權(quán)限管理(前后端分離實踐)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理，返回需要的結(jié)果。這篇文章主要給大家介紹vue 過濾器filter實例，感興趣的朋友跟隨腳本之家小編一起學習吧2018-03-03
基于vue-draggable 實現(xiàn)三級拖動排序效果
這篇文章主要介紹了基于vue-draggable 實現(xiàn)三級拖動排序效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01