魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎魔方实时通信，请点击这个继上一个im聊天组件增加了发动语音，语音视频通话功能项目的源代码在这里在线演示项目结构如下：直接打开浏览器访问index.html页面，效果图如下：音视屏通话效果：复制index.html就可以用了:<!DOCTYPE html><html> <head> <meta charset=“UTF-8”> <title></title> <link rel=“stylesheet” type=“text/css” href=“http://cube.getcube.cn/webSourceCode/cubeComponent/css/reset.css" /> <link rel=“stylesheet” type=“text/css” href=“http://cube.getcube.cn/webSourceCode/cubeComponent/css/grid.css" /> <link rel=“stylesheet” type=“text/css” href=“http://cube.getcube.cn/webSourceCode/cubeComponent/css/message.css" /> </head> <body> <div id=“root”>登录中。。。</div> <!–sendImg 发送图片按钮 sendFile 发送文件按钮 sendAudio发送语音消息 sendVoice语音通话 sendVideo视频通话–> <cube-message class=“app-drawer” sendImg sendFile sendAudio sendVoice sendVideo></cube-message> </body> <script type=“text/javascript”> //必填登录信息 var loginInfo = { ‘messagePeer’: ‘10255986’, //接收方的userId ‘userId’: ‘10255984’, //登录用户的userId ‘appId’: ‘9c2ed36ae5d34131b3768ea432da6cea005’, ‘appKey’: ‘5df6d5495fb74b35ad157c94977527ff005’, }; </script> <!– 引擎js –> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/Genie-min.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-core.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-message.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-signaling.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/lib/cube-sipworker.js"></script> <!– 自定义元素 –> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/component/Component.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/component/CubeMessage.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/message.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/signaling.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/conference.js"></script> <script type=“text/javascript” src=“http://cube.getcube.cn/webSourceCode/cubeComponent/js/base/base.js"></script></html>在启动之前，你只需要引入需要的各个js文件。lib/Genie-min.js 为引擎依赖库lib/cube-core.js 引擎核心库lib/cube-message.js 即时消息库lib/cube-signaling.js 音视频通话lib/cube-sipworker.js 会议模块base/base.js 用户登录的相关信息配置（loginInfo里面的信息去时信魔方官网注册获取）base/message.js 定义一个 AppMessageListener 来监听消息的收取、发送、文件上传、消息撤回等各种事件component/CubeMessage.js 自定义元素的js在html引入我们所需要的js，使用<cube-message class="app-drawer" sendImg sendFile sendAudio sendVoice sendVideo></cube-message>聊天界面就搭建好了。你可以根据需求是否需要发送图片，文件等消息类型在cube-message标签上添加 sendImg属性就可以发送图片在cube-message标签上添加 sendFile属性就可以发送文件在cube-message标签上添加 sendAudio属性就可以发送语音消息 在cube-message标签上添加 sendVoice属性就可以语音通话 在cube-message标签上添加 sendVideo属性就可以视频通话【注意】：新版本的视频获取接口要用HTTPS协议，否则会抛出错误，当然现在在本地访问通过 localhost, 127.0.0.1 或者文件协议，都可以正常使用capturing_audio_video.html:28 getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.