vueuse useDisplayMedia

useDisplayMedia是VueUse库中的一个函数，它是对浏览器的mediaDevices.getDisplayMedia方法的封装。通过使用useDisplayMedia函数，我们可以更方便地进行屏幕共享操作。

下面是一个使用useDisplayMedia进行屏幕共享并录制视频的示例代码：

import { useDisplayMedia } from '@vueuse/core';

const startRecording = async () => {
  try {
    const stream = await useDisplayMedia();
    const mediaRecorder = new MediaRecorder(stream);

    const chunks = [];
    mediaRecorder.ondataavailable = (e) => {
      chunks.push(e.data);
    };

    mediaRecorder.onstop = () => {
      const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'recorded-video.webm';
      a.click();
      URL.revokeObjectURL(url);
    };

    mediaRecorder.start();

    // 录制一段时间后停止录制
    setTimeout(() => {
      mediaRecorder.stop();
    }, 5000);
  } catch (error) {
    console.error('Error starting screen recording:', error);
  }
};

startRecording();

上述代码中，我们首先使用useDisplayMedia函数获取屏幕共享的媒体流。然后，我们创建一个MediaRecorder对象来录制媒体流，并将录制的数据存储在chunks数组中。当录制停止时，我们将chunks数组中的数据合并为一个Blob对象，并通过创建一个下载链接来下载录制的视频文件。

你可以根据自己的需求对这个示例代码进行修改和扩展，以实现更多功能，比如添加音频录制、设置录制的视频格式等。