OMCS Demo －－入门Demo Web 版

　　OMCS Web 版拥有PC版的绝大部分功能，包括语音（麦克风）、视频（摄像头）、远程桌面的观看和操作、电子白板的观看。OMCS Web版与OMCS PC版、Android版、iOS版是完全互通的，相互之间都可以实现语音视频通话、远程桌面、电子白板等实时交互功能。

这里，在了解了 OMCS 开发手册之 Web SDK 说明后，我们为 OMCS入门Demo（即 OMCS Demo －－语音视频、电子白板、远程桌面功能展现）增加一个Web版本。

一、使用前准备

1、安装并打开OMCS服务插件

　　使用OMCS Web版必须先下载并安装OMCS视频服务Web插件，在每次打开Demo网页时会尝试连接OMCS服务，若连接失败则会弹出提示，并跳转到OMCS视频服务插件安装包的下载地址。

OMCS服务插件安装成功后，然后再刷新本Demo网页，网页中的JS会自动将刚安装好的插件运行起来，此后，OMCS Web版会与OMCS 视频服务插件进行正常通信。

OMCS 视频服务插件以托盘的方式运行，如下图所示：

2、启动OMCS服务端

可从 OMCS入门Demo 的文末下载Demo的服务端和其它客户端的版本，在本机或其它服务器上运行Demo 的 OMCS服务端：

3、Demo Web端登录

　　在浏览器中打开本Demo的测试网页，输入账号密码和所要连接的OMCS服务器的IP地址和端口以登录，登录成功后登录界面将会变成登录用户的信息，如下图所示。

二、功能展示

1、语音视频（摄像头、麦克风）

　　输入你想要连接的目标对象的UserID（可以是当前登录者自己，表示连接自己的设备）即可进行麦克风和摄像头的连接，点击连接后则使用newmodular（）方法新建视频显示的模块，包括视频显示，放大关闭按钮等并绑定按钮功能函数，新建模块完成后调用连接函数。连接多个对象时会自动调整模块位置。

function newmodular() {                     
           $('video').style.display = 'flex';
            var videoid = $("OppositeID").value;
            var video = document.getElementsByClassName('video');

            //增加父容器
            var newvideofaid = 'fa' + videoid;
            var newvideofa = document.createElement('div');
            newvideofa.className = 'video-fa';
            newvideofa.id = newvideofaid;
            video[0].append(newvideofa);
            var newfa = document.getElementById(newvideofaid);

            //增加状态栏
            var inh = videoid ；
            var status = document.createElement('div');
            status.innerHTML = inh;
            status.id = 'status' + videoid;
            status.className = "status";
            newfa.append(status);

            //增加视频模块
            var newvideochid = 'ch' + videoid;
            var newvideoch = document.createElement('img');
            newvideoch.className = 'video-ch';
            newvideoch.id = newvideochid;
            newfa.append(newvideoch);

            //增加放大按钮
            var btnbig = document.createElement('div');
            btnbig.innerHTML = '口';
            btnbig.id = videoid;
            btnbig.className = 'btnbig';
            newfa.append(btnbig);

            //增加放大按钮事件
            var btnbigc = document.getElementsByClassName('btnbig');
            for (var i = 0; i < btnbigc.length; i++) {
                var flat = 0;
                btnbigc[i].onclick = function () {
                    if (flat == 0) {
                        this.previousElementSibling.className = 'newbtnbig'
                        this.parentNode.style="width:100%"
                        flat = 1;
                    } else {
                        this.previousSibling.className = "video-ch"
                        this.parentNode.style = "width:"
                        flat = 0;
                    }
                }
            }

            //增加关闭按钮
            var btnclose = document.createElement('div');
            btnclose.innerHTML = 'x';
            btnclose.id = videoid;
            btnclose.className = "btnclose";
            newfa.append(btnclose);

            //增加关闭按钮事件
            var btnclose = document.getElementsByClassName('btnclose');
            for (var i = 0; i < btnclose.length; i++) {
                btnclose[i].onclick = function () {
                    var a = this.parentNode;
                   a.remove();
                    //断开麦克风连接器和摄像头连接器
                    this.dynamicCameraConnector1.Disconnect();
                    this.microphoneConnector1.Disconnect();
                    if ((document.getElementById('video').children.length) == 0) {
                       document.getElementById('video').style.display = 'none';
                    }
               }
            }
        }

      //连接摄像头
     let destID = $("OppositeID").value;
     this.dynamicCameraConnector1 = new 
      DynamicCameraConnector();
     this.dynamicCameraConnector1.ConnectEnded = connectEnded;
     this.dynamicCameraConnector1.Disconnected = disconnected;
     this.dynamicCameraConnector1.SetViewer($(newvideochid));
     this.dynamicCameraConnector1.SetAutoReconnect(true);
     this.dynamicCameraConnector1.AutoReconnectSucceed = videocl;
     this.dynamicCameraConnector1.BeginConnect(destID);

    //连接麦克风
    this.microphoneConnector1 = new MicrophoneConnector();
    this.microphoneConnector1.SetAutoReconnect(true);
    this.microphoneConnector1.AutoReconnectSucceed = miccl;
    this.microphoneConnector1.ConnectEnded = microphone;
    this.microphoneConnector1.BeginConnect(destID);

