魔方實(shí)時(shí)通信一對(duì)一音視頻組件

Steve_Wang_ 發(fā)布于2019-08-23 14:13 / 2911人閱讀

摘要：魔方實(shí)時(shí)通信協(xié)作引擎是一個(gè)全能力的實(shí)時(shí)云端協(xié)作引擎魔方實(shí)時(shí)通信，請(qǐng)點(diǎn)擊這個(gè)繼上一個(gè)聊天組件增加了發(fā)動(dòng)語(yǔ)音，語(yǔ)音視頻通話功能項(xiàng)目的源代碼在這里在線演示項(xiàng)目結(jié)構(gòu)如下直接打開瀏覽器訪問(wèn)頁(yè)面，效果圖如下音視屏通話效果復(fù)制就可以用了登錄中。。。

魔方實(shí)時(shí)通信/協(xié)作引擎(Web SDK)是一個(gè)全能力的實(shí)時(shí)云端協(xié)作引擎

魔方實(shí)時(shí)通信，請(qǐng)點(diǎn)擊這個(gè)

繼上一個(gè)im聊天組件增加了發(fā)動(dòng)語(yǔ)音，語(yǔ)音視頻通話功能

項(xiàng)目的源代碼在這里

在線演示

項(xiàng)目結(jié)構(gòu)如下：

直接打開瀏覽器訪問(wèn)index.html頁(yè)面，效果圖如下：

音視屏通話效果：

復(fù)制index.html就可以用了:

在啟動(dòng)之前，你只需要引入需要的各個(gè)js文件。

lib/Genie-min.js 為引擎依賴庫(kù)

lib/cube-core.js 引擎核心庫(kù)

lib/cube-message.js 即時(shí)消息庫(kù)

lib/cube-signaling.js 音視頻通話

lib/cube-sipworker.js 會(huì)議模塊

base/base.js 用戶登錄的相關(guān)信息配置（loginInfo里面的信息去時(shí)信魔方官網(wǎng)注冊(cè)獲取）

base/message.js 定義一個(gè) AppMessageListener 來(lái)監(jiān)聽消息的收取、發(fā)送、文件上傳、消息撤回等各種事件

component/CubeMessage.js 自定義元素的js

在html引入我們所需要的js，使用`
`聊天界面就搭建好了。

你可以根據(jù)需求是否需要發(fā)送圖片，文件等消息類型

在cube-message標(biāo)簽上添加 sendImg屬性就可以發(fā)送圖片

在cube-message標(biāo)簽上添加 sendFile屬性就可以發(fā)送文件

在cube-message標(biāo)簽上添加 sendAudio屬性就可以發(fā)送語(yǔ)音消息

在cube-message標(biāo)簽上添加 sendVoice屬性就可以語(yǔ)音通話

在cube-message標(biāo)簽上添加 sendVideo屬性就可以視頻通話

【注意】：新版本的視頻獲取接口要用HTTPS協(xié)議，否則會(huì)拋出錯(cuò)誤，當(dāng)然現(xiàn)在在本地訪問(wèn)通過(guò) localhost, 127.0.0.1 或者文件協(xié)議，都可以正常使用

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.