关于webrtc:Chrome下使用WebRTC实现屏幕共享

概述

屏幕共享就是将本人电脑的屏幕内容以视频的形式分享给其他人观看，以进步沟通效率。屏幕共享作为一种实现互动的形式，经常出现在用户的生存场景中，比方:

• 视频会议中，屏幕共享能够将讲话者本地的文件、数据、网页、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 团队也会继续跟大家分享音视频方面有意思的技术问题，欢送大家斧正和交换。