在 Vue.js 应用中使用 WebRTC 实现屏幕共享
WebRTC 是一项能够实现视频、音频及数据共享的技术标准。在现实生活中，很多应用场景需要实现屏幕共享，比如远程协助、在线教学、视频会议等。本文将详细介绍在 Vue.js 应用中如何使用 WebRTC 实现屏幕共享，并提供相应示例代码和指导意义。
一、什么是 WebRTC？
WebRTC 是一项实时通信技术，并且是一项标准化技术。WebRTC 可以在不安装额外软件或插件的前提下，直接在浏览器之间进行信息交换，如音视频、数据共享等。 WebRTC 也支持了许多应用场景，比如，远程协助、在线教学、视频会议等。WebRTC 包含了三个主要部分：MediaStream、RTCPeerConnection 和 RTCDataChannel。其中，MediaStream 是浏览器要发布或接收的媒体数据（如音视频），RTCPeerConnection 是浏览器之间的通信部分，而 RTCDataChannel 則可以經由 RTCPeerConnection 建立一個中繼連接，去進行傳遞任意數據。
二、如何使用 WebRTC 实现屏幕共享？
对于 WebRTC 屏幕共享的实现，主要分成以下两个步骤：
- 捕获屏幕并获取流信息
在 JavaScript 中，可以使用 navigator.mediaDevices.getDisplayMedia() 获取屏幕流，支持 Chromium-based 和 Firefox 等浏览器，但是不支持 Safari 和 Internet Explorer。其中，getDisplayMedia 参数包含一个对象，可以设置获取媒体的参数（如屏幕、窗口大小等）。
示例代码：
async function getDisplayStream () {
return await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false
})
}- 传递流信息并在其他浏览器中观看
使用 RTCPeerConnection 将流信息进行传递。传递信息之前，需要先建立起一个 RTCPeerConnection 对象，之后再通过它将流信息传递给它的远程 peer 连接。因为 WebRTC 的 P2P (点对点) 传输，所以我们需要通过 Signaling Server 去进行建立信令传输，完成各端的信息传递。
示例代码：
-- -------------------- ---- -------
----- -------- ---------------- -- -
----- ------ - ----- ------------------
----- ---------- - --- -------------------
----------------------------
----------------------------------- -- -
-------------------------------------
------------------ ----- ----------
-- ------------------
-- ------------------------------------- ------------
--
------------------ - --- -- -
--------------- ------- -------------
-
-三、总结
本文介绍了如何使用 WebRTC 实现屏幕共享的方法，主要包括捕获屏幕并获取流信息、传递流信息并在其他浏览器中观看等步骤。同时本文也提到了 WebRTC，特点支持实时通信，不需要安装额外软件或插件的前提下，直接在浏览器之间进行信息交换等优点。WebRTC 还支持了许多应用场景，比如，远程协助、在线教学、视频会议等。而一些应用场景却也带来了一定的安全问题，所以在使用 webRTC 进行相应功能开发时，也需要我们去做好相应的安全防范。
四、参考文献
- WebRTC API - https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API
- Screen Sharing in WebRTC - https://blog.carbonfive.com/screen-sharing-in-webrtc/
- WebRTC 教程 - http://www.ruanyifeng.com/blog/2017/08/webrtc.html
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5af55d20074f47a47d559