【Vue3】实现屏幕共享惊艳亮相

在前端开发的世界里，每一次技术的突破都像是打开了一扇新的窗户，让人看到更广阔的风景。而今天，我们迎来一个令人振奋的消息：Vue3 终于可以支持屏幕共享功能了！这不仅意味着开发者可以更加灵活地构建实时协作、远程教学、在线会议等应用，也标志着 Vue 生态在多媒体能力上的进一步成熟。

一、实现原理与技术背景

要实现屏幕共享，首先需要了解浏览器提供的 MediaDevices API ，特别是其中的 getDisplayMedia 方法。这个方法允许网页请求用户的屏幕内容作为媒体流，是实现屏幕共享的核心。

在 Vue3 中，我们可以通过 Composition API （即 <script setup>）来封装这一功能，使代码结构清晰、逻辑可控。同时，我们也需要关注以下几点：

响应式状态管理：确保屏幕共享的状态能够被组件及时感知和更新。
资源自动回收：当组件卸载时，必须释放所有占用的媒体资源，避免内存泄漏。
错误处理机制：用户可能拒绝权限、浏览器不支持、网络异常等情况都需要妥善处理。
跨浏览器兼容性 ：虽然现代浏览器大多支持 getDisplayMedia，但仍然需要做兼容性判断和降级处理。

二、核心实现步骤分解

2.1 响应式状态容器

在 Vue3 中，我们可以使用 reactive 或 ref 来创建响应式对象。这里我们采用 reactive 来管理屏幕共享的全局状态：

js 复制代码

const state = reactive({
  stream: null,        // 当前媒体流对象
  isActive: false,     // 是否正在共享
  isSupported: !!navigator.mediaDevices?.getDisplayMedia, // 浏览器支持状态
  error: null          // 错误信息
});

通过这个状态对象，我们可以轻松地在模板中渲染出"开始/停止"按钮，并根据状态显示提示信息或错误信息。

2.2 屏幕捕获核心逻辑

接下来是实现启动和停止屏幕共享的关键函数：

js 复制代码

async function 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> 元素。我们可以使用 watch 监听 state.stream 的变化，并在变化时更新视频源：

js 复制代码

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

我们将上述逻辑封装成一个可复用的 Composable 函数，方便在多个组件中调用：

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);
}

async function start(options = {}) {
  if (!state.isSupported) {
    throw new Error('当前浏览器不支持屏幕共享');
  }

  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();
});

export function useScreenCapture() {
  return {
    state,
    start,
    stop
  };
}

3.2 组件集成示例

最后，我们在组件中使用这个 Composable：

vue 复制代码

<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>

结语

Vue3 不仅在性能和灵活性上有了巨大提升，在多媒体能力方面也逐渐完善。从最初的音频、视频播放，到现在支持屏幕共享，Vue 正在一步步走向更强大的全栈开发平台。

你有没有尝试过屏幕共享功能？或者你希望在 Vue3 中实现哪些新特性？欢迎在评论区分享你的想法！