　　新建模块之前会判断你是否已经连接过该对象，若已经连接则删除旧的连接模块，新建连接。

 for (i = 0; i < oldvideofa.length; i++) {                
                if (oldvideofa[i].id == yanzhen) {
                    document.getElementById(yanzhen).remove(); }
            }

　　当需要放大视频连接显示模块时，点击放大按钮则可放大对印视频模块再次点击则缩小。

　　连接成功后会将连接结果返回到视频连接的模块中并显示，连接失败时则返回连接错误的信息。

　　通过Disconnected监听连接信息，若连接中断则出现红色提醒中断原因，包括连接器掉线，设备掉线，试用超时等。

　　若主动断开连接则直接停止视频麦克风的连接并删除对应模块。

　　下图为连接多个用户的效果（包括成功与失败）

2、远程桌面

　　要连接远程桌面时，在输入框输入所需连接对象的ID点击按钮即可进行连接。同样连接成功后会新建显示远程桌面的模块并弹出一个遮罩的DIV停止除了远程桌面以外页面上的其他操作，若连接成功则在左上角显示连接桌面的大小和远程桌面的画面。

　　远程鼠标操作则是通过绑定鼠标的onmousemove、onmousedown、onmouseup来获取鼠标数据在发送给连接对象进行操作。

　　同时通过onkeydown和onkeyup监听键盘操作实现对于远程桌面的操控。

　   //连接远程桌面
    function desktop() {
    var destID = $("OppositeID").value;
    this.dynamicDesktopConnector = new DynamicDesktopConnector();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    //控制是否开启操作
    this.dynamicDesktopConnector.SetWatchingOnly(false);
    this.dynamicDesktopConnector.SetShowMouseCursor(true);
    this.dynamicDesktopConnector.ConnectEnded = connectEnded1;
    this.dynamicDesktopConnector.Disconnected = desktoped;
    this.dynamicDesktopConnector.SetViewer($(destID));
    this.dynamicDesktopConnector.BeginConnect(destID);
}

　默认显示的远程桌面框的大小若比远程桌面连接的实际桌面小则会出现滚动条方便对远程桌面对象进行操作。

　　在增加远程窗口时，我们向其DIV上放了四个相应位置的按钮分别对应远程窗口的左右缩放、上下缩放、大小缩放和窗口移动。若默认显示窗口的大小不适合你的网页尺寸，则可以通过鼠标操作自行调节显示模块的大小与位置或者点击放大按钮进行网页全屏显示。

　　连接远程桌面成功则出现如下界面

　　通过Disconnected监听远程连接的状态，点击关闭按钮则可主动断开与连接对象的远程桌面连接并删除连接模块，若被迫中断连接则会出现提示框提示断开的原因，并主动关闭并删除连接模块

function closey() {
            var closey = document.getElementById('closey'); 
            var a = closey.parentNode;
            a.parentNode.className = "zhedangn";
                                                                                                                                                                                                //关闭远程连接
            this.dynamicDesktopConnector.Disconnect();
            closey.nextElementSibling.innerHTML=''           
        }
 function desktoped(ConnectorDisconnectedType) {
            if (ConnectorDisconnectedType != 'GuestActiveDisconnect') {
                alert($('OppositeID').value + '断开链接' + ConnectorDisconnectedType);
            }
            closey();
        }

　　被迫中断的提示如下图所示

3、电子白板

　　输入ID连接某个用户(可以是自己)的白板功能，通过dynamicWhiteBoardConnector 连接白板功能，连接成功后所有连接者则可同时观看该白板的内容，若白板内容有变化时显示模块也会实时更新。

　　点击白板按钮则会新建白板显示模块，可同时连接多个白板，白板拥有画图，文字输入、插入图片、截图等功能。

