首页 > yabovip31.net > 魔方实时通信一对一音视频组件

魔方实时通信一对一音视频组件

2019-09-13

魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎

魔方实时通信,请点击这个

继上一个im聊天组件增加了发动语音,语音视频通话功能

项目的源代码在这里

在线演示

项目结构如下:

直接打开浏览器访问index.html页面,效果图如下:

音视屏通话效果:

复制index.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标签上添加 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.

原文链接:https://segmentfault.com/a/1190000017472205

文章标签: