# WebSocket-WebRTC 桌面共享 

**Repository Path**: subteamok/WebSocket-WebRTC-screen-sharing

## Basic Information

- **Project Name**: WebSocket-WebRTC 桌面共享 
- **Description**: # WebSocket-WebRTC 桌面共享 ;

#### 介绍
WebSocket+WebRTC+nodejs实现多人屏幕共享加文本聊天室
使用了reconnecting-websocket.js解决了socket断线重连问题
使用了adapter.js方便使用webRTC
效果如截图
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 4
- **Created**: 2023-07-04
- **Last Updated**: 2025-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebSocket-WebRTC 桌面共享 ;

#### 介绍
WebSocket+WebRTC+nodejs实现多人ping'mu加文本聊天室
使用了reconnecting-websocket.js解决了socket断线重连问题
使用了adapter.js方便使用webRTC
效果如截图
#### 一对一桌面共享+多人聊天 

#### 功能
- 共享桌面功能 进入房间后可以与房间内所有人屏幕共享通话
- 打字聊天功能 可以使用键盘进行文本交流
- 房间号功能 不同房间号之间的屏幕共享及聊天内容互不影响
- 房间号用户名不能为空名字不能相同验证提醒功能
- 用户名重复提醒功能 同一房间用户名重复给予提示
- 用户退出提醒 其他用户自动断开与该用户链接并有提示


#### 软件架构
后端使用nodejs
- 框架使用express
> 主要用于生成静态服务器，完全可以不使用express，自己搭客户端文件的静态服务器比如http-server
- ws模块
> 这个是实现websocket的模块，封装了websocket的一些方法，方便开发者使用websocket做业务逻辑，而不用关心websocket底层实现



#### 安装教程

1. yarn 或者 npm i
2. node server
3. 打开两个窗口输入同一个房间和不同的用户名 就能进入同一个房间相互看对方的分享屏幕共享;

#### 使用说明  和特别注意:

1. url上的room为房间号，name为用户名，可以自定义

2. 发送时需要允许浏览器屏幕共享获取权限  同时需要开启两个允许选项;分别是:
对于mozila浏览器
需要打开about:config
设置下面两个选项为true;

media.devices.insecure.enabled
media.getusermedia.insecure.enabled

英文的解释
in mozilla developer go to 
about:config set to true 
media.devices.insecure.enabled and media.getusermedia.insecure.enabled



Note: To record the screen in Angular 6+,
 you need to enable experimental web platform features 
 in chrome://flags 
 until it is launched properly because it is in development and testing mode

3. 因为是http本地测试,需要localhost作为网站的页面,不能时0.0.0.0或者时别的;
例如:
 localhost:3000 OK;
 0.0.0.0:3000 就不行
4. 如果想要打开页面时自动获取桌面是不行的;因为浏览器限制,所以需要那个button;

5. 需要把turnsever服务器的地址换成自己的: 启动命令 (这个命令运行在拥有key,cert,和 conf,配置的文件夹下)
turnserver -o -a -f         

#### webRTC大致流程
1. 获取本地媒体流放到video的src中
2. AB两点连接需要创建双方各自的 RTCPeerConnection
3. A点创建offer后设置本地屏幕共享setLocalDescription
4. A点发送带有本地sdp的offer给B点
5. B点收到offer并根据offer的sdp设置远端屏幕共享setRemoteDescription
6. B点创建answer后设置本地屏幕共享setLocalDescription
7. B点发送带有本地sdp的answer给A
7. A点收到answer并根据answer的sdp设置远端屏幕共享setRemoteDescription
8. 至此AB两点都设置了各自的本地和远端屏幕共享，点对点屏幕共享通话完成

##### 白话翻译：张三和李四屏幕共享通信过程
0. 首先张三和李四各自都有自己的本地屏幕共享标签video和远端屏幕共享标签video
1. 张三创建自己本地屏幕共享流并放到自己（张三）本地屏幕共享标签video中
2. 张三将自己（张三）的本地屏幕共享流发给李四
3. 李四收到张三的本地屏幕共享流并将其放到自己（李四）远端屏幕共享标签video中
4. 李四创建自己的本地屏幕共享流放到自己（李四）本地屏幕共享标签video中
5. 李四将自己（李四）的本地屏幕共享流发给张三
6. 张三收到李四的本地屏幕共享流并将其放到自己（张三）远端屏幕共享标签video中
7. 这样张三和李四就可以屏幕共享通信了




### WebSocket 兼容性
- Internet Explorer 10
- Firefox 6
- Chrome 14
- Safari 6.0
- Opera 12.1
- iOS Safari 6.0
- 不支持ie9及以下
- Chrome for Android 27.0
#### 如何让旧浏览器兼容
- 可以使用 socket.io
> 使用这个 服务端和浏览器端都要使用 浏览器端使用socket.io-client，
> 如果是node 服务器端也可以使用基于socket.io的koa-socket
- 可以使用 SockJS
> 也是要客户端同时配合使用相应的服务器端的库 如：SockJS-node, SockJS-erlang, SockJS-tornado, SockJS-twisted, SockJS-ruby, SockJS-netty, SockJS-gevent (SockJS-gevent fork), SockJS-go



### webRTC 兼容性
- Chrome（支持最好）
- Firefox
- Safari（ iOS 11 和 Safari 11 ）（DataChannel不能用）
- Edge（支持一部分）
- 不支持ie