屏幕共享怎么才能共享ppt(web技术分享｜WebRTC 实现屏幕共享)

前言

屏幕共享在工作中是非常实用的功能，比如开会时分享ppt，数据图表等，老师也可以分享自己的屏幕，实现线上教学，那么屏幕共享是如何实现的呢，今天就跟随笔者一起研究一下吧！

获取button元素

```javascript
const startButton = document.getElementById('startButton');
```

检测浏览器是否支持

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

```javascript
if ((navigator.mediaDevices && 'getDisplayMedia' in navigator.mediaDevices)) {
startButton.disabled = false;
} else {
errorMsg('不支持getDisplayMedia');
}
```

实现屏幕共享

getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里. 然后，这个媒体流可以通过使用 MediaStream Recording 被记录或者作为 WebRTC 会话的一部分被传输。

[参数] constraints 可选

一个可选的MediaStreamConstraints对象，它指定了返回的MediaStream的要求。因为getDisplayMedia()需要视频轨道，所以即使constraints对象没有明确请求视频轨道，返回的流也会有一个。

[返回值]

一个被解析为 MediaStream 的 Promise，其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。

```javascript
startButton.addEventListener('click', () => {
navigator.mediaDevices.getDisplayMedia({video: true})
.then(handleSuccess, handleError);
});
function handleSuccess(stream) {
startButton.disabled = true;
const video = document.querySelector('video');
video.srcObject = stream;
// 检测用户已停止共享屏幕
// 通过浏览器UI共享屏幕。
stream.getVideoTracks()[0].addEventListener('ended', () => {
errorMsg('用户已结束共享屏幕');
startButton.disabled = false;
});
}
function handleError(error) {
errorMsg(`getDisplayMedia error: ${error.name}`, error);
}
function errorMsg(msg, error) {
const errorElement = document.querySelector('#errorMsg');
errorElement.innerHTML += `
${msg}
`;
if (typeof error !== 'undefined') {
console.error(error);
}
}
```