WebRTC视频聊天

WebRTC

之前通过修改别的的 demo,试了一下 websocket.
看看最大的区别吧.

websocket

从轮训到 websocke 是技术的进步,体验的提升 多个客户端可以和 server 保持长连接,server 对客户端可以进行广播,进而达到消息实时传递

WebRTC

从 websocket 到 WebRTC 是理念上的变革 这让我想起了最近很流行的一个词 “去中心化”

看起来很像 websocket 的架构. 但是图中无法表达的是, 客户端 A 只需要将自己的 session 信息通过 server 传递给客户端 B,并从客户端 B 得到回应信息即可完成 Peer to Peer 的连接.

假设忽略错误处理,和其他的逻辑设计.单单从连接上看,这时候已经不需要 server 存在了. 此时, 两个客户端见的视频流,音频流,数据流完全可以脱离 server 而互相传递. 这样就做到了 “去中心化”.

如果有一个比较好的产品设计,完全可以把 server 的传递能力取代.

我们假象一个场景: 用户 A 通过 IM 把自己的 session 信息复制给 用户 B,用户 B 填入信息后, 再把自己的相应信息复制给 A 确认. A 输入相应信息.此时两个客户端已经完成了连接.中间没有任何的 server 再参与.

体验

https://webrtc.dreambo8563.tech/
s

  1. 获取登录人姓名

  1. 进入聊天界面,此时为没有现有房间的时候,只能自己创建

  1. 需要输入方面名称,以便两个客户端进行匹配

  1. 进入后会申请视频权限

  1. 用户 B 这时候 打开界面的时候回看到已经有个 叫”11”的房间了

  1. 选中房间,即可出现加入的按钮

  1. 连接成功后会出现对方的视频画面, 自己的画面在左上角

  1. 双发可以进行字符串的通信

这个 demo 为了充分体验 WebRTC 的特点,当双方连通后,websocket 就已经断开了.所以如果有任何的 error,双方需要重新操作以获取连接

Source Code

后端代码: https://github.com/dreambo8563/go-webrtc

前端代码: https://github.com/dreambo8563/webrtc-fe