基于浏览器 webrtc的PC屏幕共享

最新推荐文章于 2025-11-05 21:22:23 发布
原创 最新推荐文章于 2025-11-05 21:22:23 发布 · 2.7w 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#wetrtc #screen #屏幕共享

本文介绍了如何在Chrome浏览器中利用WebRTC技术进行屏幕共享。首先，需要安装经过修改的Chrome插件以支持屏幕截取。接着，详细阐述了加载插件的步骤和服务器环境的配置。通过在服务器上运行node服务，用户可以在Chrome浏览器中输入服务器IP地址访问共享屏幕。用户可以选择分享整个屏幕或特定应用窗口，并通过输入对方ID实现多个设备间的屏幕实时传输。

         https://www.html5rocks.com/en/tutorials/webrtc/basics/

         从官方介绍可知，webrtc不仅可提供以摄像头为源的视频通讯功能，也能进行主机的screensharing，但目前支持webrtc的浏览器，无法直接截取主机屏幕，故无法使用此功能，需要插件支持才能实现屏幕截取共享功能，这里就介绍如何使用chrome浏览器进行屏幕共享。

1，  首先支持webrtc的chrome浏览器需要扩展插件，chrome官方提供的插件由于里面配置信息问题，无法使用，可下载经修改后的插件安装包http://download.youkuaiyun.com/download/yunjinwang/10167051。可参考https://github.com/webrtc/samples/tree/gh-pages/src/content/extensions/desktopcapture；

2，  下载后，在chrome浏览器中加载此插件，“设置”->更多工具->扩展程序，在页面选中“开发者模式”，点击“加载已解压的扩展程序”，浏览到前面下载的插件解压后的目录最后一层desktopCapture_chrome_plugin，确定加载后就在“扩展程序”下面看到已加载screenCapturing插件，至此，插件安装完成；

