OMCS Demo －－入门Demo Web 版

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

这里，在了解了 OMCS 开发手册之 Web SDK 说明后，我们为 OMCS入门Demo（即 OMCS Demo －－语音视频、电子白板、远程桌面功能展现）增加一个Web版本，我们已经部署好了这个Demo Web页面，可以直接体验，其地址如下：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();