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();