共计 3174 个字符，预计需要花费 8 分钟才能阅读完成。
魔方实时通信 / 协作引擎 (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.