一步一步教你rtcconnect开发基于浏览器的视频会议+文件共享+共享白板系统
视频会议系统随着今年疫情的影响变得越来越重要,待在家里就可以办公,视频会议,无需聚集在一起,那么怎么搭建一个视频会议系统呢,本文利用html5及webrtc的特性来编写一个例子,实现视频文字会议+共享白板+共享文件
一、技术要点
js插件库:socket.io、webrtc、canvas-designer、RTCconnection浏览器版本:chrome或火狐浏览器
开发环境及IDE:bfwsudio webide
UI布局框架:bfwui
js基础资源库:bfwone
一、RTCconnection服务端安装
在安装RTCconnection之前,请先确保自己电脑上安装了nodejs,安装好nodejs后我们进行一下操作。
下载RTCconnection服务端,下载地址:http://down.bfw.wiki/file/15829618048618760041.html
加压后进入RTCMultiConnection-Server目录,修改端口号8091(自定义,这里我改成了8091)
在命令好执行node server
看到以上页面就说明运行成功了
一、html及js编写
1、首先是文字聊天,引入RTCMultiConnection、socket.io js插件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" type="text/javascript" src="js/jquery.js"></script> <script id="bfwone" type="text/javascript" src="js/RTCMultiConnection.js"></script> <script id="bfwone" type="text/javascript" src="js/socketio.js"></script> <script type="text/javascript"> var connection = null; $(function() { $("#sendbtn").click(function() { var word = $("#word").val(); if (connection != null && word != "") { connection.send(word); $("#word").val(""); $("#msglist").append('我说: ' +word+"<br/>"); } }); $("#joinbtn").click(function() { if ($("#roomid").val() != "") { connection = new RTCMultiConnection(); // this line is VERY_important 选择socket io 服务器,可以自建 connection.socketURL = 'http://web.debug.only.bfw.wiki:8091/'; // if you want text chat connection.session = { data: true }; connection.onopen = function(event) { $("#msglist").append("加入聊天室成功,开始聊天吧<br/>"); // connection.send('hello everyone'); }; connection.onmessage = function(event) { $("#msglist").append(event.userid + ' 说: ' + event.data+"<br/>"); // alert(event.userid + ' said: ' + event.data); }; connection.openOrJoin('bfw'+$("#roomid").val()); } }); }); </script> </head> <body> <h1>RTCMultiConnection文字聊天</h1> <input type="text" id="roomid" value="demo123" placeholder="房间号,使用英文或数字" /> <input id="joinbtn" type="button" value="创建或加入此房间" /> <div id="msglist" style="height:300px;width:100%;background:white;"></div> <input type="text" id="word" placeholder="请输入文字聊天内容" /> <input id="sendbtn" type="button" value="发送" /> </body> </html>通过onopen及onmessage来监听和发送文字消息,这里可以发送一些文件实现共享,比如把文件上传到服务器中转站,然后将临时的url发送给对方以供下载查看。
2、那么视频聊天如何进行呢
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" type="text/javascript" src="js/jquery.js"></script> <script id="bfwone" type="text/javascript" src="js/RTCMultiConnection.js"></script> <script id="bfwone" type="text/javascript" src="js/socketio.js"></script> <script type="text/javascript"> $(function() { $("#joinbtn").click(function() { if ($("#roomid").val() != "") { var connection = new RTCMultiConnection(); // this line is VERY_important 选择socket io 服务器,可以自建 connection.socketURL = 'http://web.debug.only.bfw.wiki:8091/'; // if you want audio+video conferencing //使用你的视频和音频 connection.session = { audio: true, video: true }; //打开通道,如果通道已经被创建,就加入 connection.openOrJoin('bfw'+$("#roomid").val()); } }); }); </script> </head> <body> <h1>RTCMultiConnection视频会议系统</h1> <p> 首先需要<a href="https://chrome.google.com/webstore/detail/getusermedia/nbnpcmljmiinldficickhdoaiblgkggc">安装chrome扩展</a>,注意,这需要fanqiang,如果打不开,就查看这篇文章手动安装chrome扩展,<a href="http://www.bfw.wiki//user10/15640228901296320096.html">点击查看</a> </p> <p> 视频会议系统,将会使用你的麦克风和摄像头 </p> <input type="text" id="roomid" value="demo" placeholder="房间号,使用英文或数字" /> <input id="joinbtn" type="button" value="创建或加入此房间" /> </body> </html>好了,共享画板我们采用canvas-designer
3、共享画板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["canvas-designer-widget"], function() { var websocket = new WebSocket("ws://web.debug.only.bfw.wiki:8089"); var designer = new CanvasDesigner(); var olddata = null; // 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 websocket.onopen = function() { if (designer.pointsLength > 0) { // you seems having data to be synced with existing users! designer.sync(); } }; websocket.onmessage = function(event) { if (olddata != event.data) { console.log("not same"); designer.syncData(JSON.parse(event.data)); olddata = event.data; } }; designer.addSyncListener(function(data) { var comedata = JSON.stringify(data); if (olddata != comedata) { olddata = comedata; console.log("not the same"); websocket.send(comedata); } }); 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")); setInterval(function() { console.log("update"); designer.sync(); }, 3000); }); }); </script> <style> * { padding: 0; margin: 0; } </style> </head> <body> <div id="board" style="width:100vw;height:100vh;"></div> </body> </html>完整的项目在线webide地址为:http://studio.bfw.wiki/Studio/Open.html?projectid=15845415879408890085
网友评论0