Vue3 終于可以共享自己的屏幕給別人看了！
作者：林三心不學挖掘機
現代瀏覽器通過 ??MediaDevices?? 接口提供媒體設備訪問能力，其中 getDisplayMedia 方法專門用于獲取屏幕共享流。該方法會觸發用戶授權流程，成功后可獲得包含屏幕內容的媒體流對象。
一、實現原理與技術背景
1.1 瀏覽器媒體能力基礎
現代瀏覽器通過 MediaDevices 接口提供媒體設備訪問能力，其中 getDisplayMedia 方法專門用于獲取屏幕共享流。該方法會觸發用戶授權流程，成功后可獲得包含屏幕內容的媒體流對象。
1.2 響應式設計目標
我們需要實現以下核心功能：
- 響應式狀態管理： 實時反映屏幕共享狀態
- 自動資源回收： 組件卸載時自動釋放媒體資源
- 錯誤處理機制： 友好的錯誤提示與恢復能力
- 跨瀏覽器兼容： 統一API差異處理
二、核心實現步驟分解
2.1 響應式狀態容器
// 創建響應式狀態容器
import { ref, reactive } from 'vue';
const state = reactive({
stream: null, // 當前媒體流對象
isActive: false, // 是否正在共享
isSupported: !!navigator.mediaDevices?.getDisplayMedia, // 瀏覽器支持狀態
error: null // 錯誤信息
});2.2 屏幕捕獲核心邏輯
// 啟動屏幕共享
asyncfunction startCapture(options = { video: true, audio: false }) {
try {
// 請求屏幕共享權限
const stream = await navigator.mediaDevices.getDisplayMedia({
video: {
displaySurface: 'browser', // 捕獲瀏覽器標簽頁
logicalSurface: true, // 包含滾動區域
...options.video
},
audio: options.audio
});
// 更新響應式狀態
state.stream = stream;
state.isActive = true;
// 監聽停止事件（用戶點擊瀏覽器停止按鈕）
stream.getTracks().forEach(track => {
track.onended = () => stopCapture();
});
} catch (err) {
handleError(err);
}
}
// 停止屏幕共享
function stopCapture() {
state.stream?.getTracks().forEach(track => track.stop());
state.stream = null;
state.isActive = false;
}2.3 視頻元素綁定
// 自動綁定媒體流到video元素
export function useVideoBinding(videoRef) {
watch(() => state.stream, (newStream) => {
if (videoRef.value && newStream) {
videoRef.value.srcObject = newStream;
videoRef.value.play().catch(err => {
console.error('視頻播放失敗:', err);
});
}
});
}三、完整實現代碼示例
3.1 屏幕捕獲Composable
// screen-capture.js
import { ref, reactive, watch, onUnmounted } from'vue';
// 響應式狀態管理
const state = reactive({
stream: null,
isActive: false,
isSupported: checkSupport(),
error: null
});
// 瀏覽器支持檢測
function checkSupport() {
return !!(
navigator.mediaDevices &&
navigator.mediaDevices.getDisplayMedia &&
window.MediaStream
);
}
// 錯誤處理中心
function handleError(error) {
state.error = {
name: error.name,
message: error.message || '屏幕共享失敗',
details: error
};
console.error('屏幕共享錯誤:', error);
}
// 啟動屏幕共享
asyncfunction start(options = {}) {
if (!state.isSupported) {
thrownewError('當前瀏覽器不支持屏幕共享');
}
try {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: {
displaySurface: 'browser',
logicalSurface: true,
...(options.video || {})
},
audio: !!options.audio
});
// 初始化狀態
state.stream = stream;
state.isActive = true;
state.error = null;
// 自動停止監聽
stream.getTracks().forEach(track => {
track.onended = () => stop();
});
return stream;
} catch (error) {
handleError(error);
throw error;
}
}
// 停止共享
function stop() {
if (state.stream) {
state.stream.getTracks().forEach(track => track.stop());
state.stream = null;
state.isActive = false;
}
}
// 自動清理資源
onUnmounted(() => {
stop();
});
exportfunction useScreenCapture() {
return {
state,
start,
stop
};
}3.2 組件集成示例
<template>
<div class="screen-share">
<video ref="videoEl" autoplay muted playsinline />
<button @click="toggleShare" :disabled="!state.isSupported">
{{ state.isActive ? '停止共享' : '開始共享' }}
</button>
<div v-if="state.error" class="error">
{{ state.error.message }}
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from'vue';
import { useScreenCapture, useVideoBinding } from'./screen-capture';
const videoEl = ref(null);
const { state, start, stop } = useScreenCapture();
// 自動綁定視頻元素
useVideoBinding(videoEl);
const toggleShare = async () => {
if (state.isActive) {
stop();
} else {
try {
await start({
video: {
width: { ideal: 1920 },
frameRate: { ideal: 30 }
}
});
} catch (error) {
console.error('共享失敗:', error);
}
}
};
</script>責任編輯：武曉燕
來源：
前端之神