function addwhiteboard() {            
            var whiteboard = document.getElementById('whiteboard')
             whiteboard.style.display = 'block';                                      
            var whiteboardid = $('OppositeID').value;
            var whiteboardfid = 'wbf' + whiteboardid;
            var c = document.getElementsByClassName('whiteboardf');
            var newid = whiteboardfid;
            for (a = 0; a < c.length; a++) {
                if ((c[a].id) == newid) {
                    document.getElementById(newid).remove();
                } else {
                    
                    }
            }
            var whiteboardid = $('OppositeID').value;
            var whiteboardfid = 'wbf' + whiteboardid;
            var whiteboardf = document.createElement('div');
            whiteboardf.className = 'whiteboardf';
            whiteboardf.id = whiteboardfid
            $('whiteboard').append(whiteboardf);          
            //白板消息栏
            var wbxx = document.createElement('div');
            wbxx.className = 'wbxx';
            $(whiteboardfid).append(wbxx)

            var wbname = document.createElement('div');
            wbname.id='wbname'
            wbname.innerHTML ='正在连接'+ whiteboardid+'的白板';
            $(whiteboardfid).firstElementChild.append(wbname);
            //白板按钮
            var wbclosebtn = document.createElement('div');
            wbclosebtn.className = 'wbbc'
            wbclosebtn.innerHTML = 'x';
            $(whiteboardfid).firstElementChild.append(wbclosebtn);
            var wbbtnclose = document.getElementsByClassName('wbbc');
            for (var i = 0; i < wbbtnclose.length; i++) {
                wbbtnclose[i].onclick = function () {
                    this.parentNode.parentNode.remove();
                    if ((whiteboard.children.length) == 0) {
                        whiteboard.style.display = 'none';
                    }
                }
            }
            //白板显示img
            var wb = document.createElement('img');
            wb.id = 'wb' + whiteboardid;
            $(whiteboardfid).append(wb);        
        }
       //链接白板 
        function whiteboard() {
            this.addwhiteboard()
            var destID = $("OppositeID").value;
            console.log(destID);
            var wbid = 'wb' + destID;
            this.dynamicWhiteBoardConnector = new DynamicWhiteBoardConnector();
            this.dynamicWhiteBoardConnector.ConnectEnded = wbconnectEnd;
            this.dynamicWhiteBoardConnector.SetViewer($(wbid));
            this.dynamicWhiteBoardConnector.BeginConnect(destID);
        }

　　连接成功后如下

三、连接状态与掉线重连

登录成功后会在登录成功后的显示面板上显示出目前的连接状态：“正常”，若与OMCS服务器的接断开，Demo则会显示红色字体提醒，并自动尝试重新连接。

若与OMCS服务器的连接断开，则语音视频、远程桌面和白板则也会断开连接，视频和白板断开后将在连接状态显示栏上出现红色提醒显示连接断开的原因。

若尝试重连成功则在视频和白板断开后在连接状态显示栏上出现重连成功的提示。

语音视频、远程桌面和白板通过AutoReconnectSucceed来监听重连成功的信息 SetAutoReconnect开启自动重新连接，用户则通过ConnectionInterrupted和ConnectionRebuildSucceed获取断开和重新连接信息。

断开时如下图所示：

重新连接成功后如下图所示：

四、下载

（1） OMCS视频服务Web插件安装包

（2） OMCS 入门Demo Web版源码

（3）OMCS 服务端可执行程序（解压后，双击exe即可运行）

（4）若要下载其它客户端（PC、Android、iOS）一同测试，请到 OMCS Demo －－语音视频、电子白板、远程桌面功能展现文末下载。

运行 Demo 步骤：

（1）将OMCS服务端可执行程序部署到一台服务器上，启动OMCS服务端。

（2）可以直接打开我们已经部署好的Demo测试页面：OMCS 入门Demo Web版测试页面。

如果尚未安装OMCS视频服务Web插件，网页会自动提示下载安装。完成安装后，刷新网页，会提示启动插件，点击同意后，再次刷新网页即可。

（3）输入服务器的IP地址和端口登录一个帐号，比如aa08。

（4）在另一台机器上启动Demo的PC客户端或打开测试网页，或者，在手机上打开对应的客户端，登录另一个帐号，比如aa02。

（5）aa08可以在网页的输入框中输入aa02，并点击后面的按钮，来连接aa02的视频，远程桌面同上。

（6）aa02也可以在其网页中输入aa08，并点击后面的按钮，来连接aa08的视频。这样可以演示视频聊天的功能了。

（7）测试视讯时，两个客户端最好在不同的房间，以防止声音相互干扰。

（8）测试白板时，需要连接到同一个用户的白板，才能协同。

下载免费版本的OMCS以及 demo源码

阅读更多OMCS开发手册系列文章。

Q Q：168757008

官网：www.oraycn.com