Vue3 終於可以共享自己的屏幕給別人看了！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

一、實現原理與技術背景

1.1 瀏覽器媒體能力基礎

現代瀏覽器通過 MediaDevices 接口提供媒體設備訪問能力，其中 getDisplayMedia 方法專門用於獲取屏幕共享流。該方法會觸發用戶授權流程，成功後可獲得包含屏幕內容的媒體流對象。

1.2 響應式設計目標

我們需要實現以下核心功能：

二、核心實現步驟分解

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>

結語

我是林三心，一個待過小型 toG 型外包公司、大型外包公司、小公司、潛力型創業公司、大公司的作死型前端選手

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/vAljmQ8L5ybqlwy_9yGfhw

猜你喜歡