js实现多人实时共享白板
在视频会议和远程一对一教学的过程中，我们经常要用到白板功能，大家打开白板页面，在白板上板书或标注，其他人都能看到，实时交互，以前要实现这个功能，要不安装一个软件，要不用flash实现，现在html5的发布，websocket的兴起，这个技术通过js就能实现，下面我们来演示讲解一下
一、对人共享白板原理
js中通过canvas将鼠标或手写板进行绘制，并将绘制的数据以对象的形式通过websocket实时发送到其他人的电脑canvas，就实现了白板共享了。二、js白板插件
推荐canvas-designer-widget白板插件，支持铅笔、彩笔、橡皮擦、图片、pdf文件、移动、文字、放大缩小等功能，很强大，非常好用。代码如下，可以点右上角在线直接运行html代码预览。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["canvas-designer-widget"], function() {
var designer = new CanvasDesigner();
// both links are mandatory
// widget.html will internally use widget.js
designer.widgetHtmlURL = 'http://repo.bfw.wiki/bfwrepo/html/widget.html'; // you can place this file anywhere
designer.widgetJsURL = 'http://repo.bfw.wiki/bfwrepo/js/widget.js'; // you can place this file anywhere
designer.setSelected('pencil');
designer.setTools({
pencil: true,
text: true,
image: true,
pdf: true,
eraser: true,
line: true,
arrow: true,
dragSingle: true,
dragMultiple: true,
arc: true,
rectangle: true,
quadratic: true,
bezier: true,
marker: true,
zoom: true,
lineWidth: true,
colorsPicker: true,
extraOptions: true,
code: true,
undo: true
});
designer.appendTo(document.getElementById("board"));
});
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="board" style="width:100vw;height:100vh;"></div>
</body>
</html>
三、websocket共享
后端我们选用workerman，新建WsboardServer.php,代码如下<?php use Workerman\Connection\AsyncTcpC...
点击查看剩余70%
{{collectdata}}
网友评论0