摘要:示例當用戶從連接或斷開鏈接時,將被調用,該方法的回調函數包含兩個參數連接到相同房間名的用戶在我們的示例程序當中,該方法的回調函數將建立一系列用于撥打給當前已連接到房間內的其他用戶的按鈕。
EasyRTC 概覽
EasyRTC基于webRTC。WebRTC是W3C/IETF用于瀏覽器間實時音視頻溝通以及數據傳輸的一個實現方案。WebRTC只需要一個輕量負荷的服務器就可以支持點對點(P2P)間的任何數據傳輸。
EasyRTC由客戶端(瀏覽器端)的JS庫與基于node.js的后端服務器組成。WebRTC已經被各個瀏覽器(google chrome, firefox, opera, etc)所支持,因此無需額外的瀏覽器插件。
Google Chrome對WebRTC的API有著最廣泛的支持,Opera現在采用與Chrome相同的內核引擎,因此所有API行為與chrome基本一致。Firefox對WebRTC的Data Channel有著十分良好的實現,但僅提供了基礎的視頻功能。
一旦WebRTC被標準化,它將有著巨大的潛能為音視頻會議,多用戶游戲,以及許多其他的基于音視頻,數據傳輸的應用提供支持。
如同其他的軟件,強大的功能往往伴隨著復雜的內部實現。WebRTC有著十分曲折的學習曲線,對開發人員不夠友好。為了簡化具體的開發流程,我們(Priologic)構建了EasyRTC框架。
構建一個基于WebRTC的應用通常有如下步驟。
將本地攝像頭、麥克風獲取到的數據輸出成media stream對象
與信令服務器建立連接
通過瀏覽器與目標用戶建立p2p通信
將media stream綁定到
通過使用EasyRTC,一些步驟可以被簡化到一個簡單的通信(call)當中,
能極大地簡化開發流程,尤其是當開發人員需要投入更多的精力于多平臺支持當中。
此文檔是編寫基于WebRTC應用的一個基本教程,但并未包含EasyRTC的所有API。
術語callbakck(回調函數)
Media Stream 瀏覽器音視頻輸出對象
Peer Connection 點對點連接
Server
安裝EasyRTC與獲取支持EasyRTC的安裝十分簡單,多數平臺可在10分鐘內完成。我們提供了Windows,Linux,Mac的安裝向導。EasyRTC的源碼可在[https://github.com/priologic/...]獲取。在doc目錄下可以獲取到客戶端與服務端的所有HTML說明文檔
視頻會議html 略
頁面載入完成(onload)后調用初始化函數(initialization function)。
初始化函數的最主要作用是調用EasyRTC.easyApp方法。該方法有如下參數
applicationName - String 應用名,如"Company_Chat_Line"
self-video-id - String video標簽id
array-of-caller-video-ids - Array 包含了其他用戶(除當前用戶)的video標簽id
successCallback - 連接成功時回調函數
初始化函數可以使用EasyRTC.setRoomOccupantListener來注冊一個回調函數,以用于獲取當前已連接到同一房間內的其他用戶id,。
示例:
</>復制代碼
function my_init() {
easyrtc.setRoomOccupantListener(loggedInListener)
easyrtc.easyApp("Company_chat_line", "self", ["caller"], id => {
console.info("My id is " + id)
})
}
當用戶從"Company_chat_line"連接或斷開鏈接時,easyrtc.setRoomOccupantListener將被調用,該方法的回調函數包含兩個參數:
String room name
Array 連接到相同房間名的用戶id
在我們的示例程序當中,該方法的回調函數將建立一系列用于“撥打”給當前已連接到房間內的其他用戶的按鈕。
html 略
多數情況下可以忽略room_name參數,除非你的應用允許用戶同時連接到多個房間。
在現實的應用當中,我們不會使用easyrtc的默認id當作按鈕的label屬性。我們將使用類似姓名,職位等建立起與easyrtc id相關聯的內容以用作按鈕的label屬性。
初始化一個call,我們只需要調用 easyrtc.call 方法,傳入目標用戶的id,該方法包含三個回調函數:
successCallback(id)
errorCallback(errorCode, errorText)
accepted(wasAccepted, id) 指明該call是否被接受
示例代碼:
</>復制代碼
function performCall(id) {
easyrtc.call(id, id => {
console.info("completed call to " + id)
}, errorMessage => {
console.error("err: " + errorMessage)
}, (accepted, bywho) => {
console.info(accepted ? "accepted" : "rejected" + " by " + bywho)
})
}
html 略
視頻會議(Advanced)在上一節,我們大致地描述了構建一個視頻會議應用的最簡單情形。
在這一節,我們將進一步深入。
除了調用easyrtc.easyApp,你也可以調用easyrtc.initMediaSource來直接獲取本地設備的media stream,成功之后可以調用easyrtc.connect方法來連接到信令服務器。這也是easyrtc.easyApp的內部實現。
html略
注意: easyrtc.getLocalStream和easyrtc.setVideoObjectSrc,前者用于當easyrtc.initMediaSource調用完成,從本地攝像頭和麥克風獲取media stream,后者用于將media stream與video標簽綁定。一起使用便可以十分便攜地供用戶實時觀察到他們自己的圖像。
我們還需要兩個其他函數
一個用于提供遠程用戶的media stream
</>復制代碼
easyrtc.setStreamAcceptor((callerId, stream) => {
let video = document.getElementById("caller")
easyrtc.setVideoObjectSrc(video, stream)
})
一個用于檢測遠程用戶是否掛起(離線)。該函數用于清除對應的video標簽
</>復制代碼
easyrtc.setOnStreamClosed(callerId => {
easyrtc.setVideoObjectSrc(document.getElementById("caller"), "")
})
整個js文件如下
</>復制代碼
// 設置遠程用戶的media stream 的關聯video標簽
easyrtc.setStreamAcceptor((callerId, stream) => {
let video = document.getElementById("caller")
// 綁定media stream到video標簽對象
easyrtc.setVideoObjectSrc(video, stream)
})
// 當遠程media strem 關閉
easyrtc.setOnStreamClosed(callerId => {
// 清除關聯的video標簽內容
easyrtc.setVideoObjectSrc(document.getElementById("caller"), "")
})
// 初始化函數
function my_init() {
// 設置監聽器,獲取當前在線的用戶
easyrtc.setRoomOccupantListener(loggedInListener)
// 連接成功處理函數
let connectSuccess = myId => {
console.info("My easyrtc id is " + myId)
}
// 連接失敗 創建本地media stream對象失敗時調用函數
let connectFailure = (errorCode, errText) => {
console.error(errText)
}
// 初始化本地media stream
easyrtc.initMediaSource(() => {
let selfVideo = document.getElementById("self")
// 綁定本地media stream 到video tag
easyrtc.setVideoObjectSrc(selfVideo, easyrtc.getLocalStream())
// 連接到服務器
easyrtc.connect("Company_Chat_line", connectSuccess, connectFailure)
},
connectFailure)
}
// 當獲取到當前房間內在線用戶
function loggedInListener(roomName, otherPeers) {
let otherClientDiv = document.getElementById("otherClients")
while(otherClientDiv.hasChildNodes()) {
// 移除最后一個 “text ”
otherClientDiv.removeChild(otherClientDiv.lastChild)
}
for (let i in otherPeers) {
let button = document.createElement("button")
// 為每一個遠程用戶創建一個按鈕監聽器
button.onclick = easyrtcId => {
// 發起連接
return (easyrtcId) => performCall(easyrtcId)
}(i)
let label = document.createTextNode(i)
button.appendChild(label)
otherClientDiv.appendChild(button)
}
}
function performCall(id) {
easyrtc.call(id, id => {
console.info("completed call to " + id)
},
(errorCode, errText) => {
console.error("err: " + errorText)
},
(accepted, bywho) => {
console.info(accepted ? "accepted" : "rejected" + " by " + bywho)
})
}
使用多個本地media stream源
使用多個media stream的基本思想是,你需要為每個media stream命名。
當你調用initMediaSource,它的第三個參數便是media stream的名字,
如:
</>復制代碼
easyrtc.initMediaStream(success, failure, yourname)
如果你沒有傳入第三個參數,則該media stream會得到一個默認的"default"。
使用easyrtc.getLocalMediaIds以獲取所有本地media stream的名字
</>復制代碼
let ids = easyrtc.getLocalMediaIds()
ids.map(id => console.info(id))
當你初始化一個call,可以傳入一個stream name的數組作為第五個參數,同樣的,當你接受call時,你可以傳入一個stream name的數組作為accept回調函數的第二個參數。
</>復制代碼
easyrtc.call(otherEasyrtcId, successCB, failCB, wasAcceptedCB, ["first_name", "second_name", "etc"])
easyrtc.setAcceptChecker((otherGuy, acceptCallback) => {
acceptCallback(true, ["first_name", "second_name"])
})
你也可以通過使用easyrtc.addStreamToCall向一個已存在的call添加meida stream。該方法接受三個參數,接受stream的id,stream的名字,以及一個optional的回調處理函數。
注意:EasyApp 框架并不是專門為多media stream而設計的。它的初衷便是假定只有單個本地media stream。
如果你想使用media stream,那么你就必須自己將這些media stream綁定到video標簽。
EasyRTC允許注冊一個在用戶每次收到call時都將被調用的函數。該函數接受遠程用戶的id,以及一個報告函數(reporting function)作為參數,報告函數接受一個參數,true接受對話,false拒絕對話。
</>復制代碼
easyrtc.setAcceptChecker( function(easyrtcid, acceptor){
if( easyrtc.idToName(easyrtcid) === "Fred" ){
acceptor(true);
}
else if( easyrtc.idToName(easyrtcid) === "Barney" ){
setTimeout( function(){
acceptor(true, ["myOtherCam"]); // myOtherCam presumed to a streamName
}, 10000);
}
else{
acceptor(false);
}
});
加入或離開房間
Room是EasyRTC的一個隔離(compartmentalize)功能,目的是為用戶建立起一個個“chat rooms”。
房間的行為受服務器安裝的EasyRTC Server的配置所影響(詳見服務器模塊文檔)。默認行為如下:
除非用戶在連接前指定了所要加入的房間名,否則將會加入默認的“default”房間。
一個用戶可以是多個房間的成員
每個用戶所加入的任一個房間發生變化時(用戶的加入,離開),都會觸發roomOccupantListener函數
加入一個不存在的房間將會創建它
加入房間
</>復制代碼
easyrtc.joinRoom(roomName, roomParameters, successCallback, failureCallback)
其中,roomParameters是Application specific(不詳),可以為空。joinRoom可以在任何時候調用任意多次,但successCallback, failureCallback只會在成功與信令服務器建立連接之后才會被調用。
離開房間
</>復制代碼
easyrtc.leaveRoom(roomName, successCallback, failureCallback)
leaveRoom的性質同joinRoom
監聽Error你可以通過easyrtc.setOnError注冊一個error callback用以處理錯誤。該函數接受一個形如{"errorCode": "errorCode", "errorText": "errorText"}的對象。
</>復制代碼
easyrtc.setOnError(errEvent => {
console.error(errEvent.errorText)
})
發送消息
你可以通過調用easyrtc.sendDataWS來使用websocket通信,
</>復制代碼
easyrtc.sendDataWS(destination, messageType, messageData, ackHandler)
easyrtc.sendDataWS("xkxkxkxkxk9c93", "contactInfo", {firstName: "jack", lastName: "smith"}, ackMsg => {
// ackMsg 為來自服務器的確認信息
if (ackMsg.msgType === "error") {
console.error(ackMsg.msgData.errorText)
}
})
注意: 通過websocket通信意味著你指定信息要通過服務器轉發
destination 可以是peer的id,或者是一個指定了一個或多個目標id的js對象,或者房間(詳見文檔)。
messageType需要自行指定,ackHandler處理來自服務器的確認信息
處理來自其他用戶的信息:
easyrtc.setPeerListener((sender_id, msgType, msgData, targeting) => {
</>復制代碼
if (msgType === "contactInfo") {
console.info(sender_id + " is named " + msgData.firstName + " " + msgData.lastName)
}
})
其中,當使用WebRTC的data channel發送數據時,targeting為null,否則為{targetEasyrtcid, targetGroup, targetRoom}當中的一個。
你也可以為特定的msgType或sender指定監聽器,在這種情況下,每次將只有一個監聽器會被調用,指定的監聽器將被優先調用。
使用Data Channels在使用data channel之前,發送者和接收者都必須啟用data channels。
</>復制代碼
easyrtc.enableDataChannels(true)
之后便可監聽與特定用戶的datachannel的 ready 和 close 事件,
</>復制代碼
easyrtc.setDataChannelOpenListener(sourceEasyrtcId =>
console.info("channel is open ")
)
easyrtc.setDataChannelCloseListener(sourceEasyrtcid =>
console.info("channel is close ")
)
open監聽器被調用之后,便可以通過easyrtc.sendDataP2P來發送消息:
</>復制代碼
easyrtc.sendDataP2P(targetEasyrtcid, "contactInfo", {firstName: "jack", lastName: "smith"})
監聽data channels消息與websocket消息一致
獲取當前連接數通過easyrtc.getConnectionCount來獲取當前用戶的連接數,該函數返回一個number
掛起通過easyrtc.hangup(peerId)來掛起與特定用戶的連接
easyrtc.hangupAll()來掛起與所有用戶的連接
與服務器斷開鏈接</>復制代碼
easyrtc.disconnect()
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/92451.html
摘要:畢竟官方文檔才是未經提煉的純技術點,讀書不能只讀二手書。目前網上能找到的中文文檔基本都是基于的,但截至此文發布,最新的穩定版都已經是了。翻譯過程中主要參考官方英文文檔,以及極客學院的官方文檔中文翻譯。 前言 相信很多開發者和我一樣,在學習一門技術的時候,通過網上的各種教程和視頻入門之后會發現自己遇到一個上升瓶頸。造成這個瓶頸的很大一部分原因,我認為是進階教程的知識點過于分散,同時高質量...
摘要:關于本文檔本文檔的目的,是全面地解釋的,即可作為參考文檔,同時也包含了概念的講解。但有的全新的實驗性的,或者存在危險性的部分則會被重新設計。穩定級別鎖定只會有安全性能或相關的修復。不接受對此做修改的建議。 關于本文檔 本文檔的目的,是全面地解釋Node.js的API,即可作為參考文檔,同時也包含了概念的講解。每個章節都描述了一個內置模塊或一個高階概念(high-level concep...
閱讀 2452·2019-08-30 15:52
閱讀 2250·2019-08-30 12:51
閱讀 2844·2019-08-29 18:41
閱讀 2827·2019-08-29 17:04
閱讀 823·2019-08-29 15:11
閱讀 1739·2019-08-28 18:02
閱讀 3612·2019-08-26 10:22
閱讀 2518·2019-08-26 10:12