概述
屏幕共享就是将自己电脑的屏幕内容以视频的方式分享给其他人观看，以提高沟通效率。屏幕共享作为一种实现互动的方式，经常出现在用户的生活场景中，比如:
- 视频会议中，屏幕共享可以将讲话者本地的文件、数据、网页、PPT 等画面分享给其他与会人。
- 在线课堂场景中，屏幕共享可以将老师的课件、笔记、讲课内容等画面展示给学生观看。
那么如何能够简单方便的实现屏幕共享呢?本篇文章将详细介绍如何在Chrome下使用WebRTC快速实现屏幕共享。
屏幕共享实现
屏幕共享大致可以分为屏幕流捕捉，流传输和屏幕流渲染。
- 屏幕流捕捉：可以使用Chrome提供的getDisplayMedia方法来捕获屏幕流，为流传输提供数据。
- 流传输：使用WebRTC来将数据传输给服务器或者另一个客户端，因WebRTC提供的低延迟和抗弱网等能力可以保证很好的用户体验，所以是一个非常合适的选择
- 屏幕流渲染：可以使用Canvas或者Video来渲染播放,本篇文章中使用Video元素来渲染播放。
一些准备
Windows 10系统
Chrome 93(注意本篇文章使用了Chrome提供的api来捕获屏幕流，此api需要Chrome 72及以上版本)
准备一个html文件，编写另个video标签，一个用来播放本地捕获的屏幕共享流，一个用来渲染播放远端传输过来的屏幕共享流
本地捕获的屏幕共享流
远端传输过来的屏幕共享流渲染
- 准备一个js文件用来编写屏幕共享的逻辑，并且在之前准备的html文件引入。
屏幕流捕获
捕获屏幕流可以使用navigator.mediaDevices.getDisplayMedia(displayMediaOptions)方法获取，此方法为异步方法，会将屏幕流包装成一个Promise对象，解析Promise后会返回一个MediaStream对象，我们可以从这个对象中取出视频或者音频Track进行流传输。
const srcVideo = document.getElementById('srcVideo');
const shareStreamVideo = document.getElementById('shareStreamVideo');
let srcStream;
let shareStream;
// 定义捕获流的参数
let displayMediaOptions = {
video: {
width: {max: 1280},
height: {max: 720},
frameRate: {ideal: 15}
}
};
navigator.mediaDevices.getDisplayMedia(option).then(stream => {
srcStream = stream;
srcVideo.srcObject = stream;
srcVideo.play();
// 传输流
call();
});`可以看到，捕获流的时候能够设置不同的参数来获取能够满足我们需要的流。这里我们设置捕获一个1280*720分辨率，15帧的屏幕流。
流传输与渲染
在我们进行流传输之前，先科普一个概念，针对屏幕共享流的传输，根据共享内容的不同，我们一般会分为两个模式：
清晰度优先 针对一些静态文件的分享，比如PTT，笔记和一些展示文本为主的场景下适用此种模式。此种模式可以保证在网络情况不好的情况下，依然不会降低分辨率，保证画面有一个比较好的清晰度。但与此同时可能会降低帧率，导致看起来比较卡顿。
流畅度优先 针对一些动态画面的分享，比如视频，动态网页等场景下适用于此模式。此种模式可以保证在网络情况不好的情况下，尽量保证共享画面不会出现中断和卡顿，帧率也不会降低。但同时可能降低码率和分辨率，导致画面的清晰度无法保证。
说到这里告诉大家一个好消息，WebRTC已经给我们提供了设置这两种传输模式的方式，那就是通过MediaStreamTrack的contentHint属性设置，我们来置一下
function setVideoTrackContentHints(stream, hint) {
const track = stream.getVideoTracks()[0];
if ('contentHint' in track) {
track.contentHint = hint;
if (track.contentHint !== hint) {
console.log('Invalid video track contentHint: \'' + hint + '\'');
}
} else {
console.log('MediaStreamTrack contentHint attribute not supported');
}
}
function call() {
// 克隆流
shareStream = srcStream.clone();
// "detail"设置清晰度优先（也可使用"text"）,如果需要设置流畅度优先，使用"motion"
setVideoTrackContentHints(shareStream, 'detail');
// 建立PeerConnection
establishPC(shareStreamVideo, shareStream);
}接下来我们创建PeerConnection，并且传输流。之后模拟接收流后去渲染。我们这里会创建两个PeerConnection来模拟两个客户端。
function establishPC(videoTag, stream) {
// 创建两个PeerConnection模拟两个客户端，pc1相当于本地，pc2相当于远端
const pc1 = new RTCPeerConnection(null);
const pc2 = new RTCPeerConnection(null);
pc1.onicecandidate = e => {
// 可以理解为通知pc2连接pc1的地址
onIceCandidate(pc1, pc2, e);
};
// 可以理解为通知pc1接pc2地址
pc2.onicecandidate = e => {
onIceCandidate(pc2, pc1, e);
};
// 将需要传输的流添加给PeerConnection
stream.getTracks().forEach(track => pc1.addTrack(track, stream));
// 设置offer和answer，可理解为通知两边另一边的编解码等媒体信息
pc1.createOffer(offerOptions)
.then(desc => {
pc1.setLocalDescription(desc)
.then(() => pc2.setRemoteDescription(desc))
.then(() => pc2.createAnswer())
.then(answerDesc => onCreateAnswerSuccess(pc1, pc2, answerDesc))
.catch(onSetSessionDescriptionError);
})
.catch(e => console.log('Failed to create session description: ' + e.toString()));
// 远端接收到流，交给video去播放
pc2.ontrack = event => {
if (videoTag.srcObject !== event.streams[0]) {
videoTag.srcObject = event.streams[0];
}
};
}
function onSetSessionDescriptionError(error) {
console.log('Failed to set session description: ' + error.toString());
}
function onCreateAnswerSuccess(pc1, pc2, desc) {
pc2.setLocalDescription(desc)
.then(() => pc1.setRemoteDescription(desc))
.catch(onSetSessionDescriptionError);
}
function onIceCandidate(pc, otherPc, event) {
otherPc.addIceCandidate(event.candidate);
}至此我们代码就写完了，来看看效果怎么样
选择需要共享的内容后,正常的共享了选择的内容
总结
至此我们就介绍完了如何简单的在Chrome上实现屏幕共享功能，但是在实际使用场景会更复杂，比如声音的共享，与android和ios端等其他类型终端实现屏幕共享，复杂网络下的网络穿透以及各端的兼容性处理。对于这些问题唐桥WebRTC 团队经过大量的开发测试，已经提供了一整套的解决方案，迎大家来了解使用。唐桥WebRTC 团队也会持续跟大家分享音视频方面有意思的技术问题，欢迎大家指正和交流。