概述
屏幕共享就是将本人电脑的屏幕内容以视频的形式分享给其他人观看，以进步沟通效率。屏幕共享作为一种实现互动的形式，经常出现在用户的生存场景中，比方:
- 视频会议中，屏幕共享能够将讲话者本地的文件、数据、网页、PPT 等画面分享给其余与会人。
- 在线课堂场景中，屏幕共享能够将老师的课件、笔记、讲课内容等画面展现给学生观看。
那么如何可能简略不便的实现屏幕共享呢?本篇文章将具体介绍如何在Chrome下应用WebRTC疾速实现屏幕共享。
屏幕共享实现
屏幕共享大抵能够分为屏幕流捕获，流传输和屏幕流渲染。
- 屏幕流捕获：能够应用Chrome提供的getDisplayMedia办法来捕捉屏幕流，为流传输提供数据。
- 流传输：应用WebRTC来将数据传输给服务器或者另一个客户端，因WebRTC提供的低提早和抗弱网等能力能够保障很好的用户体验，所以是一个十分适合的抉择
- 屏幕流渲染：能够应用Canvas或者Video来渲染播放,本篇文章中应用Video元素来渲染播放。
一些筹备
Windows 10零碎
Chrome 93(留神本篇文章应用了Chrome提供的api来捕捉屏幕流，此api须要Chrome 72及以上版本)
筹备一个html文件，编写另个video标签，一个用来播放本地捕捉的屏幕共享流，一个用来渲染播放远端传输过去的屏幕共享流
<div id="videos">
<div class="video-container"> <h2>本地捕捉的屏幕共享流</h2> <video id="srcVideo" playsinline controls muted loop class="srcVideo"> </video></div><div class="video-container"> <h2>远端传输过去的屏幕共享流渲染</h2> <video id="shareStreamVideo" playsinline autoplay muted class="shareStreamVideo"></video></div></div>
- 筹备一个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 团队也会继续跟大家分享音视频方面有意思的技术问题，欢送大家斧正和交换。