最低0.47元/天 解锁文章
基于WebRTC的PC屏幕共享
UnhcTransforms的博客
09-18 705
其中一个强大的功能是PC屏幕共享，它允许用户在Web应用程序中共享其计算机屏幕的内容。本文将介绍如何使用WebRTC实现PC屏幕共享，并提供相应的源代码。通过上述代码，我们可以实现基于WebRTC的PC屏幕共享。用户可以在Web应用程序中共享其计算机屏幕的内容，并将其展示在远程浏览器中。请注意，由于安全原因，大多数浏览器要求在使用屏幕共享功能时，网站必须使用HTTPS协议。对象，该对象用于建立WebRTC连接。接下来，我们将本地视频流添加到连接中，并通过监听。方法获取本地屏幕的视频流，并将其展示在id为。
基于 WebRTC 的一对一屏幕共享项目（一）——项目简介
2301_76564925的博客
05-23 2084
本文介绍了一个基于WebRTC技术的屏幕共享项目，旨在解决远程协作中的高效沟通问题。项目核心功能包括极简房间管理、灵活共享控制和便捷性，支持全屏、窗口和标签页共享，并提供了交互增强功能。技术架构分为三层：分发HTML的服务器、HTML客户端和信令服务器，分别负责前端页面分发、用户交互和信令管理。项目还集成了STUN和TURN服务器，确保在不同网络环境下的稳定连接。核心流程包括连接与房间创建、媒体协商和屏幕共享与控制三个阶段。该项目通过轻量化、高兼容性的设计，实现了无需插件的实时协作系统，适用于多种场景。
Chrome下使用WebRTC实现屏幕共享
Es_trella的博客
09-15 2268
概述 屏幕共享就是将自己电脑的屏幕内容以视频的方式分享给其他人观看，以提高沟通效率。屏幕共享作为一种实现互动的方式，经常出现在用户的生活场景中，比如: 视频会议中，屏幕共享可以将讲话者本地的文件、数据、网页、PPT 等画面分享给其他与会人。 在线课堂场景中，屏幕共享可以将老师的课件、笔记、讲课内容等画面展示给学生观看。 那么如何能够简单方便的实现屏幕共享呢?本篇文章将详细介绍如何在Chrome下使用WebRTC快速实现屏幕共享。 屏幕共享实现 屏幕共享大致可以分为屏幕流捕捉，流传输和屏幕流渲染。 屏幕
数据库迁移停机时间从4小时压到90分钟？揭秘金仓KReplay的核心魔法
最新发布
byte轻骑兵的技术小窝
11-05 1万+
金仓KReplay工具在数据库迁移中展现显著优势 金仓数据库推出的KReplay负载回放工具解决了传统数据库迁移面临的停机时间长、人力资源消耗大、风险预判难和验证效率低等核心问题。
基于浏览器 webrtc的屏幕共享示例代码
12-21
从官方介绍可知，webrtc不仅可提供以摄像头为源的视频通讯功能，也能进行主机的screensharing，但目前支持webrtc的浏览器，无法直接截取主机屏幕，故无法使用此功能，需要插件支持才能实现屏幕截取共享功能，这里就介绍如何使用chrome浏览器进行屏幕共享。具体参考：http://blog.youkuaiyun.com/yunjinwang/article/details/78851036
WebRTCScreenSharing:一个 Node.js、Socket.io 项目，使用 WebRTC 实现点对点屏幕共享
05-30
一个 Node.js、Socket.io 项目，使用 WebRTC 来允许点对点屏幕共享。 为大学项目而写。 包括简短的 javascript 演示文稿和有关如何根据需要为 WebRTC 屏幕共享工作安装 Firefox 和 Chrome 插件的说明。 您可以在 Okeanos 上看到一个现场演示： （https 是必不可少的，ssl 证书是自签名的，因此您的浏览器会抱怨）
一款开源屏幕共享神器，有浏览器就能投屏，爽歪歪了
weixin_44058951的博客
10-21 1747
Deskreen 这个词是 Desktop+Screen（桌面+屏幕）的意思，deskreen 支持 win，mac，linux，除了把屏幕共享到其他电脑还可以分享到比如手机，平板等设备上。deskreen是基于浏览器WebRTC协议的，它是通过生成一个共享屏幕的链接来实现屏幕共享，所以对设备没有任何限制，无需其他额外的硬件或连接线，只要能打开网页就可以。随着日常工作的多样化，单屏幕操作会带来很多的上下文切换，也就会导致工作效率的降低。日常工作中，电脑屏幕共享的功能常被用于演示，远程办公或者直播。
【亲测免费】 Electrons实现Chrome使用WebRTC实现屏幕共享
gitblog_06752的博客
05-01 820
Electrons实现Chrome使用WebRTC实现屏幕共享 去发现同类优质开源项目:https://gitcode.com/ 此仓库提供了一个使用Electron和Chrome的WebRTC实现屏幕共享的示例项目。在这个项目中，客户端与服务端通过socket.io进行连接，实现了屏幕共享的功能。 项目简介 该项目主要包括以下几个部分： Electron客户端：负责屏幕共享的捕捉和展示。 We...
Electrons实现Chrome使用WebRTC实现屏幕共享：项目核心功能解析
gitblog_06741的博客
05-24 328
Electrons实现Chrome使用WebRTC实现屏幕共享：项目核心功能解析 去发现同类优质开源项目:https://gitcode.com/ 在现代远程协作和在线教育场景中，屏幕共享功能成为了不可或缺的组成部分。今天，我们要推荐一个开源项目——Electrons实现Chrome使用WebRTC实现屏幕共享，该项目为开发者提供了一个简单易用的屏幕共享解决方案。 项目介绍 Electrons实现...
webRTC（十一）：webrtc 实时共享桌面
2401_84433570的博客
04-27 1172
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
WebRtc实现音视频通话、屏幕共享（Android）
XunYoua的博客
04-04 294
WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRtc起初是由Global IP公司创造出来的，后来被Google收购并将这门技术改名为WebRtc。WebRTC是一项实时通信领域革命性的技术，在实时音视频通信领域已经产生了深远的影响。WebRtc主要被用于音视频即时会议通话。
基于webrtc远程视频通话及屏幕共享
06-16
远程视频通话是视频会议系统的一个重要组成部分，目前云端视频会议主要都是基于webrtc方式进行视频通话及屏幕共享。本次课程附带全部核心源码，本源码具有版权不能用于商业及传播。
webrtc、kurento 屏幕共享及切换屏幕和摄像头
12-20
仅支持谷歌和火狐，谷歌浏览器请下载插件Screen Capturing3.7，地址去谷歌商店搜索 前台的js写的。后台为java，请自行部署kurento server服务器。并且自己修改One2ManyCallApp类 的连接地址
HTML5虚拟教室-屏幕共享。「HTML5 Virtual Classroom - Screen Sharing」-crx插件
03-08
扩展，使屏幕共享为BrainCert应用程序。 通过此基于WebRTC的扩展，您可以使用HTML5虚拟教室在现场虚拟教室会话中与与会者共享全高清桌面和应用程序。 虚拟教室功能：-在选项卡式界面中将基于HTML5的高清屏幕共享分组。 通过共享整个屏幕或仅一个应用程序来增强基于计算机的培训课程。 无需下载或安装软件。 -多个交互式白板。 所有课堂教学的主要内容是支持绘图工具，LaTEX数学方程式，绘制形状和符号，保存快照以及在多个选项卡中共享文档的白板。 -分享文件和演示文稿。 安全地流式传输音频/视频文件。 -Wolfram | Alpha使您可以访问世界的事实和数据，并计算包括科学，工程和数学在内的一系列主题的答案。 -公式编辑器，群聊和强大的注释功能，可绘制上传的文档和演示文稿。 在此处查看所有功能-https://www.braincert.com/online-virtual-classroom。 支持语言:English
开发者实践：像素级同步、低延时、超低流量的屏幕共享工具 Syncit
声网的博客
06-16 1965
在 RTC 2020 编程挑战赛春季赛中，像素级、低流量的屏幕共享工具「Syncit」获得了第二赛道的第一名。项目作者余彦臻同时还是拥有 6500+Star 的开源项目 rrweb 的作...
WebRTC一对一单聊与屏幕共享的功能实现（附实现源码）
qq_74868753的博客
05-31 1194
本文详细记录了基于WebRTC的一对一视频通话实现过程，包含完整的WebRTC信令流程和代码实现。首先介绍了WebRTC的核心概念（SDP交换、ICE候选交换、P2P连接建立），然后通过Node.js搭建信令服务器（使用Socket.io），并详细解析了客户端代码实现。项目支持基础视频通话、静音/暂停控制、屏幕共享等功能，同时包含房间人数限制、断线重连等机制。文章还分享了STUN/TURN服务器的使用，以及HTTPS服务的配置方法。所有代码均配有详细注释，可作为WebRTC开发的实践参考。
使用WebRTC实现远程屏幕共享
热门推荐
蒋宇捷的专栏
12-27 3万+
正如我们上周报道的一样，最近有很多事情发生在我们熟知的WebRTC上。        其中一个是：基于WebRTC的屏幕共享。        这是屏幕录像：youtube.com/watch?v=tD0QtBUZsF4。        这是代码：github.com/samdutton/rtcshare。        从本质上讲，我们使用RTCPeerConnection和chrome.tabC
screego 安装配置教程：一款简单易用的屏幕共享工具
Xpitz的博客
11-05 8574
文章首发于个人公众号：「阿拉平平」 screego [1] 是一个由 Golang 开发的屏幕共享工具，我实际测试下来发现显示效果非常好，和大家分享下。 安装 screego 目前最新的版本为 v1.0.7，选择并下载系统对应的安装包： [root@localhost ~]# wget https://github.com/screego/server/releases/download/v1.0.7/screego_1.0.7_linux_amd64.tar.gz 解压后可以得到二进制文件以及示例文.
Deskreen – 将电脑屏幕共享到浏览器中，做第二块屏幕[Win/macOS/Linux]
字节网盘SEO工具
07-03 524
介绍： Deskreen 是一款非常实用的开源项目，它可以将你的电脑屏幕共享到浏览器中，做第二块屏幕。支持 Windows、macOS、Linux，可分享整块屏幕，或只分享某一个应用界面，支持多个浏览器观看，只需扫码、授权即可，采用端对端加密保证安全，使用 WebRTC 及 Electron 技术。 网盘下载地址： http://kekewl.net/zb8pGce7ipd0 图片： ...
webrtc手机屏幕共享
05-20
### 实现移动端 WebRTC 屏幕共享功能的关键要素 要在移动设备上通过 WebRTC 实现屏幕共享功能，需要综合考虑多个技术层面的因素。以下是对这一主题的详细介绍： #### 1. **权限管理** 在 Android 平台上开发支持屏幕共享的应用程序时，必须先获取必要的权限。这些权限通常包括访问互联网、音频录制以及摄像头等功能。例如，在 `AndroidManifest.xml` 文件中可以声明如下权限[^4]: ```xml <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.CAMERA"/> ``` 此外，为了实现屏幕捕获功能，还需要申请额外的特定权限，比如 `android.permission.MEDIA_PROJECTION`，这允许应用程序截取用户的屏幕内容。 #### 2. **安全警告机制** 任何提供屏幕共享功能的应用都应具备足够的安全性提示来保护用户隐私。由于用户可能不清楚正在分享的具体范围或内容，因此设计良好的界面交互至关重要。例如，可以通过弹窗提醒或其他视觉信号告知当前正在进行的操作状态[^1]。 #### 3. **数据加密传输** WebRTC 协议强制要求所有交换的数据都要经过加密处理以保障通信的安全性。对于实时音视频流以及其他自定义负载而言，默认采用的是基于 UDP 的 SRTP（Secure Real-time Transport Protocol），而对于信令消息则推荐使用 DTLS-SRTP 方案来进行端到端保护[^3]。 #### 4. **实际编码实践** 下面展示了一个简单的 HTML/JavaScript 片段用于初始化基本的 WebRTC 连接并尝试请求桌面媒体源作为输入之一： ```javascript async function startScreenShare() { try { const stream = await navigator.mediaDevices.getDisplayMedia({ video: true }); // Attach the captured display media to a local <video> element. document.getElementById('localVideo').srcObject = stream; // Initialize RTCPeerConnection object here... let pc = new RTCPeerConnection(); stream.getTracks().forEach(track => pc.addTrack(track, stream)); console.log("Successfully started screen sharing."); } catch (err) { console.error("Error starting screen share:", err); } } ``` 注意：此代码片段仅适用于浏览器环境下的屏幕捕捉API (`getDisplayMedia`) ，而在原生安卓应用里，则需借助 MediaProjection API 或其他第三方库完成相似的功能。 #### 5. **跨平台兼容性考量** 尽管现代主流浏览器普遍支持 WebRTC 技术栈及其扩展特性如屏幕共享，但在不同操作系统版本之间仍可能存在差异化的表现行为或者缺失某些高级选项的支持情况。开发者应当充分测试目标受众群体所使用的具体机型组合，并针对发现的问题作出相应调整优化措施。 --- ###
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值