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
8. A点收到answer并根据answer的sdp设置远端屏幕共享setRemoteDescription
9. 至此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