当前位置：首页 > VUE

vue实现屏幕共享

2026-01-11 23:19:34VUE

Vue 实现屏幕共享的方法

屏幕共享功能通常结合浏览器原生 API 和第三方库实现。以下是基于 Vue 的实现方案：

使用浏览器原生 API 捕获屏幕

通过 getDisplayMedia API 获取屏幕流并绑定到 video 元素：

// 在Vue组件方法中
async startScreenShare() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video: { displaySurface: "monitor" },
      audio: false
    });
    this.$refs.screenVideo.srcObject = stream;
    this.localStream = stream; // 保存流对象
  } catch (err) {
    console.error("屏幕共享失败:", err);
  }
}

模板部分需包含 video 元素：

<video ref="screenVideo" autoplay playsinline muted></video>
<button @click="startScreenShare">开始共享</button>

通过 WebRTC 传输屏幕流

配合 RTCPeerConnection 实现实时传输：

// 创建PeerConnection
const pc = new RTCPeerConnection(configuration);
this.localStream.getTracks().forEach(track => {
  pc.addTrack(track, this.localStream);
});

// 生成offer并发送信令
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// 此处需通过WebSocket等方式将offer发送给对端

使用第三方库简化流程

安装 peerjs 库：

npm install peerjs

在Vue中快速建立连接：

import Peer from 'peerjs';

const peer = new Peer();
peer.on('call', call => {
  call.answer(this.localStream);
});

// 发起屏幕共享
peer.call(remotePeerId, this.localStream);

注意事项

HTTPS 环境下才能使用屏幕共享API
需处理用户权限拒绝的情况
共享结束时调用 track.stop() 释放资源
移动端支持度较低，需测试目标平台兼容性

完整组件示例

<template>
  <div>
    <video ref="screenVideo" autoplay playsinline muted></video>
    <button @click="startShare">共享屏幕</button>
    <button @click="stopShare">停止共享</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localStream: null
    };
  },
  methods: {
    async startShare() {
      try {
        this.localStream = await navigator.mediaDevices.getDisplayMedia();
        this.$refs.screenVideo.srcObject = this.localStream;
      } catch (e) {
        alert(`共享错误: ${e.message}`);
      }
    },
    stopShare() {
      this.localStream?.getTracks().forEach(track => track.stop());
      this.localStream = null;
    }
  },
  beforeUnmount() {
    this.stopShare();
  }
};
</script>

vue实现屏幕共享