一步一步教你rtcconnect开发基于浏览器的视频会议+文件共享+共享白板系统

一步一步教你rtcconnect开发基于浏览器的视频会议+文件共享+共享白板系统

一步一步教你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

一步一步教你rtcconnect开发基于浏览器的视频会议+文件共享+共享白板系统

看到以上页面就说明运行成功了

一、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

{{collectdata}}

网友评论0