FMUSER更輕鬆地傳輸視頻和音頻!
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org ->荷蘭語
sq.fmuser.org ->阿爾巴尼亞人
ar.fmuser.org ->阿拉伯語
hy.fmuser.org - >亞美尼亞
az.fmuser.org ->阿塞拜疆
eu.fmuser.org ->巴斯克
be.fmuser.org ->白俄羅斯語
bg.fmuser.org - >保加利亞
ca.fmuser.org ->加泰羅尼亞語
zh-CN.fmuser.org ->中文(簡體)
zh-TW.fmuser.org - >中國(繁體)
hr.fmuser.org ->克羅地亞語
cs.fmuser.org ->捷克
da.fmuser.org ->丹麥語
nl.fmuser.org - >荷蘭
et.fmuser.org ->愛沙尼亞語
tl.fmuser.org ->菲律賓
fi.fmuser.org ->芬蘭語
fr.fmuser.org - >法國
gl.fmuser.org ->加利西亞語
ka.fmuser.org ->喬治亞
de.fmuser.org ->德語
el.fmuser.org - >希臘
ht.fmuser.org ->海地克里奧爾語
iw.fmuser.org ->希伯來語
hi.fmuser.org ->印地語
hu.fmuser.org - >匈牙利
is.fmuser.org ->冰島語
id.fmuser.org ->印尼語
ga.fmuser.org ->愛爾蘭
it.fmuser.org - >意大利
ja.fmuser.org ->日語
ko.fmuser.org ->韓文
lv.fmuser.org ->拉脫維亞
lt.fmuser.org - >立陶宛
mk.fmuser.org ->馬其頓語
ms.fmuser.org ->馬來語
mt.fmuser.org ->馬耳他語
no.fmuser.org - >挪威
fa.fmuser.org ->波斯語
pl.fmuser.org ->波蘭語
pt.fmuser.org ->葡萄牙語
ro.fmuser.org - >羅馬尼亞
ru.fmuser.org ->俄語
sr.fmuser.org ->塞爾維亞語
sk.fmuser.org ->斯洛伐克
sl.fmuser.org - >斯洛文尼亞
es.fmuser.org ->西班牙語
sw.fmuser.org ->斯瓦希里語
sv.fmuser.org ->瑞典語
th.fmuser.org - >泰國
tr.fmuser.org ->土耳其語
uk.fmuser.org ->烏克蘭語
ur.fmuser.org ->烏爾都語
vi.fmuser.org - >越南
cy.fmuser.org ->威爾士語
yi.fmuser.org - >意第緒語
交互式實時廣播涉及服務器,教師客戶端,iOS / Android學生客戶端和Web / Wap學生客戶端。 本文重點介紹Maimai的交互過程,前端的Maimai模塊設計以及前端的交互和聊天組件設計。 為了實現聊天室本身的聊天功能,因為對Yunxin IM SDK的訪問主要是通過Api調用程序包實現的,所以我不再贅述。
在設計系統之前,首先需要考慮以下問題:
•每個端的需求定義和功能劃分,每個端如何交互
•雙方之間的協議
•客戶要求麥克風和老師接收
•客戶端進入交互式現場直播室後,交互式信息的同步
有了以上問題,讓我們首先整理一下我們可以依靠的服務。 下圖顯示了網易云提供的以下服務。 結合我們自己的系統要求的設計,我們可以快速集成IM和交互式實時廣播的功能。
•Yunxin IM服務提供了一套完整的基本即時消息傳遞功能,可以將即時消息傳遞和實時網絡功能快速集成到企業自己的應用程序中。
•Yunxin的交互式實時廣播功能支持主持人和觀眾之間的實時交互。
框架
我們的基本需求主要包括以下三個部分:
1.學生進入App客戶端上的聊天室,可以發起小麥請求;
2.在老師方面,您可以批准或拒絕學生的請求;
3.在老師同意學生的要求後,學生可以進入現場直播室進行互動。
結合需求,並整理出以下基本的麥克風請求,連接麥克風和交互過程,如下圖所示。 不同樣式的數據流表示不同的協議。
以下是一些其他概念:
1.客戶端雲鑫IM的SDK,客戶端通過雲鑫IM發送P2P消息給老師
2.客戶端互動直播SDK,客戶端連接到互動直播
3.老師端的Yunxin SDK,接受p2p消息
4.教師端互動直播SDK,與客戶端互動直播
5.網絡上的雲鑫即時通訊軟件開發工具包,收發信息
6.自定義消息,以及兩端發送的消息的數據結構
設計與實施
實現本節主要介紹上一節概述中提到的教師客戶端和Web / Wap學生客戶端的實現。 它主要包括以下部分:流程改進,教師IM模塊,Web學生終端模塊,配置,優點和存在的問題。
工藝細化
首先,讓我們介紹教師端的實現方式,並按下圖中的數字順序對一些細節進行補充說明。 教師端有兩個主要部分,一個是本地語言,在本文中稱為教師的本地語言,另一個是網頁,在本文中稱為教師IM。 教師本機和教師IM通過jsbridge和自定義消息進行通信。
首先,整理出教師本機和教師IM之間的jsbridge通信,如下所示:
-notifyQueueChange
-通知卷
-notify自定義消息
-檢查更新
-notifyLiveStatus
結合以上流程圖,然後對該過程進行詳細說明:
1.客戶端初始化
兩端通過請求服務器獲得統一的聊天室地址
2.教師初始化
教師IM初始化後,它通過服務器請求(getPresenterLiveInfo)獲得聊天室地址,獲得聊天室單例,通知教師本機聊天室已準備好,並獲得交互式實時廣播數據。
3.邀請小麥的過程
•客戶端向教師本機發送一條p2p消息。 教師本機使用jsbridge調用教師IM的notifyCustomMsg,教師IM為它維護的Mai請求更新等待隊列。
•教師的IM單擊以同意或拒絕,並且通過消息通知教師的本國,並且教師的本國通過P2P通知客戶該請求。
•客戶端使用交互式實時廣播SDK,將麥克風連接到直播室,並通過交互式實時廣播SDK向本地教師發送消息。
•教師本機調用notifyQueueChange方法以更新教師IM中的列表
•教師IM,異步請求(informServer)更新服務器的上傳和下載隊列,發送自定義消息(im-sdk),並廣播以通知每個客戶端。
教師IM模塊
結合流程圖和上述過程的詳細說明,設計並拆分了前端模塊,如下圖所示。
這裡,LivePcChat是Tab中的聊天組件,LiveInteractivePresenter是處理交互操作的組件,而XXcache是封裝相應數據層操作的組件。 具體的組件實例,調用,數據請求和處理過程如下圖所示:
網絡學生模塊
對於Web / Wap學生終端,因為Web / Wap學生終端本身尚未開發處女功能。 這裡,以Web學生終端為例,以交互列表和聊天交互方式介紹Web / Wap學生終端的實現。 本身的聊天室部分和教師端的聊天室重用了聊天組件,因此這裡也首先劃分模塊。 您可以參考教師端的組件劃分,以比較教師端和學生端重用的一些組件。 下圖顯示了網絡學生方面的情況。
從下表中的比較可以看出,除了與應麥相關的處理邏輯之外,還可以重用教師側和網絡學生側的IM的其他功能。
型號
交互式實時廣播是在原始實時廣播的基礎上進行的迭代,因此在這裡我們必須確保交互式實時廣播在各種教育產品系列中的可配置性。 這裡提到的配置類似於教育公共組件池中其他模塊和組件訪問的配置。 它還依賴於教育通用組件緩存庫,當加載實時頁面或項目單頁(機構背景)時,該配置將在配置中讀取(機構背景)配置,一鍵配置。
利弊分析
使用這種設計的優點是
1.所有服務器請求均通過網頁發送,降低了教師的維護成本;
2.模塊的可配置性。 在不同的業務部門中,可以配置它來決定是否連接到交互式直播。
3.組件是顆粒狀的。 在不同的模塊中,教師端可以訪問聊天組件和交互組件,麥克風組件,而學生端只能訪問交互列表組件;
4.它在很大程度上取決於現有的Yunxin SDK所執行的功能,這些功能可以在相對較短的時間內滿足要求。
問題
1. Yingmai的過程更加複雜,因為它涉及多個端,並且在每個端進行調試都是浪費時間。 這也是組織本文的目的。 在了解了每個端的過程之後,每個端可以首先在調試過程中定位問題的端,然後可以有針對性地在某個鏈接中找到問題。
2.由於它是在原始迭代的基礎上執行的,因此許多組件沒有封裝到教育標準組件中,但是在邏輯清晰的前提下,可以在後續迭代中對其進行優化。
3.優化前端實現方法。
總結
通過本文,我們將梳理交互式實時廣播每一端的邏輯,以方便以後對交互式實時廣播過程的理解。 對於客戶和老師,您可以了解前端提供的接口和消息的實現。 如果需要在另一個後續項目中訪問交互式實時廣播模塊,則可以快速對其進行訪問和調試,同時可以進一步優化上面提出的現有問題。
|
輸入電子郵件以獲取驚喜
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org ->荷蘭語
sq.fmuser.org ->阿爾巴尼亞人
ar.fmuser.org ->阿拉伯語
hy.fmuser.org - >亞美尼亞
az.fmuser.org ->阿塞拜疆
eu.fmuser.org ->巴斯克
be.fmuser.org ->白俄羅斯語
bg.fmuser.org - >保加利亞
ca.fmuser.org ->加泰羅尼亞語
zh-CN.fmuser.org ->中文(簡體)
zh-TW.fmuser.org - >中國(繁體)
hr.fmuser.org ->克羅地亞語
cs.fmuser.org ->捷克
da.fmuser.org ->丹麥語
nl.fmuser.org - >荷蘭
et.fmuser.org ->愛沙尼亞語
tl.fmuser.org ->菲律賓
fi.fmuser.org ->芬蘭語
fr.fmuser.org - >法國
gl.fmuser.org ->加利西亞語
ka.fmuser.org ->喬治亞
de.fmuser.org ->德語
el.fmuser.org - >希臘
ht.fmuser.org ->海地克里奧爾語
iw.fmuser.org ->希伯來語
hi.fmuser.org ->印地語
hu.fmuser.org - >匈牙利
is.fmuser.org ->冰島語
id.fmuser.org ->印尼語
ga.fmuser.org ->愛爾蘭
it.fmuser.org - >意大利
ja.fmuser.org ->日語
ko.fmuser.org ->韓文
lv.fmuser.org ->拉脫維亞
lt.fmuser.org - >立陶宛
mk.fmuser.org ->馬其頓語
ms.fmuser.org ->馬來語
mt.fmuser.org ->馬耳他語
no.fmuser.org - >挪威
fa.fmuser.org ->波斯語
pl.fmuser.org ->波蘭語
pt.fmuser.org ->葡萄牙語
ro.fmuser.org - >羅馬尼亞
ru.fmuser.org ->俄語
sr.fmuser.org ->塞爾維亞語
sk.fmuser.org ->斯洛伐克
sl.fmuser.org - >斯洛文尼亞
es.fmuser.org ->西班牙語
sw.fmuser.org ->斯瓦希里語
sv.fmuser.org ->瑞典語
th.fmuser.org - >泰國
tr.fmuser.org ->土耳其語
uk.fmuser.org ->烏克蘭語
ur.fmuser.org ->烏爾都語
vi.fmuser.org - >越南
cy.fmuser.org ->威爾士語
yi.fmuser.org - >意第緒語
FMUSER更輕鬆地傳輸視頻和音頻!
聯絡我們
分類
電子通訊