在前端开发中，我们有时需要让多个用户共享屏幕，以便进行协作。这个时候，可以使用 npm 包 ar-share-screen 来实现屏幕分享的功能。这个包可以在浏览器中直接使用，而且支持不同浏览器之间的屏幕分享。
安装
使用 npm 安装 ar-share-screen：
npm install ar-share-screen
或者可以直接在 HTML 文件中引入 ar-share-screen 的源文件：
<script src="https://unpkg.com/ar-share-screen"></script>
使用方法
在使用 ar-share-screen 之前，需要先创建一个 ScreenShare 实例：
import ScreenShare from 'ar-share-screen'; const screenShare = new ScreenShare();
或者直接在 HTML 文件中创建：
<script> const screenShare = new ScreenShare(); </script>
创建 ScreenShare 实例后，需要调用 start() 方法来初始化：
screenShare.start().then(() => {
console.log('屏幕分享已开启');
}).catch((err) => {
console.error('无法开启屏幕分享', err);
});调用 start() 方法后，用户会被提示是否允许屏幕分享。用户同意分享屏幕后，ScreenShare 实例会自动连接至远程用户，并共享屏幕。
如果需要停止屏幕分享，可以调用 stop() 方法：
screenShare.stop();
示例代码
以下是一个完整的示例，演示如何使用 ar-share-screen 在两个浏览器之间共享屏幕：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---------------
---- -----------------------
---- ------------------------
------- -------------------------------------------------
--------
----- ---------- - ---------------------------------------
----- ----------- - ----------------------------------------
----- ----------- - --- --------------
----------------------------- -------- -- -
-------------------- - -------
---
------------------------------ -------- -- -
--------------------- - -------
---
--------------------------- -- -
-----------------------
-------------- -- -
------------------------- -----
---
---------
-------
-------在 ScreenShare 实例的 on 方法中，可以监听各种事件。例如，当本地或远程视频流可用时，会触发 localStream 或 remoteStream 事件。
指导意义
ar-share-screen 的使用教程介绍了如何在前端中实现屏幕分享的功能。这个功能在很多应用场景中都非常有用，例如远程工作、在线教育等。在学习使用 ar-share-screen 的过程中，可以深入了解 WebRTC 技术的相关知识，进一步掌握 Web 前端开发的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672da0520b171f02e1cf2