一步一步教你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,
...点击查看剩余70%
{{collectdata}}
网友评论0