vue实现屏幕共享
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>
