WebRTC 輕鬆上手 – 使用 conversat.io 實際玩!(Part 2)

接續文章:http://blog.mozilla.com.tw/posts/2152/

——-

發訊伺服器 (Signaling server)

上面提到的範例,會連接到現成的發訊伺服器。這個是由我們自己維護的伺服器,且我們隨時都在注意其是否順暢運作。

我們的後續目標,是要讓大家都能透過這個伺服器而玩玩看 SimpleWebRTC。當然,我們以後並不會真正永久運轉這組伺服器,所以隨時會關閉或重新開機。

如果你要根據這組程式碼而實際建立 App,那你也可以自己運作 1 組伺服器。如果你不想再多接觸太麻煩的東西而且想隨時更新,我們也可以協助你運作或調整伺服器。這組伺服器的程式碼就放在 on github

在開始啟動自己的 webrtc 物件時,只要送出 1 組「url」選項,就可將 1 組URL 傳送至不同的 signaling server,作為 config 的一部分。

所以檯面下到底會做些什麼?

你可以看看用戶端函式庫的完整原始碼:https://github.com/HenrikJoreteg/SimpleWebRTC/blob/master/simplewebrtc.js

signaling server 的則是:

https://github.com/andyet/signalmaster/blob/master/server.js

 

conversat.io 中啟動視訊電話的過程,應該要像這樣:

  1. 先連線至發訊伺服器。使用 socket.io 就會連至我們現成的發訊伺服器,位於:
    http://signaling.simplewebrtc.com:8888
  2. 針對「具備個別瀏覽器前置字串的 getUserMedia」,在呼叫之後即可請求存取本端視訊相機。

建立或取得本端視訊元素,再將我們從 getUserMedia 所取得的串流,附加到視訊元素上即可。

firefox:

webkit:

 

  1. joinRoom 負責傳送 socket.io 訊息至發訊伺服器,則一旦呼叫此 joinRoom,等於告知其所要連接的聊天室名稱。若聊天室不存在,則發訊伺服器將建立聊天室;若聊天室已存在,就會加入該聊天室。這裡我所說的「聊天室」,就是以聊天室名稱所聚集而成的特定 socket.io session ID。接著針對已連上聊天室的用戶端,我們即可廣播「加入/離開聊天室」的相關訊息。
  2. 在我們等其他人加入聊天室的時候,還可以順便玩一下 @fritzy 所撰寫的好玩火箭遊戲:
  3. 一旦有人加入這個聊天室,我們就會廣播告知其他已連線的使用者。而我們所建立的 Conversation 物件,其中將包含可連接雙方瀏覽器的 peerConnection。你可能已經猜到這個 peerConnection 所代表的,其實就是你和對方之間的連線。
  4. 針對新的 socket.io session ID,signaling server 將廣播給聊天室中的所有使用者。而進入聊天室中的其他人,各使用者的用戶端另將建立 Conversation 物件。
  5. 在此時,我們可以知道應連接哪位使用者,並可分別對他們的階段直接送出訊息。
  6. 現在我們使用 peerConnection 建立 1 組「offer」,儲存我們本端的「offer」之後,再於我們的 peerConnection 中將之設定為本端描述 (Local description);其中的資訊,將說明其他用戶端是如何找到並溝通我們的瀏覽器。
  7. 只要用戶端接收到,且我們將「offer」新增至我們的 peerConnection 之後:

    就會呼叫 peerConnection.createAnswer() 而產生 1 組應答,接著再將應答送回用戶端 (此用戶端為我們所取得「offer」的源頭)。

  1. 收到應答之後,我們將之設定為遠端描述 (Remote description)。接著再以類似方式建立/傳送 ICE Candidates。如此將會交涉 (Negotiate) 連線並連上我們。
  2. 如果這些過程順利,我們就會收到 peerConnection 所發出的 onaddstream 事件,接著即可建立視訊元素並附加上串流。此時應已開始執行視訊呼叫。

若要再進一步了解,可至 SimpleWebRTC project,針對 github 發出 Pull request 與檔案問題。

未來展望

這些不過是剛開始。幫我們一起改善這個程式吧!

我們希望看到更多的可能:

  1. 往後能標準化所有發訊部位。一旦建立了標準,往後大家只要更改某些必要的部份,整體都不會有太大的問題。
  2. 新支援視訊與音訊的暫停/恢復功能。
  3. 讓大家知道目前正在發言的人,且一旦換人發言,即可發出事件以通知聊天室中的其他人。
  4. 能更妥善控制後續需求的處理 (Handling)/拒絕 (Rejecting) 作業。
  5. HTML5 的連線 API 為基礎,設定最大連線數。

如果你針對這個程式做出有趣的東西、遇上任何問題,甚或想和我討論,都可以到我的 Twitter (@henrikjoreteg) 上敲我。我隨時都很樂意聽到任何訊息。

讓我們這些熱心的網民們,繼續提供有趣的網路小工具吧!

英文原文: https://hacks.mozilla.org/2013/03/making-webrtc-simple-with-conversat-io/

作者介紹:

Henrik Joreteg 是 &yet 的合作夥伴,已經用十幾種方法撰寫了幾十種即時 App。他在 &yet 上主持 And Bang,針對 JavaScript 與 HTML5 應用提供相關的諮詢和訓練服務。

Robert 身為 Mozilla 的技術傳教士,並負責編輯 Mozilla Hacks 內的文章。

 

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *