【从头到脚】WebRTC + Canvas 实现一个双人协作的共享画板

最新推荐文章于 2024-04-07 11:21:02 发布

江三疯~

最新推荐文章于 2024-04-07 11:21:02 发布

阅读量2.5k

点赞数 5

本文链接：https://blog.csdn.net/qq_41875664/article/details/98870809

版权

本文介绍了如何使用WebRTC的RTCDataChannel实现一个双人协作的共享画板应用。通过封装Canvas类，创建数据通道进行文本和画板操作的实时同步，实现画板上的每一笔都能即时反映到另一方的画板上。同时，文章提供了简单的白板演示和完整的共享画板功能，适合前端开发者学习WebRTC和Canvas的结合应用。

摘要由CSDN通过智能技术生成

作者：江三疯，专注前端开发。欢迎关注公众号前端发动机，第一时间获得作者文章推送，还有各类前端优质文章，致力于成为推动前端成长的引擎。

前言

笔者之前写过一篇【从头到脚】撸一个多人视频聊天 — 前端 WebRTC 实战（一），主要讲 WebRTC 的一些基础知识以及单人通话的简单实现。原计划这篇写多人通话的，鉴于有同学留言说想看画板，所以把这篇文章提前了，希望可以给大家提供一些思路。

本期的主要内容，便是实现一个共享画板，还有上期没讲的一个知识点：RTCDataChannel 。

特别注意：介于本次的实现多基于上期的知识点以及相关示例，所以强烈建议不太了解 WebRTC 基础的同学，配合上篇一起看传送门。最近文章的相关示例都集中在一个项目里，截至本期目录如下：

640?wx_fmt=png

本文示例 源码库 webrtc-stream
文章仓库 ??fe-code
本文演示地址（建议谷歌查看）

照例先看下本期的实战目标（灵魂画手上线）：实现一个可以两人（基于上期文章的 1 对 1 对等连接）协作作画的画板。是什么概念呢？简单来说就是两个人可以共享一个画板，都可以在上面作画。

先来感受一下恐惧！颤抖吧！人类！（图为白板演示，共享在下面）

640?wx_fmt=png

RTCDataChannel

我们先把上期留下的知识点补上，因为今天的栗子也会用到它。

介绍

简单来说，RTCDataChannel 就是在点对点连接中建立一个双向的数据通道，从而获得文本、文件等数据的点对点传输能力。它依赖于流控制传输协议（SCTP）， SCTP是一种传输协议，类似于TCP和UDP，可以直接在IP协议之上运行。但是，在WebRTC的情况下，SCTP通过安全的DTLS隧道进行隧道传输，该隧道本身在UDP之上运行。嗯，我是个学渣，对于这段话我也只能说是，看过！大家可以直接查看原文。

另外总的来说 RTCDataChannel 和 WebSocket 很像，只不过 WebSocket 不是 P2P 连接，需要服务器做中转。

使用

RTCDataChannel 通过上一期讲过的 RTCPeerConnection 来创建。

// 创建	
let Channel = RTCPeerConnection.createDataChannel('messagechannel', options);	
// messagechannel 可以看成是给 DataChannel 取的别名，限制是不得超过65,535 字节。	
// options 可以设置一些属性，一般默认就好。	
// 接收	
RTCPeerConnection.ondatachannel = function(event) {	
  let channel = event.channel;	
}

RTCDataChannel 只需要在一端使用 createDataChannel 来创建实例，在接收端只需要给 RTCPeerConnection 加上 ondatachannel 监听即可。但是有一点需要注意的是，一定要是 呼叫端 也就是创建 createOffer 的那端来