前端vue实现共享屏幕

最新推荐文章于 2025-11-16 12:58:37 发布

原创最新推荐文章于 2025-11-16 12:58:37 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

<template>
  <div>
    <button @click="but" ref="ping">共享屏幕</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const ping = ref(null)

const but = async () => {
  console.log(1);
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
  });



  const mime = MediaRecorder.isTypeSupported("video/webm;codecs=h264")
    ? "video/webm;codecs=h264"
    : "video/webm";

  const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

  const chunks = [];
  mediaRecorder.addEventListener("dataavailable", function (e) {
    chunks.push(e.data);
  });

  mediaRecorder.addEventListener("stop", () => {
    const blob = new Blob(chunks, { type: chunks[0].type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "video.webm";
    a.click();
  });
  mediaRecorder.start();
};
</script>

<style lang="scss" scoped></style>

效果